Bootstrap框架除了提供上述幾種進(jìn)度條之外，還提供了一種層疊進(jìn)度條，層疊進(jìn)度條，可以將不同狀態(tài)的進(jìn)度條放置在一起，按水平方式排列。具體使用如下：
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:10%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
運(yùn)行效果如下：
或許你會(huì)感到疑問，沒有為層疊進(jìn)度條添加額外的樣式代碼，怎么就正常了呢？可以回過頭來看基本進(jìn)度條那部分，不難發(fā)現(xiàn)，在“progress-bar”上有一個(gè)左浮動(dòng)的樣式。也就是這個(gè)樣式，在不增加任何樣式代碼就能實(shí)現(xiàn)上例的層疊效果。當(dāng)然有一點(diǎn)需要注意，層疊進(jìn)度條寬度之和不能大于100%，大于100%就會(huì)造成下面的不良效果（見右側(cè)代碼編輯器）：
除了層疊彩色進(jìn)度條之外，還可以層疊條紋進(jìn)度條，或者說條紋進(jìn)度條和彩色進(jìn)度條混合層疊，僅需要在“progress”容器中添加對(duì)應(yīng)的進(jìn)度條，同樣要注意，層疊的進(jìn)度條之和不能大于100%。來簡(jiǎn)單的看一個(gè)示例：
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>
運(yùn)行效果如下：
本小節(jié)沒有任務(wù)，單擊“提交”按鈕進(jìn)行下一個(gè)小節(jié)學(xué)習(xí)。
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)