Bootstrap进度条 - Progress Bar

怎样创建一个进度条 ? 为外部div 设置 .progress 类,作为进度槽
为内部 div 设置 .progress-bar作为进度条,进度在 style 中设置
可以在进度条内部添加文字,也可以添加辅助文本

60%
class="sr-only">60% Complete

Bootstrap进度条 - Progress Bar
文章图片

怎样创建带斜纹的进度条 ? 在进度槽上增加一个 .progress-striped 类即可
......

Bootstrap进度条 - Progress Bar
文章图片

怎样创建其他颜色的进度条 ? 在进度槽上增加 .progress-bar-* 类,
  • 可以是 success, info, warning, danger
......

Bootstrap进度条 - Progress Bar
文章图片

什么是堆叠进度条? 堆叠进度条就是一个进度条分为好几段,每段的颜色不同
......
......
......

Bootstrap进度条 - Progress Bar
文章图片

怎么给进度条添加动画效果? 【Bootstrap进度条 - Progress Bar】给条纹进度条增加 .active 样式就可以出现动画效果
......

Bootstrap进度条 - Progress Bar
文章图片

    推荐阅读