大佬教程收集整理的这篇文章主要介绍了Bootstrap每天必学之进度条，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
在网页中，进度条的效果并不少见，比如一个评分系统，比如加载状态等。就如下图所示的一个评分系统，他就是一个简单的进度条效果：
进度条和其他独立组件一样，开发者可以根据自己的需要，选择对应的版本：
ώ5; LESS版本：源码文件progress-bars.less
ώ5; Sass版本：源码文件_progress-bars.scss
ώ5; 编译后版本：bootstrap.css文件第4500行～第4575行
而且Bootstrap框架为大家提供多种样式风格的进度条，供大家使用.
Bootstrap框架中对于进度条提供了一个基本样式，一个100%宽度的背景色，然后个高亮的色表示完成进度。其实制作这样的进度条非常容易，一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，他的子元素设置一个宽度，比如完成度是30%（也就是父容器的宽度比例值），同时给其设置一个高亮的背景色。
1）、使用方法：
Bootstrap框架中也是按这样的方式实现的，他提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。使用方法非常的简单：
运行效果如下：
2）、实现原理：
前面也说了，这样的基本进度条主要分成两部分：
progress样式主要设置进度条容器的背景色，容器高度、间距等：
/bootstrap.css文件第4516行～第4524行/
而progress-bar样式在设置进度方向，重要的是设置了进度条的背景颜色和过渡效果：
/bootstrap.css文件第4525行～第4538行/
3）、结构优化：
虽然这样实现了基本进度条效果，但对于残障人员浏览网页有点困难，所以我们可以将结构做得更好些（语义化更友好些）：
1>、role属性作用：告诉搜索引擎这个div的作用是进度条。
2>、aria-valuenow="40"属性作用：当前进度条的进度为40%。
3>、aria-valuemin="0"属性作用：进度条的最小值为0%。
4>、aria-valuemax="100"属性作用：进度条的最大值为100%。
Bootstrap框架中的进度条和警告信息框一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条，其主要包括以下四种：
ώ5; progress-bar-info：表示信息进度条，进度条颜色为蓝色
ώ5; progress-bar-success：表示成功进度条，进度条颜色为绿色
ώ5; progress-bar-warning：表示警告进度条，进度条颜色为黄色
ώ5; progress-bar-danger：表示错误进度条，进度条颜色为红色
1）、使用方法：
具体使用就非常简单了，只需要在基础的进度上增加对应的类名。如：
运行效果如下：
2）、实现原理：
彩色进度条与基本进度条相比，就是进度条颜色做了一定的变化，其对应的样式代码如下：
/bootstrap.css文件第4548行～第4550行/
在Bootstrap框架中除了提供了彩色进度条之外，还提供了一种条纹进度条，这种条纹进度条采用CSS3的线性渐变来实现，并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-Striped”，当然，如果你要让你的进度条条纹像彩色进度一样，具有彩色效果，你只需要在进度条上增加相应的颜色类名，如前面的彩色进度条所讲。
一起来看一下制作条纹进度条的结构：
运行效果如下：
1）、原现实现：
正如前面所说，实现条纹进度条，主要使用的是CSS3的线性渐变，其具体代码如下：
/bootstrap.css文件第4539行～第4547行/
同样的，条纹进度条对应的每种状态也有不同的颜色，使用方法与彩色进度条一样。只是样式上做了一定的调整：
/bootstrap.css文件第4551行～第4554行/
/bootstrap.css文件第4558行～第4561行/
/bootstrap.css文件第4565行～第4568行/
5、进度条–动态条纹进度条
使用方法：
在进度条“progress progress-Striped”两个类的基础上再加入“active”类名。如下代码：
1）、实现原理：
为了让条纹进度条动起来，Bootstrap框架还提供了一种动态条纹进度条。其实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-Stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是BACkground-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而Linear-gradient实现的正是对应背景中的背景图片。
/bootstrap.css文件第4500行～第4515行/
了解CSS3的同学都知道，@keyframes仅仅是创建了一个动画效果，如果要让进度条真正的动起来，我们需要通过一定的方式调用@keyframes创建的动画“progress-bar-Stripes”，并且通过一个事件触发动画生效。在Bootstrap框架中，通过给进度条容器“progress”添加一个类名“active”，并让文档加载完成就触“progress-bar-Stripes”动画生效。
调用动画对应的样式代码如下：
/bootstrap.css文件第4544行～第4547行/
运行效果如下：
Striped”和“active”同时运用，不然条纹进度条是不具备动效效果。
Bootstrap框架除了提供上述几种进度条之外，还提供了一种层叠进度条，层叠进度条，可以将不同状态的进度条放置在一起，按水平方式排列。具体使用如下：
运行效果如下：
不难发现，在“progress-bar”上有一个左浮动的样式。也就是这个样式，在不增加任何样式代码就能实现上例的层叠效果。当然有一点需要注意，层叠进度条宽度之和不能大于100%，大于100%就会造成下面的不良效果：
例：
运行效果如下：
上面介绍的各种进度条，都仅仅是通过颜色进度向用户传递进度值。但实际中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，在Bootstrap就为大家考虑了这种使用场景。
1）、实现方法：
只需要在进度条中添加你需要的值，如：
运行效果如下：
还有一种特殊情形，当进度条处于开始位置，也就是进度条的值为0%时，内容是否会撑开一定的宽度，让进度条具有颜色呢？如果是，这不是我们需要的效果，如果不是，又是怎么实现的呢？我们先来看一个这样的示例：
运行效果如下：
2）、原理分析：
效果告诉我们，当进度为0%，进度条颜色并没有显示出来，那是因为Bootstrap在样式上做了一定的处理。
/bootstrap.css文件第4748行~第4759行/
注：这段代码BootstrapV3.2版本才有。在Bootstrap V3.1.1版本是不具有这段代码，同时也说明，Bootstrap在不断的完善之中。
如果大家还想深入学习，可以点击进行学习，再为大家附两个精彩的专题：
以上就是关于Bootstrap进度条的全部内容介绍，并有详细的原理分析，希望对大家的学习有所帮助。
以上是大佬教程为你收集整理的Bootstrap每天必学之进度条全部内容，希望文章能够帮你解决Bootstrap每天必学之进度条所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。