怎么学习Bootstrap：[9]bootstrap进度条效果

1、在使用进度条的时候, 只需要引用.progress样式就可以做到一个进度条的效果,  当然一个进度条肯定有一些配置文件, 比方说, 总共的长度, 当前多少进度等. 

首先查看默认的进度条效果. 代码简单说明:

.progress-bar  进度条样式

role="progressbar"   为了更好的能够显示样式, 使用html5的样式, 来处理一些效果, 更改好的显示进度条.

aria-valuenow, aria-valuemin, aria-valuemax 这三个我理解成是为了jquery取值和设置的时候用的. 我测试过之后, 就是style="width:60%"在起作用, 对于显示效果来说.

2、有时候, 我们在用进度条的时候, 我们想显示进度条处理多少的效果, 也就是显示进度. 这里我们只需要把<span class="sr-only"> 这个样式去掉就可以了, 这里也可以把span去掉, 然后在动态的赋值的时候, 需要用到jquery. 只需要往这个样式中加入text值即可. 

3、在bootstrap中进度条可以有4种不同颜色的模式, 来显示进度条, 官方的翻译是叫做情景模式, 就是可以设置多种不同的表现效果.代码和效果如图. 

4种样式分别为: 

1.progress-bar-success  成功的样式, 

2.progress-bar-info       提示的样式

3.progress-bar-warning 警告的样式

4.progress-bar-danger  错误(危险)的样式

4、一种背景颜色有点太过单调, 这里bootstrap中, 增加了一种条纹的进度条, 使用样式.progress-bar-striped来给进度条增加条纹效果. 

这里需要注意的是, 条纹的只有在最新版本中才能看到效果, 否则只有正常的显示效果. 该效果IE8 不支持

5、动态的进度条. 这里使用.active来实现, 然后会让上面条纹进度条出现转动效果. 为了能够看到转动的效果, 这里我截取了两张图, 最好自己能够试一下.

需要注意的是: 这个效果在IE9 及更低版本的浏览器不支持. 

6、如何去动态的更改其中的值, 这里使用Jquery来实现. 这里使用jquery的选择对象.css("","");来改变. 还有使用attr对象来设置当前的最大值最小值, 用来记录当前的进度.

7、上面的那些就是使用进度条的一个引子, 具体使用的过程中, 可以先实现模版, 然后在真正的项目开发中, 如果遇到了什么问题, 都可以给该经验发送信息, 第一时间给你回复.