Bootstrap框架中的進(jìn)度條和警告信息框一樣，為了能給用戶一個(gè)更好的體驗(yàn)，也根據(jù)不同的狀態(tài)配置了不同的進(jìn)度條顏色。在此稱為彩色進(jìn)度條，其主要包括以下四種：

  ? progress-bar-info：表示信息進(jìn)度條，進(jìn)度條顏色為藍(lán)色

  ? progress-bar-success：表示成功進(jìn)度條，進(jìn)度條顏色為綠色

  ? progress-bar-warning：表示警告進(jìn)度條，進(jìn)度條顏色為黃色

  ? progress-bar-danger：表示錯(cuò)誤進(jìn)度條，進(jìn)度條顏色為紅色

使用方法：

具體使用就非常簡(jiǎn)單了，只需要在基礎(chǔ)的進(jìn)度上增加對(duì)應(yīng)的類名。如：

<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>

運(yùn)行效果如下：

實(shí)現(xiàn)原理：

彩色進(jìn)度條與基本進(jìn)度條相比，就是進(jìn)度條顏色做了一定的變化，其對(duì)應(yīng)的樣式代碼如下：

/*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;
}