Bootstrap3实用教程
3.16.5 进度条堆叠
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Glyphicons字体图标

下拉菜单

按钮组

按钮下拉菜单

输入框组

导航

导航条

面包屑导航

分页导航

标签

徽章

巨幕

页头

缩略图

警告框

进度条

条纹进度条

进度条的颜色

带提示的进度条

创建进度条

进度条堆叠

Bootstrap3中,只需将多个进度条放到同一个 .progress 的容器中,即可以让多个进度条堆叠在一起,使它们呈现堆叠的效果。如:

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 30%"></div>
  <div class="progress-bar progress-bar-warning" style="width: 20%">20%</div>
  <div class="progress-bar progress-bar-striped active" style="width: 15%"></div>
</div>

效果如图 3‑81所示:

进度条堆叠
图3-81 进度条堆叠

需要注意的是,堆叠在一起的所有进度条的进度百分比之和,不能超过100%。否则,超出部分的整个进度条将被移除,不被显示出来。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验