首页 > 其他 > 详细

Bootstrap 进度条

时间:2017-06-01 16:04:48      阅读:210      评论:0      收藏:0      [点我收藏+]

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!