Bootstrap進度條組件知識詳解
更新時間：2016年05月01日 12:09:30 作者：洛水三千
在網(wǎng)頁中，經(jīng)常見到進度條效果，那么這些個性的進度條組件效果是怎么實現(xiàn)的呢，下面腳本之家小編給大家分享Bootstrap進度條組件知識詳解，感興趣的朋友要求學習吧
在網(wǎng)頁中，經(jīng)常見到進度條效果，如：平分系統(tǒng)、加載狀態(tài)等，進度條組件使用了css3的transition和animation屬性來完成一些特效，這些特效在IE9及IE9以下版本、Firefox的老版本中并不支持，Opera 12 不支持 animation 屬性。
進度條和其他獨立組件一樣，開發(fā)者可以根據(jù)自己的需要選擇對應(yīng)的版本：
LESS: progress-bars.less
SASS: _progress-bars.scss
基礎(chǔ)進度條
實現(xiàn)原理：
需要兩個容器，外容器使用類名.progress，子容器使用類名.progress-bar;其中.progress用來設(shè)置進度條容器的背景色，容器的高度，間距等；而.progress-bar設(shè)置進度方向，進度條的背景色和過度效果；下面是css源碼：
progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #428bca;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
transition: width .6s ease;
}
例子：
<div class="progress"> <div class="progress-bar" style="width:30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">30%</span> </div> </div>
role屬性作用：告訴搜索引擎這個div的作用是進度條；
aria-valuenow=”30”屬性作用：當前進度條的進度為40%；
aria-valuemin=”0”屬性作用：進度條的最小值為0%；
aria-valuemax=”100”屬性作用：進度條的最大值為100%；
可以將設(shè)置了.sr-only類的<span>標簽從進度條組件中移除，而讓當前進度顯示出來；
<div class="progress"> <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" >40%</div> </div>
彩色進度條
彩色進度條和警告進度條一樣，為了能給用戶一個更好的體驗，也根據(jù)不同的狀態(tài)配置了不同的進度條顏色，主要包括以下四種：
progress-bar-info:表示信息進度條，藍色
progress-bar-success:表示成功進度條，綠色
progress-bar-warning:表示警告進度條，黃色
progress-bar-danger:表示錯誤進度條，紅色
css源碼：
.progress-bar-success {
background-color: #5cb85c;
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-bar-warning {
background-color: #f0ad4e;
}
.progress-bar-danger {
background-color: #d9534f;
}
使用方法：
只需要在基礎(chǔ)進度條上增加對應(yīng)的類名即可
例子：
<h1>彩色進度條</h1> <div class="progress"> <div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div> </div>
效果如下：
條紋進度條
條紋進度條采用css3的線性漸變來實現(xiàn)，并未借助任何圖片，使用條紋進度條只需在進度條的容器.progress基礎(chǔ)上追加類名”progress-striped”,如果要進度條紋像彩色進度一樣，具有彩色效果，只需在進度條上增加相應(yīng)得顏色類名
下面是.progress-striped樣式源碼：
.progress-striped .progress-bar {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}
條紋進度對應(yīng)的每種狀態(tài)也有不同的顏色
.progress-striped .progress-bar-success {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-info {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-warning {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-danger {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
下面來看看條紋進度條的運用：
<h1>條紋進度條</h1> <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div> </div>
動態(tài)條紋進度條
在進度條.progress 、.progress-striped兩個類的基礎(chǔ)上在加入類名.active就能實現(xiàn)動態(tài)條紋進度條。
其實現(xiàn)原理主要是通過css3的animation來完成。首先通過@keyframes創(chuàng)建了一個progress-bar-stripes的動畫，這個動畫主要做了一件事，就是改變背景圖像的位置，也就是 background-position的值。因為條紋進度條是通過CSS3的線性漸變來制作的，而linear-gradient實現(xiàn)的正是對應(yīng)背景中的背景圖片
下面是css源碼：
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@keyframes僅僅是創(chuàng)建了一個動畫效果，如果要讓進度條真正的動起來，我們需要通過一定的方式調(diào)用@keyframes創(chuàng)建的動畫 “progress-bar-stripes”，并且通過一個事件觸發(fā)動畫生效。在Bootstrap框架中，通過給進度條容器“progress”添加一個類名“active”，并讓文檔加載完成就觸“progress-bar-stripes”動畫生效
調(diào)用動畫對應(yīng)的樣式代碼如下：
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
例子：
<h1>動態(tài)條紋進度條</h1> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div> </div>
效果如下（由于是直接從網(wǎng)頁上結(jié)果來的圖，這里并看不到它的動態(tài)效果）：
層疊進度條：
層疊進度可以將不容狀態(tài)的進度條放在一起，按水平方式排列
例子：
<div class="progress"> <div class="progress-bar progress-bar-success" style="width:20%"></div> <div class="progress-bar progress-bar-info" style="width:10%"></div> <div class="progress-bar progress-bar-warning" style="width:30%"></div> <div class="progress-bar progress-bar-danger" style="width:15%"></div> </div>
除了層疊彩色進度條之外，還可以層疊條紋進度條，或者說條紋進度條和彩色進度條混合層疊，僅需要在“progress”容器中添加對應(yīng)的進度條，同樣要注意，層疊的進度條之和不能大于100%。
下面來看一個例子：
<div class="progress"> <div class="progress-bar progress-bar-success" style="width:20%"></div> <div class="progress-bar progress-bar-info" style="width:20%"></div> <div class="progress-bar progress-bar-warning" style="width:30%"></div> <div class="progress-bar progress-bar-danger" style="width:15%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div> <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div> <div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%"></div> <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width:20%"></div> <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div> <div class="progress-bar progress-bar-warning" style="width:30%"></div> <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div> </div>
關(guān)于Bootstrap進度條組件知識詳解到此就介紹了，希望對大家有所幫助！
您可能感興趣的文章:
- 有趣的bootstrap走動進度條
- BootStrap初學者對彈出框和進度條的使用感覺
- Bootstrap每天必學之進度條
- php基于jquery的ajax技術(shù)傳遞json數(shù)據(jù)簡單實例
- jQuery學習筆記之 Ajax操作篇（二） - 數(shù)據(jù)傳遞
- 如何在前臺腳本通過json傳遞數(shù)據(jù)到后臺(使用微軟自帶的ajax)
- JSP中獲取ExtJS.Ajax前臺傳遞的JSON數(shù)據(jù)實現(xiàn)過程
- JavaScript 封裝Ajax傳遞的數(shù)據(jù)代碼
- $.ajax json數(shù)據(jù)傳遞方法
- Bootstrap進度條與AJAX后端數(shù)據(jù)傳遞結(jié)合使用實例詳解
相關(guān)文章
這篇文章主要介紹了微信小程序中this.setData的使用和注意事項,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
BootStrap是基于HTML、CSS和JavaScript的框架，使你只需要寫簡單的代碼就可以很快的搭建一個還不錯的前端框架，他是后端程序員的福音，使他們只需要專注業(yè)務(wù)邏輯，而無須浪費太多的精力在界面設(shè)計上2016-12-12
本篇文章主要介紹了bootstrap實現(xiàn)動態(tài)進度條效果，進度條可以加強應(yīng)用的用戶體驗效果，看到數(shù)字，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
JavaScript筆記之數(shù)據(jù)屬性和存儲器屬性
本文給大家介紹js數(shù)據(jù)屬性和存儲器屬性，及兩種屬性的區(qū)別，對js數(shù)據(jù)屬性存儲器屬性相關(guān)知識感興趣的朋友一起學習2016-03-03
JavaScript之面向?qū)ο骭動力節(jié)點Java學院整理
JavaScript的面向?qū)ο缶幊毯痛蠖鄶?shù)其他語言如Java、C#的面向?qū)ο缶幊潭疾惶粯?。下面通過本文給大家介紹js面向?qū)ο笾R，包括面向?qū)ο蟮膬蓚€基本概念，一起看看吧2017-06-06
這篇文章主要介紹了市面上短視頻(douyin)"去水印"的工具原來是這樣實現(xiàn)的,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
詳解JavaScript如何實現(xiàn)更短時間的延時函數(shù)
在項目開發(fā)中,經(jīng)常能遇到需要延時執(zhí)行的需求,比如實現(xiàn)一個定時器功能,本文主要和大家介紹了JS如何實現(xiàn)更短時間的延時函數(shù),需要的可以參考下2024-03-03
讓javascript加載速度倍增的方法(解決JS加載速度慢的問題)
這篇文章主要介紹了讓javascript加載速度倍增的方法,通過document.write輸出js解決廣告加載速度慢的問題,需要的朋友可以參考下2014-12-12
JavaScript鼠標事件,點擊鼠標右鍵,彈出div的簡單實例
下面小編就為大家?guī)硪黄狫avaScript鼠標事件,點擊鼠標右鍵,彈出div的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
讓你的博文自動帶上縮址的實現(xiàn)代碼，方便發(fā)到微博客上
添加以下代碼到你的博客中: (呵呵，抄襲至lulu Studio http://s8.hk/0itw)2010-12-12