BootStrap-CSS样式_布局组件_进度条

默认的进度条
创建一个基本的进度条的步骤如下:
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-CSS样式_布局组件_进度条
文章图片

    推荐阅读