搜尋
首頁web前端Bootstrap教程詳解Bootstrap中的進度條組件

詳解Bootstrap中的進度條組件

青灯夜游
青灯夜游
Apr 08, 2021 am 11:30 AM
bootstrap進度條

本篇文章為大家詳細介紹Bootstrap中的進度條組件。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

詳解Bootstrap中的進度條組件

在網頁中，進度條的效果並不少見，例如一個評分系統，例如載入狀態等，透過簡單、靈活的進度條，可以為目前工作流程或動作提供即時回饋。下面我們來看看Bootstrap中的進度條元件。

相關推薦：《bootstrap教學》

#基本樣式

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

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

.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 {
  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;
}
<div class="progress">
       <div class="progress-bar" style="width:40%"></div>
</div>

無障礙性更好的寫法如下

<div>
    <div>
        <span>40% Complete</span>
    </div>
</div>

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

詳解Bootstrap中的進度條組件

彩色進度條

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

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

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

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

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

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

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

詳解Bootstrap中的進度條組件

條紋進度條

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

[注意]透過漸層可以為進度條建立條紋效果，IE9-瀏覽器不支援

.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;
}
.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);
}
<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中的進度條組件

動態條紋

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

#[注意]IE9-瀏覽器不支援

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

在Bootstrap框架中，透過為進度條容器“progress”添加一個類別名稱“active”，並讓文件載入完成就觸“progress-bar-stripes”動畫生效，使其呈現出由右向左運動的動畫效果

.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}
<div>
    <div></div>
</div>
<div>
    <div></div>
</div>
<div>
    <div></div>
</div>
<div>
    <div></div>
</div>


    

詳解Bootstrap中的進度條組件

層疊進度條

Bootstrap框架除了提供上述幾個進度條之外，還提供了一個層疊進度條。層疊進度條可以將不同狀態的進度條放置在一起，按水平方式排列

把多個進度條放入同一個 .progress 中，使它們呈現堆疊的效果

<div>
  <div>
    <span>35% Complete (success)</span>
  </div>
  <div>
    <span>20% Complete (warning)</span>
  </div>
  <div>
    <span>10% Complete (danger)</span>
  </div>
</div>

詳解Bootstrap中的進度條組件

[注意]層疊的進度條總和不能大於100%

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

詳解Bootstrap中的進度條組件

提示标签

在实际开发中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，Bootstrap考虑了这种使用场景，只需要在进度条中添加需要的值

<div>
    <div>20%</div>
</div>

詳解Bootstrap中的進度條組件

在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性 

<div>
    <div>0%</div>
</div>
<div>
    <div>0%</div>
</div>
<div>
    <div>1%</div>
</div>
<div>
    <div>1%</div>
</div>

詳解Bootstrap中的進度條組件

更多编程相关知识，请访问：编程视频！！

以上是詳解Bootstrap中的進度條組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述
本文轉載於：cnblogs。如有侵權，請聯絡admin@php.cn刪除
相關文章
Bootstrap：使網頁設計更容易Bootstrap：使網頁設計更容易Apr 13, 2025 am 12:10 AM

Bootstrap讓網頁設計更容易的原因是其預設組件、響應式設計和豐富的社區支持。 1)預設組件庫和样式讓開發者無需編寫複雜的CSS代碼；2)內置網格系統簡化了響應式佈局的創建；3)社區支持提供了豐富的資源和解決方案。

Bootstrap的影響：加速網絡開發Bootstrap的影響：加速網絡開發Apr 12, 2025 am 12:05 AM

Bootstrap加速了Web開發，通過提供預定義的樣式和組件，開發者可以快速搭建響應式網站。 1)它縮短了開發時間，例如在項目中幾天內完成基本佈局。 2)通過Sass變量和mixins，Bootstrap允許定製樣式以滿足特定需求。 3)使用CDN版本可以優化性能，提高加載速度。

理解引導：核心概念和功能理解引導：核心概念和功能Apr 11, 2025 am 12:01 AM

Bootstrap是一個開源的前端框架，主要作用是幫助開發者快速構建響應式網站。 1)它提供了預定義的CSS類和JavaScript插件，方便實現複雜的UI效果。 2)Bootstrap的工作原理依賴於其CSS和JavaScript組件，通過媒體查詢實現響應式設計。 3)使用示例包括基本用法，如創建按鈕，以及高級用法，如自定義樣式。 4)常見錯誤包括類名拼寫錯誤和未正確引入文件，建議使用瀏覽器開發者工具調試。 5)性能優化可通過自定義構建工具實現，最佳實踐包括使用語義化HTML和Bootstrap的預定義

Bootstrap Deep Dive：響應式設計和高級佈局技術Bootstrap Deep Dive：響應式設計和高級佈局技術Apr 10, 2025 am 09:35 AM

Bootstrap通過網格系統和媒體查詢實現響應式設計，使網站適應不同設備。 1.使用預定義類（如col-sm-6）定義列寬。 2.網格系統基於12列，需注意總和不超12。3.使用斷點（如sm、md、lg）定義不同屏幕尺寸下的佈局。

Bootstrap面試問題：降落您夢想的前端工作Bootstrap面試問題：降落您夢想的前端工作Apr 09, 2025 am 12:14 AM

Bootstrap是一套開源的前端框架，用於快速開發響應式網站和應用。 1.它提供了響應式設計、一致的UI組件和快速開發的優勢。 2.網格系統使用flexbox佈局，基於12列結構，通過.container、.row和.col-sm-6等類實現。 3.自定義樣式可以通過修改SASS變量或覆蓋CSS實現。 4.常用JavaScript組件包括模態框、輪播圖和折疊。 5.優化性能可以通過只加載必要組件、使用CDN和壓縮合併文件來實現。

Bootstrap＆JavaScript集成：動態功能和功能Bootstrap＆JavaScript集成：動態功能和功能Apr 08, 2025 am 12:10 AM

Bootstrap和JavaScript可以無縫整合，賦予網頁動態功能。 1）使用JavaScript操作Bootstrap組件，如模態框和導航欄。 2）確保jQuery正確加載，避免常見集成問題。 3）通過事件監聽和DOM操作實現複雜用戶交互和動態效果。

bootstrap搜索欄怎麼獲取bootstrap搜索欄怎麼獲取Apr 07, 2025 pm 03:33 PM

如何使用 Bootstrap 獲取搜索欄的值：確定搜索欄的 ID 或名稱。使用 JavaScript 獲取 DOM 元素。獲取元素的值。執行所需的操作。

bootstrap怎麼插入圖片bootstrap怎麼插入圖片Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
2 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7488
15
CakePHP 教程
1377
52
steam的賬戶名稱是什麼格式
77
11
win11激活密鑰永久
52
19
NYT連接提示和答案
19
40
顯示更多