1、进度条（基本样式）

1. 首先在父<div>上添加“progress”类名
2. 然后在子<div>上添加“progress-bar”类名，style表示进度条进度
   代码示例：

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

示例：

基本进度条.png

2、进度条（彩色进度条）

• .progress-bar-info：在子<div>中“progress-bar”上追加此类名，显示蓝色进度条
• .progress-bar-success：在子<div>中“progress-bar”上追加此类名，显示绿色进度条
• .progress-bar-warning：在子<div>中“progress-bar”上追加此类名，显示黄色进度条
• .progress-bar-info：在子<div>中“progress-bar”上追加此类名，显示红色进度条

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width:40%"></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:80%"></div>
</div> 
<div class="progress">
  <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

示例：

彩色进度条.png

3、进度条（条纹进度条）

• .progress-striped：在父<div>中“progress”上追加此类名，显示条纹

<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>

示例：

条纹进度条.png

4、进度条（动态条纹进度条）

• .active：在父<div>中“progress”和“progress-striped”上追加此类名，显示动态条纹

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

示例：

动态条纹.gif

5、进度条（层叠进度条）

• 在父<div>中添加几个子<div>

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width:20%"></div>
  <div class="progress-bar progress-bar-info" style="width:20%"></div>
  <div class="progress-bar progress-bar-warning" style="width:30%"></div>
  <div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>  

示例：

层叠进度条.png

6、进度条（带label的进度条）

• 直接在子<div>中添加文本

<div class="progress">
   <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>

示例：

带label的进度条.png