首页
所有分类
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 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
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
乐信(1) ICF-SW7600(1) BCL3000(2) PL990(2) H-501(1) ICF-SW07(1) 低放电路(1) PL450(1) PL550(1) RP2100(1)
You might like
php Ajax乱码
2008/04/09 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
php全角字符转换为半角函数
2014/02/07 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
php简单判断文本编码的方法
2015/07/30 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
快速入门Vue
2016/12/19 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
jquery实现聊天机器人
2020/02/08 jQuery
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
python决策树之C4.5算法详解
2017/12/20 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
基于pip install django失败时的解决方法
2018/06/12 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
澳大利亚一站式数码相机商店：CameraPro
2020/03/09 全球购物
店长岗位职责
2013/11/21 职场文书
找工作最新求职信
2013/12/22 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
求职意向书
2014/07/29 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
运动会3000米加油稿
2015/07/21 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis