Bootstrap框架除了提供上述幾種進度條之外，還提供了一種層疊進度條，層疊進度條，可以將不同狀態的進度條放置在一起，按水平方式排列。具體使用如下：
<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>
運行效果如下：
或許你會感到疑問，沒有為層疊進度條添加額外的樣式代碼，怎么就正常了呢？可以回過頭來看基本進度條那部分，不難發現，在“progress-bar”上有一個左浮動的樣式。也就是這個樣式，在不增加任何樣式代碼就能實現上例的層疊效果。當然有一點需要注意，層疊進度條寬度之和不能大于100%，大于100%就會造成下面的不良效果（見右側代碼編輯器）：
除了層疊彩色進度條之外，還可以層疊條紋進度條，或者說條紋進度條和彩色進度條混合層疊，僅需要在“progress”容器中添加對應的進度條，同樣要注意，層疊的進度條之和不能大于100%。來簡單的看一個示例：
<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>
運行效果如下：
本小節沒有任務，單擊“提交”按鈕進行下一個小節學習。
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報