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