在一些网站建设项目中，我们偶尔会使用到一个功能，那就是进度条，进度条样式做起来也是相当麻烦的事情，不过好在Bootstrap已经自带了进度条样式，你只需要简单调用即可，让我们赶紧来看看怎么使用Bootstrap进度条吧。
Bootstrap进度条默认样式
当你需要定义一个进度条的时候，我们需要分两个结构进行，第一个是父容器，第二个是进度条，所以类似编码如下：<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> </div> </div>外层的div作为整个进度条的容器，引入样式progress，内部的div作为进度条整体结构，引入样式progress-bar，从而显示当前进度。
Bootstrap进度条其他样式
与按钮元素等样式相同，Bootstrap进度条同样提供了其他颜色的样式进行调用，对应颜色也分别有绿色、蓝色、橙色以及红色。
例如我们需要调用绿色的进度条样式，那么编码如下：<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> </div> </div>我们需要将对应的颜色样式引入到容器内的div中，且需要与progress-bar同时引用，这几个颜色的样式分别为：
Progress-bar-success、Progress-bar-info、progress-bar-warning以及progress-bar-danger。
Bootstrap进度条条纹样式
是不是看腻了纯色调的进度条？那么你同样可以采用条纹样式的进度条，使用方式更是简单异常，只需要在父容器中加入progress-striped样式即可，例如：<div class="progress progress-striped"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> </div> </div>以上代码就是定义了绿色条纹进度条。
Bootstrap进度条动态效果
如果你想要让自己的进度条看起来更为酷炫，那么可以通过在父容器中引入一个active样式从而让它动起来，不过遗憾的是这个动态效果无法在IE浏览器下显示。
写在文章最后
虽然Bootstrap自带的进度条样式很不错，而且使用起来很方便，但让人沮丧的是，由于这些进度条采用的是CSS3属性，所以在IE9以下浏览器无法实现。
当然，如果你的目标群体基本采用高级浏览器（类似Chrome），那么你就可以义无反顾地采用这个样式啦。