Bootstrap进度条的颜色

进度条的颜色

除了默认的蓝色进度条之外，Bootstrap还为进度条提供了一组情景样式类，包括 .progress-bar-success、.progress-bar-info、.progress-bar-warning、.progress-bar-danger，它们分别用来创建绿色、蓝色、橙色或红色进度条。这些情景类用于根据不同的上下文，展现相应的效果。如：

<div class="progress">  <div class="progress-bar progress-bar-success" style="width: 40%">40%</div></div><div class="progress">  <div class="progress-bar progress-bar-info" style="width: 20%">20%</div></div><div class="progress">  <div class="progress-bar progress-bar-warning" style="width: 60%">60%</div></div><div class="progress">  <div class="progress-bar progress-bar-danger" style="width: 80%">80%</div></div>

效果如图 3‑78所示：

图3-78 进度条的颜色

关于作者

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