首页 > 代码库 > Bootstrap 进度条

Bootstrap 进度条

Bootstrap 进度条

1、基础进度条

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

  1)根div必须 class="progress"

  2)前景div为 class="progress-bar", 通过style指定宽度

  技术分享

2、指定颜色.

  progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger

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

  技术分享

3、条纹状,通过在根div添加 progress-striped 即可

  

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

技术分享

4、在根div 添加active,即可实现带动画的进度条。

  

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

技术分享

参考:http://www.runoob.com/bootstrap/bootstrap-progress-bars.html

Bootstrap 进度条