2. 程式人生 > >深入理解BootStrap Item14 -- 進度條（progressbar）

深入理解BootStrap Item14 -- 進度條（progressbar）

阿新 • • 發佈：2019-01-16

1、進度條

在網頁中，進度條的效果並不少見，比如一個評分系統，比如載入狀態等。就如下圖所示的一個評分系統，他就是一個簡單的進度條效果：

這裡寫圖片描述

進度條和其他獨立元件一樣，開發者可以根據自己的需要，選擇對應的版本：

☑ LESS版本：原始碼檔案progress-bars.less

☑ Sass版本：原始碼檔案_progress-bars.scss

☑ 編譯後版本：bootstrap.css檔案第4500行～第4575行

而且Bootstrap框架為大家提供多種樣式風格的進度條，供大家使用.

2、進度條–基本樣式

Bootstrap框架中對於進度條提供了一個基本樣式，一個100%寬度的背景色，然後個高亮的色表示完成進度。其實製作這樣的進度條非常容易，一般是使用兩個容器，外容器具有一定的寬度，並且設定一個背景顏色，他的子元素設定一個寬度，比如完成度是30%

（也就是父容器的寬度比例值），同時給其設定一個高亮的背景色。

1、使用方法：

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

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

執行效果如下：

這裡寫圖片描述

2、實現原理：

前面也說了，這樣的基本進度條主要分成兩部分：

progress樣式主要設定進度條容器的背景色，容器高度、間距等：

/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樣式在設定進度方向，重要的是設定了進度條的背景顏色和過渡效果：

/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、結構優化：

雖然這樣實現了基本進度條效果，但對於殘障人員瀏覽網頁有點困難，所以我們可以將結構做得更好些（語義化更友好些）：

<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"屬性作用：當前進度條的進度為40%。

  • 3、aria-valuemin="0"屬性作用：進度條的最小值為0%。

  • 4、aria-valuemax="100"屬性作用：進度條的最大值為100%。

3、進度條–彩色進度條

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

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

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

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

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

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>

執行效果如下：

這裡寫圖片描述

2、實現原理：

彩色進度條與基本進度條相比，就是進度條顏色做了一定的變化，其對應的樣式程式碼如下：

/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的線性漸變來實現，並未藉助任何圖片。使用Bootstrap框架中的條紋進度條只需要在進度條的容器“progress”基礎上增加類名“progress-striped”，當然，如果你要讓你的進度條條紋像彩色進度一樣，具有彩色效果，你只需要在進度條上增加相應的顏色類名，如前面的彩色進度條所講。

一起來看一下製作條紋進度條的結構：

<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、原現實現：

正如前面所說，實現條紋進度條，主要使用的是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;
}

同樣的，條紋進度條對應的每種狀態也有不同的顏色，使用方法與彩色進度條一樣。只是樣式上做了一定的調整：

/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、進度條–動態條紋進度條

使用方法：

在進度條“progress progress-striped”兩個類的基礎上再加入“active”類名。如下程式碼：

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

1、實現原理：

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

/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的同學都知道，@keyframes僅僅是建立了一個動畫效果，如果要讓進度條真正的動起來，我們需要通過一定的方式呼叫@keyframes建立的動畫“progress-bar-stripes”，並且通過一個事件觸發動畫生效。在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>

呼叫動畫對應的樣式程式碼如下：

/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框架除了提供上述幾種進度條之外，還提供了一種層疊進度條，層疊進度條，可以將不同狀態的進度條放置在一起，按水平方式排列。具體使用如下：

<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-bar”上有一個左浮動的樣式。也就是這個樣式，在不增加任何樣式程式碼就能實現上例的層疊效果。當然有一點需要注意，層疊進度條寬度之和不能大於100%，大於100%就會造成下面的不良效果：

這裡寫圖片描述

除了層疊彩色進度條之外，還可以層疊條紋進度條，或者說條紋進度條和彩色進度條混合層疊，僅需要在“progress”容器中新增對應的進度條，同樣要注意，層疊的進度條之和不能大於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的進度條

上面介紹的各種進度條，都僅僅是通過顏色進度向用戶傳遞進度值。但實際中，有很多時候是需要在進度條中直接用相關的數值向用戶傳遞完成的進度值，在Bootstrap就為大家考慮了這種使用場景。

1、實現方法：

只需要在進度條中新增你需要的值，如：

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

執行效果如下：
這裡寫圖片描述

還有一種特殊情形，當進度條處於開始位置，也就是進度條的值為0%時，內容是否會撐開一定的寬度，讓進度條具有顏色呢？如果是，這不是我們需要的效果，如果不是，又是怎麼實現的呢？我們先來看一個這樣的示例：

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>

執行效果如下：

這裡寫圖片描述

2、原理分析：

效果告訴我們，當進度為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在不斷的完善之中。

相關推薦

深入理解BootStrap Item14 -- 進度條（progressbar）

1、進度條 在網頁中，進度條的效果並不少見，比如一個評分系統，比如載入狀態等。就如下圖所示的一個評分系統，他就是一個簡單的進度條效果： 進度條和其他獨立元件一樣，開發者可以根據自己的需要，選擇對應的版本： ☑ LESS版本：原始碼檔案progress-

easyui 進度條（ProgressBar）

Create ProgressBar The ProgressBar component can be created from html markup or programatically. Creation from markup is even easier.

關於進度條（ProgressBar）那些事（筆記）

ProgressBar用於介面上顯示一個進度條，表示我們的程式正在載入一些資料。（預設時是一個圓形進度條。） 控制元件的可見性 可以通過android:visibility對這個控制元件進行可見屬性的設定 >可選值有三種，visible、invisible（看不見但

