網(wǎng)站加載一些數(shù)據(jù)的時候，需要一個進度提示，有的是一個等待窗口，有的時候是一個進度條。進度條是為了反應(yīng)一個動作的實時進度，還有一些工作流程中也能用到。今天，我們就說下Bootstrap中的進度條怎么樣使

網(wǎng)站加載一些數(shù)據(jù)的時候，需要一個進度提示，有的是一個等待窗口，有的時候是一個進度條。進度條是為了反應(yīng)一個動作的實時進度，還有一些工作流程中也能用到。今天，我們就說下Bootstrap中的進度條怎么樣使用，和一些常用樣式。跟著小編，Let's go!!!

默認進度條效果

在使用進度條的時候，只需要引用.progress樣式就可以做到一個進度條的效果。當(dāng)然一個進度條肯定有一些配置文件，比方說總共的長度，當(dāng)前多少進度等。首先查看默認的進度條效果。代碼簡單說明:

.progress-bar 進度條樣式 role"progressbar" 為了更好的能夠顯示樣式，使用HTML5的樣式，來處理一些效果，更改好的顯示進度條。
aria-valuenow, aria-valuemin, aria-valuemax 這三個我理解成是為了jQuery取值和設(shè)置的時候用的。我測試過之后，就是style"width:60%"在起作用，對于顯示效果來說。

顯示進度

有時候，在用進度條的時候，我們想顯示進度條處理多少的效果，也就是顯示進度。這里我們只需要把lt;span class"sr-only"gt; 這個樣式去掉就可以了，這里也可以把span去掉，然后在動態(tài)的賦值的時候，需要用到j(luò)Query。只需要往這個樣式中加入text值即可。

四種不同顏色的進度條

在Bootstrap中，進度條可以有4種不同顏色的模式，官方的翻譯是叫做情景模式，就是可以設(shè)置多種不同的表現(xiàn)效果。4種樣式分別為:

1. .progress-bar-success 成功的樣式
2. .progress-bar-info 提示的樣式
3. .progress-bar-warning 警告的樣式
4. .progress-bar-danger 錯誤(危險)的樣式

條紋效果

一種背景顏色有點太過單調(diào)，這里Bootstrap中，增加了一種條紋的進度條，使用樣式.progress-bar-striped來給進度條增加條紋效果。這里需要注意的是，條紋的只有在最新版本中才能看到效果，否則只有正常的顯示效果。該效果IE8不支持。

動態(tài)的進度條

如何去動態(tài)的更改其中的值，這里使用jQuery來實現(xiàn)。這里使用jQuery的選擇對象.css()來改變。還有使用attr對象來設(shè)置當(dāng)前的最大值最小值，用來記錄當(dāng)前的進度。

總結(jié)

上面的那些就是使用進度條的一個引子，具體使用的過程中，可以先實現(xiàn)模版，然后在真正的項目開發(fā)中，如果遇到了什么問題，都可以給該經(jīng)驗發(fā)送信息，第一時間給你回復(fù)。