首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap每天必学之进度条

Posted in Javascript onNovember 30, 2015

1、进度条

在网页中，进度条的效果并不少见，比如一个评分系统，比如加载状态等。就如下图所示的一个评分系统，他就是一个简单的进度条效果：

Bootstrap每天必学之进度条

进度条和其他独立组件一样，开发者可以根据自己的需要，选择对应的版本：

☑ LESS版本：源码文件progress-bars.less

☑ Sass版本：源码文件_progress-bars.scss

☑ 编译后版本：bootstrap.css文件第4500行～第4575行

而且Bootstrap框架为大家提供多种样式风格的进度条，供大家使用.

2、进度条?基本样式

Bootstrap框架中对于进度条提供了一个基本样式，一个100%宽度的背景色，然后个高亮的色表示完成进度。其实制作这样的进度条非常容易，一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，他的子元素设置一个宽度，比如完成度是30%（也就是父容器的宽度比例值），同时给其设置一个高亮的背景色。

1）、使用方法：

Bootstrap框架中也是按这样的方式实现的，他提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。使用方法非常的简单：

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

运行效果如下：

Bootstrap每天必学之进度条

2）、实现原理：

前面也说了，这样的基本进度条主要分成两部分：

progress样式主要设置进度条容器的背景色，容器高度、间距等：

/bootstrap.css文件第4516行～第4524行/

.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样式在设置进度方向，重要的是设置了进度条的背景颜色和过渡效果：

/bootstrap.css文件第4525行～第4538行/

.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;
 transition: width .6s ease;
}

3）、结构优化：

虽然这样实现了基本进度条效果，但对于残障人员浏览网页有点困难，所以我们可以将结构做得更好些（语义化更友好些）：

<div class="progress">
 <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
 <span class="sr-only">40% Complete</span>
 </div>
</div>

1>、role属性作用：告诉搜索引擎这个div的作用是进度条。

2>、aria-valuenow="40"属性作用：当前进度条的进度为40%。

3>、aria-valuemin="0"属性作用：进度条的最小值为0%。

4>、aria-valuemax="100"属性作用：进度条的最大值为100%。

3、进度条?彩色进度条

Bootstrap框架中的进度条和警告信息框一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条，其主要包括以下四种：

☑ progress-bar-info：表示信息进度条，进度条颜色为蓝色

☑ progress-bar-success：表示成功进度条，进度条颜色为绿色

☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色

☑ progress-bar-danger：表示错误进度条，进度条颜色为红色

1）、使用方法：

具体使用就非常简单了，只需要在基础的进度上增加对应的类名。如：

<div class="progress">
 <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

运行效果如下：

Bootstrap每天必学之进度条

2）、实现原理：

彩色进度条与基本进度条相比，就是进度条颜色做了一定的变化，其对应的样式代码如下：

/bootstrap.css文件第4548行～第4550行/

.progress-bar-success {
 background-color: #5cb85c;
}
/*bootstrap.css文件第4555行～第4557行*/
.progress-bar-info {
 background-color: #5bc0de;
}
/*bootstrap.css文件第4562行～第4564行*/
.progress-bar-warning {
 background-color: #f0ad4e;
}
/*bootstrap.css文件第4569行～第4571行*/
.progress-bar-danger {
 background-color: #d9534f;
}

4、进度条?条纹进度条

在Bootstrap框架中除了提供了彩色进度条之外，还提供了一种条纹进度条，这种条纹进度条采用CSS3的线性渐变来实现，并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”，当然，如果你要让你的进度条条纹像彩色进度一样，具有彩色效果，你只需要在进度条上增加相应的颜色类名，如前面的彩色进度条所讲。

一起来看一下制作条纹进度条的结构：

<div class="progress progress-striped">
 <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped">
 <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped">
 <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped">
 <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

运行效果如下：

Bootstrap每天必学之进度条

1）、原现实现：

正如前面所说，实现条纹进度条，主要使用的是CSS3的线性渐变，其具体代码如下：

/bootstrap.css文件第4539行～第4547行/

.progress-striped .progress-bar {
 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: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-size: 40px 40px;
}

同样的，条纹进度条对应的每种状态也有不同的颜色，使用方法与彩色进度条一样。只是样式上做了一定的调整：

/bootstrap.css文件第4551行～第4554行/

.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: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);
}

/bootstrap.css文件第4558行～第4561行/

.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: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);
}

/bootstrap.css文件第4565行～第4568行/

.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: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);
}
/*bootstrap.css文件第4572行～第4575行*/
.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: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);
}

5、进度条?动态条纹进度条

使用方法：

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

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

1）、实现原理：

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

/bootstrap.css文件第4500行～第4515行/

