學習Bootstrap進度條效果
網站加載一些數據的時候，需要一個進度提示，有的是一個等待窗口，有的時候是一個進度條。進度條是為了反應一個動作的實時進度，還有一些工作流程中也能用到。今天，我們就說下Bootstrap中的進度條怎么樣使
網站加載一些數據的時候，需要一個進度提示，有的是一個等待窗口，有的時候是一個進度條。進度條是為了反應一個動作的實時進度，還有一些工作流程中也能用到。今天，我們就說下Bootstrap中的進度條怎么樣使用，和一些常用樣式。跟著小編，Let's go!!!
默認進度條效果
在使用進度條的時候，只需要引用.progress樣式就可以做到一個進度條的效果。當然一個進度條肯定有一些配置文件，比方說總共的長度，當前多少進度等。首先查看默認的進度條效果。代碼簡單說明:
.progress-bar 進度條樣式 role"progressbar" 為了更好的能夠顯示樣式，使用HTML5的樣式，來處理一些效果，更改好的顯示進度條。
aria-valuenow, aria-valuemin, aria-valuemax 這三個我理解成是為了jQuery取值和設置的時候用的。我測試過之后，就是style"width:60%"在起作用，對于顯示效果來說。顯示進度
有時候，在用進度條的時候，我們想顯示進度條處理多少的效果，也就是顯示進度。這里我們只需要把lt;span class"sr-only"gt; 這個樣式去掉就可以了，這里也可以把span去掉，然后在動態的賦值的時候，需要用到jQuery。只需要往這個樣式中加入text值即可。
四種不同顏色的進度條
在Bootstrap中，進度條可以有4種不同顏色的模式，官方的翻譯是叫做情景模式，就是可以設置多種不同的表現效果。4種樣式分別為:
- .progress-bar-success 成功的樣式
- .progress-bar-info 提示的樣式
- .progress-bar-warning 警告的樣式
- .progress-bar-danger 錯誤(危險)的樣式
條紋效果
一種背景顏色有點太過單調，這里Bootstrap中，增加了一種條紋的進度條，使用樣式.progress-bar-striped來給進度條增加條紋效果。這里需要注意的是，條紋的只有在最新版本中才能看到效果，否則只有正常的顯示效果。該效果IE8不支持。
動態的進度條
如何去動態的更改其中的值，這里使用jQuery來實現。這里使用jQuery的選擇對象.css()來改變。還有使用attr對象來設置當前的最大值最小值，用來記錄當前的進度。
總結
上面的那些就是使用進度條的一個引子，具體使用的過程中，可以先實現模版，然后在真正的項目開發中，如果遇到了什么問題，都可以給該經驗發送信息，第一時間給你回復。