默认的进度条
创建一个基本的进度条的步骤如下:
1.添加一个带有 class .progress 的 。
2.接着,在上面的内,添加一个带有 class .progress-bar 的空的 。
【BootStrap-CSS样式_布局组件_进度条】3.添加一个带有百分比表示的宽度的 style 属性,例如 style="60%";
表示进度条在 60% 的位置。
状态的进度条:
1.在上面的内,添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 。
2.其中,* 可以是 success、info、warning、danger。
条纹的进度条
.progress-striped样式:添加一个带有 class .progress 的,同时添加class.progress-striped
动画的进度条
.active样式:添加一个带有 class .progress 和 .progress-striped 的 ,同时添加 class .active
堆叠的进度条
把多个进度条放在相同的 .progress 中即可实现堆叠
代码实例:
进度条 - 锐客网
默认进度条10%状态进度条10%40%60%80%条纹状态进度条10%40%60%80%动态进度条10%40%60%80%堆叠进度条10%40%30%
显示效果:
文章图片
推荐阅读
- Bootstrap 5都有什么新功能
- bootstrap 组件之 进度条 滚动监控 旋转加载 消息推送框 组件学习总结
- 前端|bootstrap基础知识(五)--进度条
- buttons.css——可以与bootstrap融合的按钮样式库
- bootstrap图片样式
- bootstrap|Bootstrap打造特色进度条
- (转) bootstrap 加载进度条
- Bootstrap|Bootstrap 条纹进度条
- bootstrap-3-基本标签使用类
- Bootstrap|Bootstrap 基本进度条