Bootstrap每天必學(xué)之進(jìn)度條
1、進(jìn)度條
在網(wǎng)頁中，進(jìn)度條的效果并不少見，比如一個(gè)評分系統(tǒng)，比如加載狀態(tài)等。就如下圖所示的一個(gè)評分系統(tǒng)，他就是一個(gè)簡單的進(jìn)度條效果：
進(jìn)度條和其他獨(dú)立組件一樣，開發(fā)者可以根據(jù)自己的需要，選擇對應(yīng)的版本：
☑ LESS版本：源碼文件progress-bars.less
☑ Sass版本：源碼文件_progress-bars.scss
☑ 編譯后版本：bootstrap.css文件第4500行～第4575行
而且Bootstrap框架為大家提供多種樣式風(fēng)格的進(jìn)度條，供大家使用.
2、進(jìn)度條–基本樣式
Bootstrap框架中對于進(jìn)度條提供了一個(gè)基本樣式，一個(gè)100%寬度的背景色，然后個(gè)高亮的色表示完成進(jìn)度。其實(shí)制作這樣的進(jìn)度條非常容易，一般是使用兩個(gè)容器，外容器具有一定的寬度，并且設(shè)置一個(gè)背景顏色，他的子元素設(shè)置一個(gè)寬度，比如完成度是30%（也就是父容器的寬度比例值），同時(shí)給其設(shè)置一個(gè)高亮的背景色。
1）、使用方法：
Bootstrap框架中也是按這樣的方式實(shí)現(xiàn)的，他提供了兩個(gè)容器，外容器使用“progress”樣式，子容器使用“progress-bar”樣式。其中progress用來設(shè)置進(jìn)度條的容器樣式，而progress-bar用于限制進(jìn)度條的進(jìn)度。使用方法非常的簡單：
<div class="progress"> <div class="progress-bar" style="width:40%"></div> </div>
運(yùn)行效果如下：
2）、實(shí)現(xiàn)原理：
前面也說了，這樣的基本進(jìn)度條主要分成兩部分：
progress樣式主要設(shè)置進(jìn)度條容器的背景色，容器高度、間距等：
/bootstrap.css文件第4516行～第4524行/
.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樣式在設(shè)置進(jìn)度方向，重要的是設(shè)置了進(jìn)度條的背景顏色和過渡效果：
/bootstrap.css文件第4525行～第4538行/
.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;
}
3）、結(jié)構(gòu)優(yōu)化：
雖然這樣實(shí)現(xiàn)了基本進(jìn)度條效果，但對于殘障人員瀏覽網(wǎng)頁有點(diǎn)困難，所以我們可以將結(jié)構(gòu)做得更好些（語義化更友好些）：
<div class="progress"> <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">40% Complete</span> </div> </div>
1>、role屬性作用：告訴搜索引擎這個(gè)div的作用是進(jìn)度條。
2>、aria-valuenow="40"屬性作用：當(dāng)前進(jìn)度條的進(jìn)度為40%。
3>、aria-valuemin="0"屬性作用：進(jìn)度條的最小值為0%。
4>、aria-valuemax="100"屬性作用：進(jìn)度條的最大值為100%。
3、進(jìn)度條–彩色進(jìn)度條
Bootstrap框架中的進(jìn)度條和警告信息框一樣，為了能給用戶一個(gè)更好的體驗(yàn)，也根據(jù)不同的狀態(tài)配置了不同的進(jìn)度條顏色。在此稱為彩色進(jìn)度條，其主要包括以下四種：
☑ progress-bar-info：表示信息進(jìn)度條，進(jìn)度條顏色為藍(lán)色
☑ progress-bar-success：表示成功進(jìn)度條，進(jìn)度條顏色為綠色
☑ progress-bar-warning：表示警告進(jìn)度條，進(jìn)度條顏色為黃色
☑ progress-bar-danger：表示錯(cuò)誤進(jìn)度條，進(jìn)度條顏色為紅色
1）、使用方法：
具體使用就非常簡單了，只需要在基礎(chǔ)的進(jìn)度上增加對應(yīng)的類名。如：
<div class="progress"> <div class="progress-bar progress-bar-success" style="width:40%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" style="width:60%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" style="width:80%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" style="width:50%"></div> </div>
運(yùn)行效果如下：
2）、實(shí)現(xiàn)原理：
彩色進(jìn)度條與基本進(jìn)度條相比，就是進(jìn)度條顏色做了一定的變化，其對應(yīng)的樣式代碼如下：
/bootstrap.css文件第4548行～第4550行/
.progress-bar-success {
background-color: #5cb85c;
}
/*bootstrap.css文件第4555行～第4557行*/
.progress-bar-info {
background-color: #5bc0de;
}
/*bootstrap.css文件第4562行～第4564行*/
.progress-bar-warning {
background-color: #f0ad4e;
}
/*bootstrap.css文件第4569行～第4571行*/
.progress-bar-danger {
background-color: #d9534f;
}
4、進(jìn)度條–條紋進(jìn)度條
在Bootstrap框架中除了提供了彩色進(jìn)度條之外，還提供了一種條紋進(jìn)度條，這種條紋進(jìn)度條采用CSS3的線性漸變來實(shí)現(xiàn)，并未借助任何圖片。使用Bootstrap框架中的條紋進(jìn)度條只需要在進(jìn)度條的容器“progress”基礎(chǔ)上增加類名“progress-striped”，當(dāng)然，如果你要讓你的進(jìn)度條條紋像彩色進(jìn)度一樣，具有彩色效果，你只需要在進(jìn)度條上增加相應(yīng)的顏色類名，如前面的彩色進(jìn)度條所講。
一起來看一下制作條紋進(jìn)度條的結(jié)構(gòu)：
<div class="progress progress-striped"> <div class="progress-bar progress-bar-success" style="width:40%"></div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-info" style="width:60%"></div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-warning" style="width:80%"></div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-danger" style="width:50%"></div> </div>
運(yùn)行效果如下：
1）、原現(xiàn)實(shí)現(xiàn)：
正如前面所說，實(shí)現(xiàn)條紋進(jìn)度條，主要使用的是CSS3的線性漸變，其具體代碼如下：
/bootstrap.css文件第4539行～第4547行/
.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;
}
同樣的，條紋進(jìn)度條對應(yīng)的每種狀態(tài)也有不同的顏色，使用方法與彩色進(jìn)度條一樣。只是樣式上做了一定的調(diào)整：
/bootstrap.css文件第4551行～第4554行/
.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);
}
/bootstrap.css文件第4558行～第4561行/
.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);
}
/bootstrap.css文件第4565行～第4568行/
.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);
}
/*bootstrap.css文件第4572行～第4575行*/
.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);
}
5、進(jìn)度條–動(dòng)態(tài)條紋進(jìn)度條
使用方法：
在進(jìn)度條“progress progress-striped”兩個(gè)類的基礎(chǔ)上再加入“active”類名。如下代碼：
<div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" style="width:40%"></div> </div>
1）、實(shí)現(xiàn)原理：
為了讓條紋進(jìn)度條動(dòng)起來，Bootstrap框架還提供了一種動(dòng)態(tài)條紋進(jìn)度條。其實(shí)現(xiàn)原理主要通過CSS3的animation來完成。首先通過@keyframes創(chuàng)建了一個(gè)progress-bar-stripes的動(dòng)畫，這個(gè)動(dòng)畫主要做了一件事，就是改變背景圖像的位置，也就是background-position的值。因?yàn)闂l紋進(jìn)度條是通過CSS3的線性漸變來制作的，而linear-gradient實(shí)現(xiàn)的正是對應(yīng)背景中的背景圖片。
/bootstrap.css文件第4500行～第4515行/
@-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;
}
}
了解CSS3的同學(xué)都知道，@keyframes僅僅是創(chuàng)建了一個(gè)動(dòng)畫效果，如果要讓進(jìn)度條真正的動(dòng)起來，我們需要通過一定的方式調(diào)用@keyframes創(chuàng)建的動(dòng)畫“progress-bar-stripes”，并且通過一個(gè)事件觸發(fā)動(dòng)畫生效。在Bootstrap框架中，通過給進(jìn)度條容器“progress”添加一個(gè)類名“active”，并讓文檔加載完成就觸“progress-bar-stripes”動(dòng)畫生效。
<div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" style="width:40%"></div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-info" style="width:60%"></div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-warning" style="width:80%"></div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-danger" style="width:50%"></div> </div>
調(diào)用動(dòng)畫對應(yīng)的樣式代碼如下：
/bootstrap.css文件第4544行～第4547行/
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
運(yùn)行效果如下：
特別注意：要讓條紋進(jìn)度條動(dòng)起來，就需要讓“progress-striped”和“active”同時(shí)運(yùn)用，不然條紋進(jìn)度條是不具備動(dòng)效效果。
6、進(jìn)度條–層疊進(jìn)度條
Bootstrap框架除了提供上述幾種進(jìn)度條之外，還提供了一種層疊進(jìn)度條，層疊進(jìn)度條，可以將不同狀態(tài)的進(jìn)度條放置在一起，按水平方式排列。具體使用如下：
<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>
運(yùn)行效果如下：
或許你會(huì)感到疑問，沒有為層疊進(jìn)度條添加額外的樣式代碼，怎么就正常了呢？可以回過頭來看基本進(jìn)度條那部分，不難發(fā)現(xiàn)，在“progress-bar”上有一個(gè)左浮動(dòng)的樣式。也就是這個(gè)樣式，在不增加任何樣式代碼就能實(shí)現(xiàn)上例的層疊效果。當(dāng)然有一點(diǎn)需要注意，層疊進(jìn)度條寬度之和不能大于100%，大于100%就會(huì)造成下面的不良效果：
除了層疊彩色進(jìn)度條之外，還可以層疊條紋進(jìn)度條，或者說條紋進(jìn)度條和彩色進(jìn)度條混合層疊，僅需要在“progress”容器中添加對應(yīng)的進(jìn)度條，同樣要注意，層疊的進(jìn)度條之和不能大于100%。來簡單的看一個(gè)示例：
<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>
運(yùn)行效果如下：
7、進(jìn)度條–帶Label的進(jìn)度條
上面介紹的各種進(jìn)度條，都僅僅是通過顏色進(jìn)度向用戶傳遞進(jìn)度值。但實(shí)際中，有很多時(shí)候是需要在進(jìn)度條中直接用相關(guān)的數(shù)值向用戶傳遞完成的進(jìn)度值，在Bootstrap就為大家考慮了這種使用場景。
1）、實(shí)現(xiàn)方法：
只需要在進(jìn)度條中添加你需要的值，如：
<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div> </div>
運(yùn)行效果如下：
還有一種特殊情形，當(dāng)進(jìn)度條處于開始位置，也就是進(jìn)度條的值為0%時(shí)，內(nèi)容是否會(huì)撐開一定的寬度，讓進(jìn)度條具有顏色呢？如果是，這不是我們需要的效果，如果不是，又是怎么實(shí)現(xiàn)的呢？我們先來看一個(gè)這樣的示例：
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div> </div>
運(yùn)行效果如下：
2）、原理分析：
效果告訴我們，當(dāng)進(jìn)度為0%，進(jìn)度條顏色并沒有顯示出來，那是因?yàn)锽ootstrap在樣式上做了一定的處理。
/bootstrap.css文件第4748行~第4759行/
.progress-bar[aria-valuenow="1"],
.progress-bar[aria-valuenow="2"] {
min-width: 30px;
}
.progress-bar[aria-valuenow="0"] {
min-width: 30px;
color: #777;
background-color: transparent;
background-image: none;
-webkit-box-shadow: none;
box-shadow: none;
}
注：這段代碼BootstrapV3.2版本才有。在Bootstrap V3.1.1版本是不具有這段代碼，同時(shí)也說明，Bootstrap在不斷的完善之中。
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
以上就是關(guān)于Bootstrap進(jìn)度條的全部內(nèi)容介紹，并有詳細(xì)的原理分析，希望對大家的學(xué)習(xí)有所幫助。
- 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é)者對彈出框和進(jìn)度條的使用感覺
- Spring Boot+AngularJS+BootStrap實(shí)現(xiàn)進(jìn)度條示例代碼
- bootstrap多種樣式進(jìn)度條展示
- BootStrap組件之進(jìn)度條的基本用法
- Bootstrap實(shí)現(xiàn)各種進(jìn)度條樣式詳解
- Bootstrap進(jìn)度條實(shí)現(xiàn)代碼解析
- jquery 簡單的進(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)文章
基于javascript實(shí)現(xiàn)彩票隨機(jī)數(shù)生成（簡單版）
這篇文章主要介紹了基于javascript實(shí)現(xiàn)彩票隨機(jī)數(shù)生成的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-01-01
js獲取時(shí)間并實(shí)現(xiàn)字符串和時(shí)間戳之間的轉(zhuǎn)換
這篇文章主要介紹了js獲取時(shí)間并實(shí)現(xiàn)字符串和時(shí)間戳之間的轉(zhuǎn)換,需要的朋友可以參考下2015-01-01
JS插件amCharts實(shí)現(xiàn)繪制柱形圖默認(rèn)顯示數(shù)值功能示例
這篇文章主要介紹了JS插件amCharts實(shí)現(xiàn)繪制柱形圖默認(rèn)顯示數(shù)值功能,結(jié)合實(shí)例形式分析了amCharts插件繪制柱形圖并顯示數(shù)值的相關(guān)操作技巧,需要的朋友可以參考下2019-11-11
javascript中IE瀏覽器不支持NEW DATE()帶參數(shù)的解決方法
在火狐下 可以正常取得時(shí)間，在IE7下 卻是 NaN。糾結(jié)老長時(shí)間，放棄了new date 然后再老外的論壇中找了一段段代碼可以兼容所有瀏覽器的格式化日期代碼2012-03-03
學(xué)習(xí)javascript，實(shí)現(xiàn)插入排序?qū)崿F(xiàn)代碼
首先新建一個(gè)空列表，用于保存已排序的有序數(shù)列（我們稱之為"有序列表"）。從原數(shù)列中取出一個(gè)數(shù)，將其插入"有序列表"中，使其仍舊保持有序狀態(tài)。2011-07-07
javascript實(shí)現(xiàn)倒計(jì)時(shí)并彈窗提示特效
倒計(jì)時(shí)的功能在我們做項(xiàng)目的時(shí)候會(huì)經(jīng)常遇到，這里給大家分享的是個(gè)人編寫的一個(gè)簡易的效果代碼，有需要的小伙伴可以參考下2015-06-06
這篇文章主要介紹了通過window.location.search來獲取頁面?zhèn)鱽淼膮?shù)，經(jīng)測試是OK的2014-09-09
這篇文章主要介紹了js實(shí)現(xiàn)雙擊圖片放大單擊縮小的方法,涉及js操作圖片及onclick與ondblclick事件的使用技巧,需要的朋友可以參考下2015-02-02
經(jīng)常在一些博客中看到有一個(gè)打賞功能，本篇文章主要介紹了博客打賞功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-10-10
對存在JavaScript隱式類型轉(zhuǎn)換的四種情況的總結(jié)(必看篇)
下面小編就為大家?guī)硪黄獙Υ嬖贘avaScript隱式類型轉(zhuǎn)換的四種情況的總結(jié)(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08