码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap 进度条

时间:2017-06-01 16:53:14      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:res   bar   pre   warning   strip   技术   image   info   http   

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 进度条

标签:res   bar   pre   warning   strip   技术   image   info   http   

原文地址:http://www.cnblogs.com/tekkaman/p/6929114.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!