bootstrap多種樣式進(jìn)度條展示
為大家分享了多種多樣的bootstrap進(jìn)度條樣式,供大家參考,具體內(nèi)容如下
1、默認(rèn)的進(jìn)度條
添加一個(gè)帶有class .progress 的div,在其內(nèi)添加一個(gè)帶有 class .progress-bar 的空div,為空div添加一個(gè)以百分比表示的style屬性,如 style="60%"表示進(jìn)度條在60%的位置。
2、不同樣式的進(jìn)度條
添加一個(gè)帶有class .progress 的div,在其內(nèi)添加一個(gè)帶有class .progress-bar 和class .progress-bar-*(*可以是success、info、warning、danger) 的空div,為空div添加一個(gè)以百分比表示的style屬性,如 style="60%"表示進(jìn)度條在60%的位置。
3、條紋的進(jìn)度條
添加一個(gè)帶有class .progress 和class .progress-striped以及class .active的div,在其內(nèi)添加一個(gè)帶有class .progress-bar 的空div,為空div添加一個(gè)以百分比表示的style屬性,如 style="60%"表示進(jìn)度條在60%的位置。
4、動(dòng)畫的進(jìn)度條
添加一個(gè)帶有class .progress 和class .progress-striped的div,在其內(nèi)添加一個(gè)帶有 class .progress-bar 的空div,為空div添加一個(gè)以百分比表示的style屬性,如 style="60%"表示進(jìn)度條在60%的位置。
5、堆疊的進(jìn)度條
把多個(gè)進(jìn)度條放在相同的 .progress 中即可實(shí)現(xiàn)堆疊。
<div id="out"> 默認(rèn)的進(jìn)度條: <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> </div> 不同樣式的進(jìn)度條: <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div> </div> 條紋的進(jìn)度條: <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div> </div> 動(dòng)畫的進(jìn)度條: <div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div> </div> 堆疊的進(jìn)度條: <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"></div> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;"></div> </div> </div>
效果圖:
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Bootstrap每天必學(xué)之進(jìn)度條
- BootStrap Progressbar 實(shí)現(xiàn)大文件上傳的進(jìn)度條的實(shí)例代碼
- bootstrap實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果
- BootStrap 實(shí)現(xiàn)各種樣式的進(jìn)度條效果
- BootStrap初學(xué)者對(duì)彈出框和進(jìn)度條的使用感覺(jué)
- Spring Boot+AngularJS+BootStrap實(shí)現(xiàn)進(jìn)度條示例代碼
- BootStrap組件之進(jìn)度條的基本用法
- Bootstrap實(shí)現(xiàn)各種進(jìn)度條樣式詳解
- Bootstrap進(jìn)度條實(shí)現(xiàn)代碼解析
- jquery 簡(jiǎn)單的進(jìn)度條實(shí)現(xiàn)代碼
- 分享8款優(yōu)秀的 jQuery 加載動(dòng)畫和進(jìn)度條插件
- bootstrap+jQuery實(shí)現(xiàn)的動(dòng)態(tài)進(jìn)度條功能示例
相關(guān)文章
BootStrap 動(dòng)態(tài)添加驗(yàn)證項(xiàng)和取消驗(yàn)證項(xiàng)的實(shí)現(xiàn)方法
這篇文章主要介紹了BootStrap 動(dòng)態(tài)添加驗(yàn)證項(xiàng)和取消驗(yàn)證項(xiàng)的實(shí)現(xiàn)方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09JavaScript對(duì)數(shù)字的判斷與處理實(shí)例分析
這篇文章主要介紹了JavaScript對(duì)數(shù)字的判斷與處理方法,實(shí)例分析了javascript判斷數(shù)字的常見(jiàn)方法與針對(duì)數(shù)字處理的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02你應(yīng)該了解的JavaScript Array.map()五種用途小結(jié)
大家都知道m(xù)ap() 方法返回一個(gè)新數(shù)組,數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。下面這篇文章主要給大家介紹了關(guān)于JavaScript Array.map()的五種用途,需要的朋友可以參考下2018-11-11eval(function(p,a,c,k,e,d)系列解密javascript程序
在網(wǎng)上下載源代碼時(shí),很可能發(fā)現(xiàn)代碼里的JS腳本看不懂,這是由于JS加密造成的。如果你發(fā)現(xiàn)JS是以eval(function(p,a,c,k,e,r){e=function(c)開(kāi)頭的,看到這個(gè)頁(yè)面你就可以解決他2007-04-04Uniapp實(shí)現(xiàn)地圖獲取定位功能(推薦)
本文詳細(xì)介紹了如何在Uniapp項(xiàng)目中集成地圖功能,實(shí)現(xiàn)定位獲取,并解決微信小程序、APP、H5三端的兼容性問(wèn)題,涵蓋了環(huán)境準(zhǔn)備、配置地圖基礎(chǔ)功能、獲取用戶定位、多平臺(tái)適配要點(diǎn)以及常見(jiàn)問(wèn)題及解決方案,感興趣的朋友一起看看吧2025-03-03HTML+CSS+JS實(shí)現(xiàn)的簡(jiǎn)單應(yīng)用小案例分享
這篇文章主要為大家分享四個(gè)用HTML+CSS+JS實(shí)現(xiàn)的簡(jiǎn)單應(yīng)用小案例,有:猜數(shù)字、表白墻、切換日夜間模式和待辦事項(xiàng),需要的可以參考一下2022-02-02js 獲取經(jīng)緯度的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js 獲取經(jīng)緯度的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06