Bootstrap进度条的颜色问题

Question

我使用的是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宽度值，之后它们显示了相同的颜色。

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

Answer 1

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

<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>