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

1、在使用进度条的时候, 只需要引用.progress样式就可以做到一个进度条的效果, 当然一个进度条肯定有一些配置文件, 比方说, 总共的长度, 当前多少进度等.首囗寝嗵若先查看默认的进度条效果. 代码简单说明:.progress-bar 进度条样式role="progressbar" 为了更好的能够显示样式, 使用html5的样式, 来处理一些效果, 更改好的显示进度条.aria-valuenow, aria-valuemin, aria-valuemax 这三个我理解成是为了jquery取值和设置的时候用的. 我测试过之后, 就是style="width:60%"在起作用, 对于显示效果来说.

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 不支持

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