Bootstrap每天必學(xué)之進(jìn)度條

更新時(shí)間：2015年11月30日 09:02:31 作者：小平果118

Bootstrap每天必學(xué)之進(jìn)度條，對(duì)Bootstrap進(jìn)度條小編也了解的很少，希望通過(guò)這篇文章和大家更多的去學(xué)習(xí)Bootstrap進(jìn)度條，從中得到收獲。

1、進(jìn)度條

在網(wǎng)頁(yè)中，進(jìn)度條的效果并不少見(jiàn)，比如一個(gè)評(píng)分系統(tǒng)，比如加載狀態(tài)等。就如下圖所示的一個(gè)評(píng)分系統(tǒng)，他就是一個(gè)簡(jiǎn)單的進(jìn)度條效果：

進(jìn)度條和其他獨(dú)立組件一樣，開(kāi)發(fā)者可以根據(jù)自己的需要，選擇對(duì)應(yīng)的版本：

☑ LESS版本：源碼文件progress-bars.less

☑ Sass版本：源碼文件_progress-bars.scss

☑ 編譯后版本：bootstrap.css文件第4500行～第4575行

而且Bootstrap框架為大家提供多種樣式風(fēng)格的進(jìn)度條，供大家使用.

2、進(jìn)度條–基本樣式

Bootstrap框架中對(duì)于進(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用來(lái)設(shè)置進(jìn)度條的容器樣式，而progress-bar用于限制進(jìn)度條的進(jìn)度。使用方法非常的簡(jiǎn)單：

<div class="progress">
 <div class="progress-bar" style="width:40%"></div>
</div>

運(yùn)行效果如下：

2）、實(shí)現(xiàn)原理：

前面也說(shuō)了，這樣的基本進(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)度條的背景顏色和過(guò)渡效果：

/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)度條效果，但對(duì)于殘障人員瀏覽網(wǎng)頁(yè)有點(diǎn)困難，所以我們可以將結(jié)構(gòu)做得更好些（語(yǔ)義化更友好些）：

<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）、使用方法：

具體使用就非常簡(jiǎn)單了，只需要在基礎(chǔ)的進(jìn)度上增加對(duì)應(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)度條顏色做了一定的變化，其對(duì)應(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的線性漸變來(lái)實(shí)現(xiàn)，并未借助任何圖片。使用Bootstrap框架中的條紋進(jìn)度條只需要在進(jìn)度條的容器“progress”基礎(chǔ)上增加類名“progress-striped”，當(dāng)然，如果你要讓你的進(jìn)度條條紋像彩色進(jìn)度一樣，具有彩色效果，你只需要在進(jìn)度條上增加相應(yīng)的顏色類名，如前面的彩色進(jìn)度條所講。

一起來(lái)看一下制作條紋進(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)：

正如前面所說(shuō)，實(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)度條對(duì)應(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)起來(lái)，Bootstrap框架還提供了一種動(dòng)態(tài)條紋進(jìn)度條。其實(shí)現(xiàn)原理主要通過(guò)CSS3的animation來(lái)完成。首先通過(guò)@keyframes創(chuàng)建了一個(gè)progress-bar-stripes的動(dòng)畫(huà)，這個(gè)動(dòng)畫(huà)主要做了一件事，就是改變背景圖像的位置，也就是background-position的值。因?yàn)闂l紋進(jìn)度條是通過(guò)CSS3的線性漸變來(lái)制作的，而linear-gradient實(shí)現(xiàn)的正是對(duì)應(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)畫(huà)效果，如果要讓進(jìn)度條真正的動(dòng)起來(lái)，我們需要通過(guò)一定的方式調(diào)用@keyframes創(chuàng)建的動(dòng)畫(huà)“progress-bar-stripes”，并且通過(guò)一個(gè)事件觸發(fā)動(dòng)畫(huà)生效。在Bootstrap框架中，通過(guò)給進(jìn)度條容器“progress”添加一個(gè)類名“active”，并讓文檔加載完成就觸“progress-bar-stripes”動(dòng)畫(huà)生效。

<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)畫(huà)對(duì)應(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)起來(lái)，就需要讓“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ì)感到疑問(wèn)，沒(méi)有為層疊進(jìn)度條添加額外的樣式代碼，怎么就正常了呢？可以回過(guò)頭來(lái)看基本進(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)度條，或者說(shuō)條紋進(jìn)度條和彩色進(jìn)度條混合層疊，僅需要在“progress”容器中添加對(duì)應(yīng)的進(jìn)度條，同樣要注意，層疊的進(jìn)度條之和不能大于100%。來(lái)簡(jiǎn)單的看一個(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)度條，都僅僅是通過(guò)顏色進(jìn)度向用戶傳遞進(jìn)度值。但實(shí)際中，有很多時(shí)候是需要在進(jìn)度條中直接用相關(guān)的數(shù)值向用戶傳遞完成的進(jìn)度值，在Bootstrap就為大家考慮了這種使用場(chǎng)景。

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)度條處于開(kāi)始位置，也就是進(jìn)度條的值為0%時(shí)，內(nèi)容是否會(huì)撐開(kāi)一定的寬度，讓進(jìn)度條具有顏色呢？如果是，這不是我們需要的效果，如果不是，又是怎么實(shí)現(xiàn)的呢？我們先來(lái)看一個(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)度條顏色并沒(méi)有顯示出來(lái)，那是因?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í)也說(shuō)明，Bootstrap在不斷的完善之中。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程

以上就是關(guān)于Bootstrap進(jìn)度條的全部?jī)?nèi)容介紹，并有詳細(xì)的原理分析，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: