bootstrap多種樣式進度條展示
為大家分享了多種多樣的bootstrap進度條樣式,供大家參考,具體內(nèi)容如下
1、默認的進度條
添加一個帶有class .progress 的div,在其內(nèi)添加一個帶有 class .progress-bar 的空div,為空div添加一個以百分比表示的style屬性,如 style="60%"表示進度條在60%的位置。
2、不同樣式的進度條
添加一個帶有class .progress 的div,在其內(nèi)添加一個帶有class .progress-bar 和class .progress-bar-*(*可以是success、info、warning、danger) 的空div,為空div添加一個以百分比表示的style屬性,如 style="60%"表示進度條在60%的位置。
3、條紋的進度條
添加一個帶有class .progress 和class .progress-striped以及class .active的div,在其內(nèi)添加一個帶有class .progress-bar 的空div,為空div添加一個以百分比表示的style屬性,如 style="60%"表示進度條在60%的位置。
4、動畫的進度條
添加一個帶有class .progress 和class .progress-striped的div,在其內(nèi)添加一個帶有 class .progress-bar 的空div,為空div添加一個以百分比表示的style屬性,如 style="60%"表示進度條在60%的位置。
5、堆疊的進度條
把多個進度條放在相同的 .progress 中即可實現(xiàn)堆疊。
<div id="out"> 默認的進度條: <div class="progress"> <div class="progress-bar" 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-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> 條紋的進度條: <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> 動畫的進度條: <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> 堆疊的進度條: <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>
效果圖:
如果大家還想深入學習,可以點擊這里進行學習,再為大家附3個精彩的專題:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- Bootstrap每天必學之進度條
- BootStrap Progressbar 實現(xiàn)大文件上傳的進度條的實例代碼
- bootstrap實現(xiàn)動態(tài)進度條效果
- BootStrap 實現(xiàn)各種樣式的進度條效果
- BootStrap初學者對彈出框和進度條的使用感覺
- Spring Boot+AngularJS+BootStrap實現(xiàn)進度條示例代碼
- BootStrap組件之進度條的基本用法
- Bootstrap實現(xiàn)各種進度條樣式詳解
- Bootstrap進度條實現(xiàn)代碼解析
- jquery 簡單的進度條實現(xiàn)代碼
- 分享8款優(yōu)秀的 jQuery 加載動畫和進度條插件
- bootstrap+jQuery實現(xiàn)的動態(tài)進度條功能示例
相關文章
BootStrap 動態(tài)添加驗證項和取消驗證項的實現(xiàn)方法
這篇文章主要介紹了BootStrap 動態(tài)添加驗證項和取消驗證項的實現(xiàn)方法的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09你應該了解的JavaScript Array.map()五種用途小結
大家都知道m(xù)ap() 方法返回一個新數(shù)組,數(shù)組中的元素為原始數(shù)組元素調用函數(shù)處理后的值。下面這篇文章主要給大家介紹了關于JavaScript Array.map()的五種用途,需要的朋友可以參考下2018-11-11eval(function(p,a,c,k,e,d)系列解密javascript程序
在網(wǎng)上下載源代碼時,很可能發(fā)現(xiàn)代碼里的JS腳本看不懂,這是由于JS加密造成的。如果你發(fā)現(xiàn)JS是以eval(function(p,a,c,k,e,r){e=function(c)開頭的,看到這個頁面你就可以解決他2007-04-04