BootStrap 进度条

最新推荐文章于 2024-04-17 11:28:05 发布

xunbaogang

最新推荐文章于 2024-04-17 11:28:05 发布

阅读量377

点赞数

分类专栏： # BootStrap

本文链接：https://blog.csdn.net/xunbaogang/article/details/51984776

版权

BootStrap 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

基本进度条
<div class="progress">
           <div class="progress-bar" style="width:60%;">60%</div>
</div>

最低值进度条
<div class="progress">
   <div class="progress-bar" style="min-width: 10px; width:0%;">0%</div>
</div>

结合情景的进度条
<div class="progress">
   <div class="progress-bar progress-bar-success" style="min-width: 10px; width:0%;">0%</div>
</div>

条纹状 IE10以上，火狐，google 都支持
<div class="progress">
   <div class="progress-bar progress-bar-success progress-bar-striped" style="min-width: 10px; width:60%;">60%</div>
</div>

动画的效果，只有条纹状的
<div class="progress">
   <div class="progress-bar progress-bar-success progress-bar-striped active" style="min-width: 10px; width:60%;">60%</div>
</div>

堆叠效果
<div class="progress">
   <div class="progress-bar progress-bar-danger progress-bar-striped active" style="min-width: 10px; width:20%;">20%</div>
   <div class="progress-bar progress-bar-warning progress-bar-striped active" style="min-width: 10px; width:40%;">40%</div>
   <div class="progress-bar progress-bar-success progress-bar-striped active" style="min-width: 10px; width:40%;">40%</div>
</div>