Bootstrap各種進度條的實例講解

本章將講解 Bootstrap 進度條。在本教程中，您將看到如何使用bootstrap教程、重定向或動作狀態的進度條。

 

Bootstrap 進度條使用 CSS3 過渡和動畫來獲得該效果。Internet Explorer 9 及之前的版本和舊版的 Firefox 不支持該特性，Opera 12 不支持動畫。

默認的進度條

創建一個基本的進度條的步驟如下：

添加一個帶有 class .progress 的 <div>。

接着，在上面的 <div> 內，添加一個帶有 class .progress-bar 的空的 <div>。

添加一個帶有百分比表示的寬度的 style 屬性，例如 style="60%"; 表示進度條在 60% 的位置。

讓我們看看下面的實例：

實例

1 2 3 4 5

<div class="progress">     <div class="progress-bar" role="progressbar" aria-valuenow="60"         aria-valuemin="0" aria-valuemax="100" style="width: 40%;">         <span class="sr-only">40% 完成</span>     </div></div>

基本樣式

　　Bootstrap框架中對於進度條提供了一個基本樣式，一個100%寬度的背景色，然后一個高亮的顏色表示完成進度。其實制作這樣的進度條非常容易，一般是使用兩個容器，外容器具有一定的寬度，並且設置一個背景顏色，子元素設置一個寬度，比如完成度是30%（也就是父容器的寬度比例值），同時給其設置一個高亮的背景色html中文網

　　Bootstrap框架中也是按這樣的方式實現的，它提供了兩個容器，外容器使用“progress”樣式，子容器使用“progress-bar”樣式。其中progress用來設置進度條的容器樣式，而progress-bar用於限制進度條的進度

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.progress {   height: 20px;   margin-bottom: 20px;   overflow: hidden;      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; }

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

　　無障礙性更好的寫法如下

1	<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>

　　role屬性告訴搜索引擎這個div的作用是進度條；aria-valuenow="40"屬性告知當前進度條的進度為40%；aria-valuemin="0"屬性告知進度條的最小值為0%；aria-valuemax="100"屬性告知進度條的最大值為100%

 

 

彩色進度條

　　Bootstrap框架中的進度條和警告信息框一樣，為了能給用戶一個更好的體驗，也根據不同的狀態配置了不同的進度條顏色。在此稱為彩色進度條，其主要包括以下四種：

　　☑ progress-bar-info：表示信息進度條，進度條顏色為藍色

　　☑ progress-bar-success：表示成功進度條，進度條顏色為綠色

　　☑ progress-bar-warning：表示警告進度條，進度條顏色為黃色

　　☑ progress-bar-danger：表示錯誤進度條，進度條顏色為紅色

　　具體使用非常簡單，只需要在基礎的進度上增加對應的類名即可，彩色進度條與基本進度條相比，就是進度條顏色做了一定的變化

1 2 3 4 5 6 7 8 9

.progress-bar-success {   background-color: #5cb85c; }.progress-bar-info {   background-color: #5bc0de; }.progress-bar-warning {   background-color: #f0ad4e; }.progress-bar-danger {   background-color: #d9534f; }

1

<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>

條紋進度條

　　在Bootstrap框架中除了提供了彩色進度條之外，還提供了一種條紋進度條，這種條紋進度條采用CSS3的線性漸變來實現，並未借助任何圖片。使用Bootstrap框架中的條紋進度條只需要在進度條的容器“progress”基礎上增加類名“progress-striped”，當然，如果要讓進度條條紋像彩色進度一樣，具有彩色效果，只需要在進度條上增加相應的顏色類名

　　[注意]通過漸變可以為進度條創建條紋效果，IE9-瀏覽器不支持

1 2 3 4 5

.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; }

1 2 3 4 5 6 7 8 9 10 11 12 13

.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); }

1

<div class="progress progress-striped"><div class="progress-bar" style="width:70%"></div></div><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>

 

 

動態條紋

　　為了讓條紋進度條動起來，Bootstrap框架還提供了一種動態條紋進度條。其實現原理主要通過CSS3的animation來完成。首先通過@keyframes創建了一個progress-bar-stripes的動畫，這個動畫主要做了一件事，就是改變背景圖像的位置，也就是background-position的值。因為條紋進度條是通過CSS3的線性漸變來制作的，而linear-gradient實現的正是對應背景中的背景圖片