Bootstrap中进度条样式详解

最简单的进度条需要几行代码？
在bootstrap中，只需要两句。

<div class="progress">
    <div class="progress-bar" style="width: 60%;"></div>
</div>

不考虑代码规范的话，，，

<div class="progress"><div class="progress-bar" style="width: 60%;"></div></div>

实现效果如图所示：

下面讲解进度条的语法和样式

1. 默认进度条，就像上图，没有任何修饰的进度条。进度条宽度是父元素的宽度。
   先创建一个外层div，添加class属性progress，progress作用就是申明进度条的基本样式。
   然后创建一个内部div，添加class属性progress-bar，这个属性作用是关联上边的progress基本进度条样式。
   并添加属性width=60%，用于声明当前进度条位置是在60%。

2. 常用的进度条颜色。默认的进度条颜色是蓝色，在bootstrap中，还有success、info、warning、danger表达不同意义的颜色样式。使用方法是在内部div的class属性中添加 progress-bar-success/info/warning/danger，注意，是添加，前边的progress-bar仍然需要保留。

    <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: 60%;"></div>
    </div>
    <div class="progress">
            <div class="progress-bar progress-bar-info" style="width: 60%;"></div>
    </div>
    <div class="progress">
            <div class="progress-bar progress-bar-warning" style="width: 60%;"></div>
    </div>
    <div class="progress">
            <div class="progress-bar progress-bar-danger" style="width: 60%;"></div>
    </div>

3. 添加条纹。在外层div的class属性添加progress-striped，可以添加条纹。添加active，可以添加最基础的动画效果。

    <div class="progress progress-striped active">
        <div class="progress-bar" style="width: 80%;"></div>
    </div>

进度条样式修改
对于进度条外框修改，可以在外层div中添加css样式来改变，对于进度条内部的修改，则是通过对内部div添加css样式来修改。

    <div class="col-md-6">
        <div class="progress progress-striped" style=" width: 100px; height: 100px;background-color:#d1e2f3;border: 5px groove red;">
            <div class="progress-bar" style="width: 40%; border:2px solid white;"></div>
            <div class="progress-bar-success" style="width: 40%"></div>         
        </div>
    </div>

还可以通过多个内层div放入一个外层div的方式，形成进度条堆叠效果。（类似手机内存空间的条形示意图，不同颜色代表不同类型文件）

    <div class="col-md-6">
        <div class="progress progress-striped active" style="height: 10px;">
            <div class="progress-bar progress-bar-info" style="width: 20%"></div>
            <div class="progress-bar progress-bar-warning" style="width: 40%"></div>
            <div class="progress-bar progress-bar-danger" style="width: 10%"></div>    
        </div>
    </div>

本人的坚果Pro2手机的手机内存空间进度条：

制作类似进度条：

    <div class="progress" style="width: 400px;height:30px;background-color: #dfdfdf;">
        <div class="progress-bar" style="width: 1%;background-color: #a0cf3f"></div>
        <div class="progress-bar" style="width: 10%;background-color: #fabf3a"></div>
        <div class="progress-bar" style="width: 1%;background-color: #e76360"></div>
        <div class="progress-bar" style="width: 1%;background-color: #bb5fef"></div>
        <div class="progress-bar" style="width: 70%;background-color: #c2c2c2"></div> 
    </div>

效果图：（渐变效果可以以后加入）