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