进度条用于提示用户任务的完成过程,Bootstrap 提供了 .progress 和 .progress-bar css 类来创建进度条
Bootstrap 提供了 .progress 和 .progress-bar CSS 类用于创建进度条
同时可以在 .progress-bar 元素上设置 width 属性用于进度条的完成度
<div class="progress">
<div class="progress-bar" style="width:80%"></div>
</div>
Bootstrap 4 默认的进度条高度为 16px
但我们可以在 .progress 元素上设置 height 属性来修改默认的高度
<div class="progress" style="height:44px">
<div class="progress-bar" style="width:10%"></div>
</div>
可以在 .progress-bar 元素上添加文本,比如进度的百分比
<div class="progress">
<div class="progress-bar" style="width:90%">9%</div>
</div>
进度条的默认颜色为蓝色,不过我们可以使用 .bg-* 来改变
<div class="progress">
<div class="progress-bar bg-success" style="width:40%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" style="width:50%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width:60%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width:70%"></div>
</div>
除了可以使用 .bg-* 来设置进度条的颜色外,还可以使用 .progress-bar-striped类来设置条纹进度条
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>
.progress-bar-animated CSS 类可以为进度条添加动画效果
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div>
可以通过叠加 .progress-bar 的方式给一个进度条设置多种颜色
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">第一段</div>
<div class="progress-bar bg-warning" style="width:10%">第二段</div>
<div class="progress-bar bg-danger" style="width:20%">第三段</div>
</div>
本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!