3.2《深入理解計算機系統》筆記（二）內存和高速緩存的原理【插圖】

img sram 本質 text ddr rate too 是我 很大的 《深入計算機系統》筆記（一）主要是講解程序的構成、執行和控制。接下來就是運行了。我跳過了“處理器體系結構”和“優化程序性能”，這兩章的筆記繼續往後延遲！ 《深入計算機系統》的一個很大的用處

js進度條（偽）

itl font style script .get black type onf clas <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

深入理解Java內存模型（五）——鎖

運行 包含 示意圖 支持 ole img api turn before 本文轉自：http://www.infoq.com/cn/articles/java-memory-model-5 鎖的釋放-獲取建立的happens before 關系 鎖是java並發編程中最重要

深入理解Java內存模型（三）——順序一致性

內存空間 寫入 方便 語言 body 一半 同步 java語言 post 本文轉自：http://www.infoq.com/cn/articles/java-memory-model-3 數據競爭與順序一致性保證 當程序未正確同步時，就會存在數據競爭。java內存模型規範

深入理解Java內存模型（四）——volatile

繼續 表現 可能 class 之前 art 其他 reader int 本文轉自：http://www.infoq.com/cn/articles/java-memory-model-4 volatile的特性 當我們聲明共享變量為volatile後，對這個變量的讀/寫將會

深入理解JVM虛擬機：（一）Java運行時數據區域

字面量 符號 地方 64位 因此 lower 優化 java堆大小 工作 概述 JVM是Java語言的精髓所在，因為它Java語言實現了跨平臺運行，以及自動內存管理機制等，本文將從概念上介紹JVM內存的各個區域，說明個區域的作用。 JVM運行時數據區模型 Java虛擬機在執

深入理解計算機系統配套實驗（一） data lab 函式詳解

/* 135. * bitAnd - x&y using only ~ and | 136. * Example: bitAnd(6, 5) = 4 137. * Legal ops: ~ | 138. * Max ops: 8 139. *

深入理解Java類載入機制（一）

1 前言： 在上一篇文章一文讓你明白 Java 位元組碼中, 我們瞭解了java位元組碼的解析過程，那麼在接下來的內容中，我們來了解一下類的載入機制。 2 題外話 Java的核心是什麼？當然是JVM了，所以說了解並熟悉JVM對於我們理解Java語言非常重要，不管你是做Java還是Andr

深入理解Java Class檔案格式（九）

經過前八篇關於class檔案的部落格， 關於class檔案格式的內容也基本上講完了。 本文是關於class檔案格式的最後一篇。 在這篇部落格中， 將會講解關於方法的幾個屬性。 理解這篇部落格的內容， 對於理解JVM執行引擎起著重要作用。 關於虛擬機器執行引擎有關的內容， 會在本專欄後面的部落格中涉及

深入理解Java Class檔案格式（八）

在本專欄的第一篇文章 深入理解Java虛擬機器到底是什麼 中， 我們主要講解了什麼是虛擬機器， 這篇部落格是對JVM的一個概述。 在隨後的幾篇文章中，一直在講解class檔案格式。 在今天這篇部落格中， 將會繼續講解class檔案中的其他資訊。 在本文中， 將會講解class檔案中的最後一

深入理解Java Class檔案格式（七）

本專欄列前面的一系列部落格， 對Class檔案中的一部分資料項進行了介紹。 本文將會繼續介紹class檔案中未講解的資訊。 先回顧一下上面一篇文章。 在上一篇部落格中， 我們介紹了： this_class    對當前類的描述 super_class  &

深入理解Java Class檔案格式（六）

經過前幾篇文章， 終於將常量池介紹完了， 之所以花這麼大的功夫介紹常量池， 是因為對於理解class檔案格式，常量池是必須要了解的， 因為class檔案中其他地方，大量引用了常量池中的資料項。  對於還不瞭解常量池的讀者， 如果想要深入瞭解class檔案格式， 或者想繼續讀這篇部落格和本專

深入理解java多執行緒（六）

關於java多執行緒的概念以及基本用法：java多執行緒基礎 6，單例模式與多執行緒 如何使單例模式遇到多執行緒是安全的這是下面要討論的內容 6.1，立即載入 立即載入就是在使用類的時候已經將物件建立完畢，例如String s = new Stri

深入理解Java多執行緒（五）

關於java多執行緒的概念以及基本用法：java多執行緒基礎 5，定時器Timer JDK中Timer類主要是負責計劃任務的功能，也就是在指定的時間開始執行某一個任務，封裝任務的類是TimerTask類，執行計劃任務的程式碼要放進TimerTask的子類，因為它一個抽象

深入理解Java多執行緒（四）

關於java多執行緒的概念以及基本用法：java多執行緒基礎 4，Lock的使用 ReentrantLook類的使用 ReentrantReadWriteLock類的使用 4.1，ReentrantLook類的使用 新建MySe

深入理解Java多執行緒（三）

關於java多執行緒的概念以及基本用法：java多執行緒基礎 3, 執行緒間通訊 執行緒在作業系統中是獨立的個體，經過特殊的處理，執行緒間可以實現通訊，進而成為一個整體，提高CPU利用率 3.1，等待/通知機制 等待：wait()方法作用是使當前執

深入理解Java多執行緒（二）

關於java多執行緒的概念以及基本用法：java多執行緒基礎 2，多執行緒的同步 多個執行緒對同一物件的變數進行同時訪問時會引發執行緒的安全問題，即一個執行緒對一個變數修改後，其他執行緒可能會讀取到修改後的變數值，所以我們要對獲得的例項變數的值進行同步處理，保證其原子性