上面介紹的各種進(jìn)度條，都僅僅是通過(guò)顏色進(jìn)度向用戶傳遞進(jìn)度值。但實(shí)際中，有很多時(shí)候是需要在進(jìn)度條中直接用相關(guān)的數(shù)值向用戶傳遞完成的進(jìn)度值，在Bootstrap就為大家考慮了這種使用場(chǎng)景。
實(shí)現(xiàn)方法：
只需要在進(jìn)度條中添加你需要的值，如：
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>
運(yùn)行效果如下：
還有一種特殊情形，當(dāng)進(jìn)度條處于開始位置，也就是進(jìn)度條的值為0%時(shí)，內(nèi)容是否會(huì)撐開一定的寬度，讓進(jìn)度條具有顏色呢？如果是，這不是我們需要的效果，如果不是，又是怎么實(shí)現(xiàn)的呢？我們先來(lái)看一個(gè)這樣的示例：
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
運(yùn)行效果如下：
原理分析：
效果告訴我們，當(dāng)進(jìn)度為0%，進(jìn)度條顏色并沒有顯示出來(lái)，那是因?yàn)锽ootstrap在樣式上做了一定的處理。
/*bootstrap.css文件第4748行~第4759行*/
.progress-bar[aria-valuenow="1"],
.progress-bar[aria-valuenow="2"] {
min-width: 30px;
}
.progress-bar[aria-valuenow="0"] {
min-width: 30px;
color: #777;
background-color: transparent;
background-image: none;
-webkit-box-shadow: none;
box-shadow: none;
}
注：這段代碼BootstrapV3.2版本才有。在Bootstrap V3.1.1版本是不具有這段代碼，同時(shí)也說(shuō)明，Bootstrap在不斷的完善之中。
我來(lái)試試：制作一系列加入進(jìn)度標(biāo)簽的進(jìn)度條（第三個(gè)是動(dòng)態(tài)條紋的）
效果圖：
參考代碼：
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:30%">30%</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:90%">90%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%">20%</div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%">20%</div>
<div class="progress-bar progress-bar-warning" style="width:30%">30%</div>
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%">15%</div>
</div>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)