学习Bootstrap进度条效果
网站加载一些数据的时候，需要一个进度提示，有的是一个等待窗口，有的时候是一个进度条。进度条是为了反应一个动作的实时进度，还有一些工作流程中也能用到。今天，我们就说下Bootstrap中的进度条怎么样使用，和一些常用样式。跟着小编，Let's go!!!
默认进度条效果
在使用进度条的时候，只需要引用.progress样式就可以做到一个进度条的效果。当然一个进度条肯定有一些配置文件，比方说总共的长度，当前多少进度等。首先查看默认的进度条效果。代码简单说明:
.progress-bar 进度条样式 role"progressbar" 为了更好的能够显示样式，使用HTML5的样式，来处理一些效果，更改好的显示进度条。
aria-valuenow, aria-valuemin, aria-valuemax 这三个我理解成是为了jQuery取值和设置的时候用的。我测试过之后，就是style"width:60%"在起作用，对于显示效果来说。显示进度
有时候，在用进度条的时候，我们想显示进度条处理多少的效果，也就是显示进度。这里我们只需要把lt;span class"sr-only"gt; 这个样式去掉就可以了，这里也可以把span去掉，然后在动态的赋值的时候，需要用到jQuery。只需要往这个样式中加入text值即可。
四种不同颜色的进度条
在Bootstrap中，进度条可以有4种不同颜色的模式，官方的翻译是叫做情景模式，就是可以设置多种不同的表现效果。4种样式分别为:
- .progress-bar-success 成功的样式
- .progress-bar-info 提示的样式
- .progress-bar-warning 警告的样式
- .progress-bar-danger 错误(危险)的样式
条纹效果
一种背景颜色有点太过单调，这里Bootstrap中，增加了一种条纹的进度条，使用样式.progress-bar-striped来给进度条增加条纹效果。这里需要注意的是，条纹的只有在最新版本中才能看到效果，否则只有正常的显示效果。该效果IE8不支持。
动态的进度条
如何去动态的更改其中的值，这里使用jQuery来实现。这里使用jQuery的选择对象.css()来改变。还有使用attr对象来设置当前的最大值最小值，用来记录当前的进度。
总结
上面的那些就是使用进度条的一个引子，具体使用的过程中，可以先实现模版，然后在真正的项目开发中，如果遇到了什么问题，都可以给该经验发送信息，第一时间给你回复。
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
