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