Bootstrap框架中的進度條和警告信息框一樣，為了能給用戶一個更好的體驗，也根據不同的狀態配置了不同的進度條顏色。在此稱為彩色進度條，其主要包括以下四種：
? progress-bar-info：表示信息進度條，進度條顏色為藍色
? progress-bar-success：表示成功進度條，進度條顏色為綠色
? progress-bar-warning：表示警告進度條，進度條顏色為黃色
? progress-bar-danger：表示錯誤進度條，進度條顏色為紅色
使用方法：
具體使用就非常簡單了，只需要在基礎的進度上增加對應的類名。如：
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>
運行效果如下：
實現原理：
彩色進度條與基本進度條相比，就是進度條顏色做了一定的變化，其對應的樣式代碼如下：
/*bootstrap.css文件第4548行～第4550行*/
.progress-bar-success {
background-color: #5cb85c;
}
/*bootstrap.css文件第4555行～第4557行*/
.progress-bar-info {
background-color: #5bc0de;
}
/*bootstrap.css文件第4562行～第4564行*/
.progress-bar-warning {
background-color: #f0ad4e;
}
/*bootstrap.css文件第4569行～第4571行*/
.progress-bar-danger {
background-color: #d9534f;
}
我來試試：在右側代碼任務部分補充代碼，以實現“信息”、“警告”、“錯誤”、“成功”進度條效果。
效果圖如下：
參考代碼如下：
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:70%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:40%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:30%"></div>
</div>
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報