資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何在 Bootstrap 中建立不同顏色的進度條
概述
Bootstrap 提供了構建網站元件的出色方法。Bootstrap 提供了一些類，透過在我們的標籤中使用這些類，可以很好地構建整個元件，而無需新增外部樣式表，但如果我們想對元件進行一些更改，則可以新增樣式表。
要藉助 Bootstrap 建立簡單的進度條，我們將使用某些 Bootstrap 類，它們是：
progress
progress-bar
如果我們想要建立一個帶有動畫條紋的進度條，Bootstrap 有它自己的類提供動畫效果，它們是：
progress-bar-striped
progress-bar-animated
Bootstrap CDN 連結
在開始構建進度條之前，首先將 Bootstrap CDN 連結新增到頁面 head 標籤中。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet"crosso rigin="anonymous">
演算法
步驟 1 - 在文字編輯器中建立 HTML 基本程式碼。
步驟 2 - 將上面給出的 Bootstrap CDN 連結新增到程式碼的 head 標籤中。
步驟 3 - 建立一個父 div 容器，其中包含頁面上的進度條。
步驟 4 - 現在建立一個 div 容器來構建進度條，並向其新增“.progress”類。還可以新增一些屬性，例如：role、aria-valuemin、aria-valuemax，其值分別為progressbar, 0 和 100。
<div class="progress w-100 my-2 fw-bold rounded-pill" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;"> </div>
步驟 5 - 在 progress 類 div 內建立另一個 div，並向該 div 新增類“.progress-bar”。使用bg-dark, bg-warning, bg-success, bg-danger設定進度條的顏色。
<div class="progress-bar bg-success" style="width: 25%">25%</div>
步驟 6 - 進度條建立成功。
示例
在給定的示例中，我們將使用 Bootstrap 預定義的類構建一個簡單的基本進度條。進度條將指示進度條上的百分比數字。
<html>
<head>
<title>Progress Bar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<div class="d-flex flex-column mx-auto justify-content-center" style="width: 80vw;height: 100vh;">
<h3 class="text-success fw-bold text-center bg-light rounded py-4 px-1">
Percentage progress bar
</h3>
<div class="progress w-100 my-2 fw-bold rounded-pill" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar bg-success" style="width: 25%">25%</div>
</div>
<div class="progress w-100 my-2 fw-bold rounded-pill" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar bg-info" style="width: 50%">50%</div>
</div>
<div class="progress w-100 my-2 fw-bold rounded-pill" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar bg-warning" style="width: 75%">75%</div>
</div>
<div class="progress w-100 my-2 fw-bold rounded-pill" role="progressbar" aria-label="Danger example"aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar bg-danger" style="width: 100%">100%</div>
</div>
</div>
</body>
</html>
演算法
步驟 1 - 在文字編輯器中建立 HTML 基本程式碼。
步驟 2 - 將上面給出的 Bootstrap CDN 連結新增到程式碼的 head 標籤中。
步驟 3 - 建立一個父 div 容器，其中包含頁面上的進度條。
步驟 4 - 建立一個類名為“.progress”的 div 容器，並向 div 標籤新增屬性，例如：role、aria-valuemin, aria-valuemax，其值分別為progressbar, 0 和 100。
<div class="progress rounded-pill my-2" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
步驟 5 - 現在在當前 progress 類 div 內，建立一個 div，它將包含帶有動畫的條紋進度，為此，請向父 progress div 的子 div 新增“progress-bar”、“progress-bar-striped”、“progress-bar-animated”類。
<div class="progress-bar progress-bar-striped bg-info progress-bar-animated" style="width: 50%"></div>
步驟 6 - 動畫進度條建立成功。
示例
在這個例子中，我們將構建一個帶有動畫的升級版進度條。進度條中的動畫可以透過頁面頂部提到的 Bootstrap 預定義類來實現。
<html>
<head>
<title>Progress Bar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<div class="pcontainer d-flex flex-column mx-auto justify-content-center" style="width: 80vw;height: 100vh;">
<h3 class="text-success fw-bold text-center bg-light rounded py-4 px-1">Striped animated progress bar</h3>
<div class="progress rounded-pill my-2" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 10%"></div>
</div>
<div class="progress rounded-pill my-2" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar progress-bar-striped bg-success progress-bar-animated" style="width: 25%"></div>
</div>
<div class="progress rounded-pill my-2" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar progress-bar-striped bg-info progress-bar-animated" style="width: 50%"></div>
</div>
<div class="progress rounded-pill my-2" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar progress-bar-striped bg-warning progress-bar-animated" style="width: 75%"></div>
</div>
<div class="progress rounded-pill my-2" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar progress-bar-striped bg-danger progress-bar-animated" style="width: 100%"></div>
</div>
</div>
</body>
</html>
結論
正如我們上面看到的兩個示例，一個包含基本進度條，另一個是動畫進度條。因此，動畫進度條使圖形使用者介面更具吸引力。透過使用動畫進度條，我們可以顯示不同顏色覆蓋的不同進度百分比。總的來說，進度條在必要時在我們的網站中使用是一個好習慣。
776 次檢視
