我使用的是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宽度值,之后它们显示了相同的颜色。
第一个进度条的颜色会反映在第二个进度条中。我这边有什么不对吗?
答案 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>