Bootstrap 进度条的颜色问题答案

【问题标题】：Color issue for Bootstrap progress barBootstrap 进度条的颜色问题
【发布时间】：2014-05-20 09:16:58
【问题描述】：

我正在使用 Bootstrap CSS (Bootstrap v2.3.1)。我正在尝试在页面上显示多个进度条。为此，我编写了如下代码-

<tbody>
  <tr id="10">
    <td>
      <div class="progress progress-striped active span2" id="11">
        <span style="color: rgb(68, 68, 68);">50%</span>
        <div class="bar" style="width: 50%;" id="111"></div>
      </div>                    
    </td>
  </tr>         
  <tr>
    <td id="20">
      <div class="progress progress-striped active span2" id="12">
        <span style="color: rgb(68, 68, 68);">100%</span>
        <div class="bar" style="width: 100%;" id="112"></div>
      </div>
    </td>
  </tr>
</tbody>

我给这些进度条分别设置了 50 和 100 的宽度值，之后它们显示相同的颜色。

第一个进度条的颜色反映在第二个进度条中。我这边有什么错误吗？

【问题讨论】：

两个进度条使用相同的代码，为什么要使用不同的颜色？
实际上我想使用循环和不同的值动态显示多个进度条。根据值颜色会有所不同
你必须自己做这个，bootstrap不会自动改变进度条的颜色。只需添加与循环中的值对应的类即可。

标签： twitter-bootstrap twitter-bootstrap-2

【解决方案1】：

如果您想要不同的进度条颜色，请使用progress-info, progress-success, progress-warning, progress-danger 中的类，如documentation 中所述：

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

【讨论】：