Bootstrap进度条

Bootstrap进度条使用css3过渡和动画来获得效果。
1.创建一个进度条的步骤

添加一个带有.progress的<div>
在上面的<div>内，添加一个带有class.progress-bar的空的<div>
添加一个带有百分比表示的宽度style属性，例如style="60%",表示进度条在60%的位置

2.基本的进度条

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

3.交替的进度条

添加class progress-bar-*的<div>,*可以是success,info,warning,danger

效果图：

<div class="progress">
   <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"  
      style="width: 90%;">
      <span class="sr-only">90% 完成（成功）</span>
   </div>
</div>

4.条纹进度条
添加类.progress-striped

<div class="progress progress-striped">
   <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"  
      style="width: 60%;">
      <span class="sr-only">90% 完成（成功）</span>
   </div>
</div>

5.动画进度条
添加类class.active
进度条像是在转动

<div class="progress progress-striped active">
   <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"  
      style="width: 60%;">
      <span class="sr-only">90% 完成（成功）</span>
   </div>
</div>

6.堆叠进度条
把多个进度条放在相同的,progress中可以实现堆叠

<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"  
      style="width: 40%;"> </div>
  <div class="progress-bar progress-bar-info" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"  
      style="width: 10%;"> </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"  
      style="width: 20%;"> </div>
</div>