上面介紹的各種進度條，都僅僅是通過顏色進度向用戶傳遞進度值。但實際中，有很多時候是需要在進度條中直接用相關的數值向用戶傳遞完成的進度值，在Bootstrap就為大家考慮了這種使用場景。
實現方法：
只需要在進度條中添加你需要的值，如：
<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>
運行效果如下：
還有一種特殊情形，當進度條處于開始位置，也就是進度條的值為0%時，內容是否會撐開一定的寬度，讓進度條具有顏色呢？如果是，這不是我們需要的效果，如果不是，又是怎么實現的呢？我們先來看一個這樣的示例：
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
運行效果如下：
原理分析：
效果告訴我們，當進度為0%，進度條顏色并沒有顯示出來，那是因為Bootstrap在樣式上做了一定的處理。
/*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版本是不具有這段代碼，同時也說明，Bootstrap在不斷的完善之中。
我來試試：制作一系列加入進度標簽的進度條（第三個是動態條紋的）
效果圖：
參考代碼：
<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>
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報