@-webkit-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;
 }
}

了解CSS3的同学都知道，@keyframes仅仅是创建了一个动画效果，如果要让进度条真正的动起来，我们需要通过一定的方式调用@keyframes创建的动画“progress-bar-stripes”，并且通过一个事件触发动画生效。在Bootstrap框架中，通过给进度条容器“progress”添加一个类名“active”，并让文档加载完成就触“progress-bar-stripes”动画生效。

<div class="progress progress-striped active">
 <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped active">
 <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped active">
 <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped active">
 <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

调用动画对应的样式代码如下：

/bootstrap.css文件第4544行～第4547行/

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

运行效果如下：

Bootstrap每天必学之进度条

特别注意：要让条纹进度条动起来，就需要让“progress-striped”和“active”同时运用，不然条纹进度条是不具备动效效果。

6、进度条?层叠进度条

Bootstrap框架除了提供上述几种进度条之外，还提供了一种层叠进度条，层叠进度条，可以将不同状态的进度条放置在一起，按水平方式排列。具体使用如下：

<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>

运行效果如下：

Bootstrap每天必学之进度条

或许你会感到疑问，没有为层叠进度条添加额外的样式代码，怎么就正常了呢？可以回过头来看基本进度条那部分，不难发现，在“progress-bar”上有一个左浮动的样式。也就是这个样式，在不增加任何样式代码就能实现上例的层叠效果。当然有一点需要注意，层叠进度条宽度之和不能大于100%，大于100%就会造成下面的不良效果：

Bootstrap每天必学之进度条

除了层叠彩色进度条之外，还可以层叠条纹进度条，或者说条纹进度条和彩色进度条混合层叠，仅需要在“progress”容器中添加对应的进度条，同样要注意，层叠的进度条之和不能大于100%。来简单的看一个示例：

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

运行效果如下：

Bootstrap每天必学之进度条

7、进度条?带Label的进度条

上面介绍的各种进度条，都仅仅是通过颜色进度向用户传递进度值。但实际中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，在Bootstrap就为大家考虑了这种使用场景。

1）、实现方法：

只需要在进度条中添加你需要的值，如：

<div class="progress">
 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>

运行效果如下：

Bootstrap每天必学之进度条

还有一种特殊情形，当进度条处于开始位置，也就是进度条的值为0%时，内容是否会撑开一定的宽度，让进度条具有颜色呢？如果是，这不是我们需要的效果，如果不是，又是怎么实现的呢？我们先来看一个这样的示例：

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

运行效果如下：

Bootstrap每天必学之进度条

2）、原理分析：

效果告诉我们，当进度为0%，进度条颜色并没有显示出来，那是因为Bootstrap在样式上做了一定的处理。

/bootstrap.css文件第4748行~第4759行/

.progress-bar[aria-valuenow="1"],
.progress-bar[aria-valuenow="2"] {
 min-width: 30px;
}
.progress-bar[aria-valuenow="0"] {
 min-width: 30px;
 color: #777;
 background-color: transparent;
 background-image: none;
 -webkit-box-shadow: none;
 box-shadow: none;
}

注：这段代码BootstrapV3.2版本才有。在Bootstrap V3.1.1版本是不具有这段代码，同时也说明，Bootstrap在不断的完善之中。

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是关于Bootstrap进度条的全部内容介绍，并有详细的原理分析，希望对大家的学习有所帮助。

Bootstrap每天必学之进度条

- Author -

小平果118

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

Javascript 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
javascript StringBuilder类实现
Dec 22 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 Javascript
手把手教你如何编译打包video.js
Dec 09 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
javascript省市区三级联动下拉框菜单实例演示
Nov 29 #Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 #Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 #Javascript
整理Javascript流程控制语句学习笔记
Nov 29 #Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 #Javascript
整理Javascript数组学习笔记
Nov 29 #Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 #Javascript
location(2) keeplive_timeout(1) 逻辑函数(1) http_stub_status_module(1) 数据合并(1) zabbix(9) 复合索引(1) BufferPool(1) 连接查询(1) 缓存机制(1)
You might like
php中常用编辑器推荐
2007/01/02 PHP
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
javascript 二分法(数组array)
2010/04/24 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
django 信号调度机制详解
2019/07/19 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
Paradox London官方网站：英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
美国木工工具和用品商店：Woodcraft
2019/10/30 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
经销商培训邀请函
2014/01/21 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
竞聘书格式及范文
2014/03/31 职场文书
人力资源职位说明书
2014/07/29 职场文书
普通党员整改措施
2014/10/24 职场文书
护理见习报告范文
2014/11/03 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
在 Python 中利用 Pool 进行多线程
2022/04/24 Python