Bootstrap进度条的颜色问题

时间:2014-05-20 09:16:59

标签: twitter-bootstrap twitter-bootstrap-2

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

enter image description here

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

1 个答案:

答案 0 :(得分:3)

如果您想要使用不同的进度条颜色,请使用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>