BootStrap笔记19

进度条

progress

1.基本进度条

.progress-bar

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

2.带有提示的进度条

提示直接写在.progress-bar里

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

3.不同颜色的进度条

.progress-bar-success——绿色
.progress-bar-info——蓝色
.progress-bar-warning——黄色
.progress-bar-danger——红色

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

4.条纹

.progress-bar-striped

静态的

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

5.发廊

.active

条纹具有从右向左的运动感——动态的

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

6.堆叠

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

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
 
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
 
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
 
  </div>
</div>