编程 Javascript

Bootstrap源码学习笔记之bootstrap进度条

Posted in Javascript onDecember 24, 2016

基本样式

要实现进度条效果要使用两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。例如：

<div class="progress">
  <div class="progress-bar" style="width:40%"></div>
</div>

progress样式主要设置进度条容器的背景色，容器高度、间距等，progress-bar样式设置进度，主要是设置了进度条的背景颜色和过渡效果。实现源码如下：

.progress {
 height: 20px;
 margin-bottom: 20px;
 overflow: hidden;
 background-color: #f5f5f5;
 border-radius: 4px;
 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.progress-bar {
 float: left;
 width: 0;
 height: 100%;
 font-size: 12px;
 line-height: 20px;
 color: #fff;
 text-align: center;
 background-color: #428bca;
 -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
     box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
 -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
     transition: width .6s ease;
}

彩色进度条

在基础的进度条上追加对应的类名即可：

.progress-bar-info：信息进度条，进度条颜色为蓝色
.progress-bar-success：成功进度条，进度条颜色为绿色
.progress-bar-warning：警告进度条，进度条颜色为黄色
.progress-bar-danger：错误进度条，进度条颜色为红色

实现源码如下：

.progress-bar-success {
 background-color: #5cb85c;
}
.progress-bar-info {
 background-color: #5bc0de;
}
.progress-bar-warning {
 background-color: #f0ad4e;
}
.progress-bar-danger {
 background-color: #d9534f;
}

条纹进度条

要实现条纹进度条效果只需要在进度条的容器“progress”基础上增加类名“progress-striped”即可。
实现源码如下：

.progress-striped .progress-bar,
.progress-bar-striped {
 background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:   -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:     linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 -webkit-background-size: 40px 40px;
     background-size: 40px 40px;
}
.progress-striped .progress-bar-success {
 background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:   -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:     linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-info {
 background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:   -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:     linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-warning {
 background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:   -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:     linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-danger {
 background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:   -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:     linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

动态条纹进度条

在进度条“progress progress-striped”两个类的基础上再加入“active”类名即可。例如：

<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>

实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片。动画的实现源码如下：

@-webkit-keyframes progress-bar-stripes {
 from {
  background-position: 40px 0;
 }
 to {
  background-position: 0 0;
 }
}
@-o-keyframes progress-bar-stripes {
 from {
  background-position: 40px 0;
 }
 to {
  background-position: 0 0;
 }
}
@keyframes progress-bar-stripes {
 from {
  background-position: 40px 0;
 }
 to {
  background-position: 0 0;
 }
}

调用动画的实现源码如下：

.progress.active .progress-bar,
.progress-bar.active {
 -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
     animation: progress-bar-stripes 2s linear infinite;
}

层叠进度条

层叠进度条可以将不同状态的进度条放置在一起，按水平方式排列。例如：

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width:20%"></div>
  <div class="progress-bar progress-bar-info" style="width:10%"></div>
  <div class="progress-bar progress-bar-warning" style="width:30%"></div>
  <div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>

我们可以发现，层叠进度条并没有额外的样式代码，之所以这样就能生效是因为在“progress-bar”上有一个左浮动的样式。要注意，层叠进度条宽度之和不能大于100%。

带Label的进度条

要实现带Label的进度条，只需要在进度条中添加你需要的值即可。例如：

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width:20%">20%</div>
</div>

要是那进度条的值为0%时，可以这么写：

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>

以上所述是小编给大家介绍的 Bootstrap源码学习笔记之bootstrap进度条，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

Bootstrap源码学习笔记之bootstrap进度条

- Author -

艺术就是爆炸

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery 单引号和双引号的区别及使用注意

Jul 31 Javascript

JS常用函数使用指南

Nov 23 Javascript

jQuery实现友好的轮播图片特效

Jan 12 Javascript

JS实现网页每隔3秒弹出一次对话框的方法

Nov 09 Javascript

微信小程序欢迎页面的制作（源码下载）

Jan 09 Javascript

详解Vue 开发模式下跨域问题

Jun 06 Javascript

仿淘宝JSsearch搜索下拉深度用法

Jan 15 Javascript

浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法

Feb 21 Javascript

微信小程序车牌号码模拟键盘输入功能的实现代码

Nov 11 Javascript

VUE+elementui面包屑实现动态路由详解

Nov 04 Javascript

vue获取data数据改变前后的值方法

Nov 07 Javascript

js实现时间日期校验

May 26 Javascript

js addDqmForPP给标签内属性值加上双引号的函数

Dec 24 #Javascript

Bootstrap php制作动态分页标签

Dec 23 #Javascript

前端JS面试中常见的算法问题总结

Dec 23 #Javascript

Bootstrap源码解读导航条（7）

Dec 23 #Javascript

livereload工具实现前端可视化开发【推荐】

Dec 23 #Javascript

浅谈jQuery操作类数组的工具方法

Dec 23 #Javascript

jquery pagination插件动态分页实例(Bootstrap分页)

Dec 23 #Javascript

You might like

jQuery EasyUI API 中文文档 - DateBox日期框

2011/10/15 PHP

destoon二次开发常用数据库操作

2014/06/21 PHP

PHP中的traits简单使用实例

2015/05/13 PHP

Symfony2使用第三方库Upload制作图片上传实例详解

2016/02/04 PHP

Symfony2学习笔记之模板用法详解

2016/03/17 PHP

laravel自定义分页效果

2017/07/23 PHP

JQuery 将元素显示在屏幕的中央的代码

2010/02/27 Javascript

JavaScript操作XML实例代码（获取新闻标题并分页，并分页）

2010/05/25 Javascript

使用jQuery将多条数据插入模态框的实现代码

2014/10/08 Javascript

Nodejs极简入门教程（二）：定时器

2014/10/25 NodeJs

jQuery前端框架easyui使用Dialog时bug处理

2014/12/05 Javascript

javascript实现输出指定行数正方形图案的方法

2015/08/03 Javascript

JavaScript中使用数组方法汇总

2016/02/16 Javascript

使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法

2016/03/22 Javascript

JS生成不重复的随机数组的简单实例

2016/07/10 Javascript

原生js获取元素样式的简单方法

2016/08/06 Javascript

Angular2 路由问题修复详解

2017/03/01 Javascript

使用json-server简单完成CRUD模拟后台数据的方法

2018/07/12 Javascript

node.js中process进程的概念和child_process子进程模块的使用方法示例

2020/02/11 Javascript

解决vant的Toast组件时提示not defined的问题

2020/11/11 Javascript

vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能

2020/11/16 Javascript

python备份文件以及mysql数据库的脚本代码

2013/06/10 Python

Python格式化css文件的方法

2015/03/10 Python

Python文档生成工具pydoc使用介绍

2015/06/02 Python

python用pandas数据加载、存储与文件格式的实例

2018/12/07 Python

Python实现决策树并且使用Graphviz可视化的例子

2019/08/09 Python

PyQt5 控件字体样式等设置的实现

2020/05/13 Python

HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码

2018/03/02 HTML / CSS

StubHub希腊：购买体育赛事、音乐会和剧院门票

2019/08/03 全球购物

全球领先的全景影像品牌：Insta360

2019/08/21 全球购物

荷兰睡眠专家：Beter Bed

2020/11/23 全球购物

学生拾金不昧表扬信

2014/01/21 职场文书

爱心捐款倡议书范文

2014/05/12 职场文书

就业协议书范本

2014/10/08 职场文书

建国大业观后感

2015/06/01 职场文书

《全神贯注》教学反思

2016/02/22 职场文书