Bootstrap基本進(jìn)度條實(shí)現(xiàn)

創(chuàng)新互聯(lián)建站10多年成都企業(yè)網(wǎng)站定制服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及高端網(wǎng)站定制服務(wù),成都企業(yè)網(wǎng)站定制及推廣,對石雕等多個(gè)行業(yè)擁有豐富的網(wǎng)站制作經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。

1.外層容器使用class=progress類樣式

2.真正顯示進(jìn)度條樣式的容器使用class=progress-bar類樣式

示例:

 

 
 

 
 
10%
 
 

效果圖

彩色進(jìn)度條

顏色進(jìn)度條類樣式添加在里層容器中，和progress-bar添加在同一個(gè)容器中

1.progress-bar：默認(rèn)主題色，深藍(lán)色

2.progress-bar-success：成功進(jìn)度條，綠色

2.progress-bar-info：信息進(jìn)度條，藍(lán)色

3.progress-bar-warning：警告進(jìn)度條，黃色

4.progress-bar-danger：錯(cuò)誤進(jìn)度條，紅色

效果圖

條紋進(jìn)度條

條紋進(jìn)度條類樣式為:class="progress-striped"，添加在外層容器中，也就是和progress添加在一起
progress-striped

效果圖

自定義開發(fā)模擬加載進(jìn)度條（bootstrap+jquery）

 
0%

好了，內(nèi)容到此結(jié)束，希望對大家有所幫助！