什麼是Bootstrap5進度條？¶
進度條是網頁中展示任務完成度的常用組件，Bootstrap5的進度條組件不僅內置了基礎樣式，還支持響應式佈局、顏色定製、動畫效果等，能快速滿足各種進度展示需求，無需從零編寫CSS。
一、基礎用法：最簡單的進度條¶
Bootstrap5進度條的核心結構由兩個嵌套的div組成：外層是 .progress 容器，內層是 .progress-bar （進度條主體）。只需設置 .progress-bar 的寬度，即可顯示進度。
示例代碼：
<div class="progress">
<div class="progress-bar" style="width: 60%"></div>
</div>
解釋：
- .progress：外層容器，默認設置了背景色和固定高度，確保進度條整體外觀統一。
- .progress-bar：內層進度條，必須通過 width 屬性或工具類設置進度比例（如 60% 表示完成60%）。
二、顏色定製：給進度條換“皮膚”¶
Bootstrap5提供了豐富的背景色類，可直接給 .progress-bar 添加類名（如 bg-primary、bg-success 等）快速改變進度條顏色。
示例代碼：
<!-- 成功色進度條 -->
<div class="progress">
<div class="progress-bar bg-success" style="width: 30%"></div>
</div>
<!-- 警告色進度條 -->
<div class="progress">
<div class="progress-bar bg-warning" style="width: 75%"></div>
</div>
常用顏色類：
- bg-primary（主色）、bg-success（成功）、bg-info（信息）、bg-danger（危險）、bg-warning（警告）等。
- 也可通過 style="background-color: 自定義顏色;" 自定義顏色（如 style="background-color: #ff6347;"）。
三、調整高度：控制進度條顯高/顯矮¶
進度條的高度可通過工具類或直接設置 height 樣式調整，默認高度較小（約0.5rem），適合緊湊佈局；若需更粗的進度條，可自定義高度。
示例代碼：
<!-- 使用Bootstrap高度工具類（h-2=0.5rem，h-3=0.75rem等） -->
<div class="progress h-2">
<div class="progress-bar bg-primary" style="width: 50%"></div>
</div>
<!-- 直接設置高度（如20px） -->
<div class="progress" style="height: 20px;">
<div class="progress-bar bg-info" style="width: 80%"></div>
</div>
四、條紋效果：增加視覺層次感¶
通過 .progress-bar-striped 類可給進度條添加橫向條紋，配合 .bg-gradient 還能實現漸變條紋，讓進度更直觀。
示例代碼：
<!-- 基礎條紋效果 -->
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 40%"></div>
</div>
<!-- 漸變條紋效果 -->
<div class="progress">
<div class="progress-bar progress-bar-striped bg-gradient" style="width: 65%"></div>
</div>
五、動態動畫：進度條“動起來”¶
若需進度條自動加載（如模擬文件下載），可通過 .progress-bar-animated 類實現靜態動畫，或結合JS動態更新進度。
靜態動畫（無需JS）：
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 0%"></div>
</div>
解釋：.progress-bar-animated 會讓條紋背景從左向右“流動”，模擬進度加載過程。
動態進度（需JS）：
若需點擊按鈕後更新進度，可通過JS修改 .progress-bar 的 width 值。例如：
<div class="progress">
<div class="progress-bar" id="myProgress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
</div>
<button onclick="updateProgress()">加載進度</button>
<script>
function updateProgress() {
const bar = document.getElementById('myProgress');
let width = 0;
const interval = setInterval(() => {
width += 1;
bar.style.width = `${width}%`;
bar.setAttribute('aria-valuenow', width);
if (width >= 100) clearInterval(interval);
}, 30);
}
</script>
六、堆疊進度條：多任務進度同時展示¶
若需同時展示多個任務的進度（如“已完成50%+未完成30%”），可將多個 .progress-bar 放入同一個 .progress 容器內，實現水平堆疊效果。
示例代碼：
<div class="progress">
<div class="progress-bar bg-primary" style="width: 50%"></div>
<div class="progress-bar bg-success" style="width: 30%"></div>
<div class="progress-bar bg-warning" style="width: 20%"></div>
</div>
七、可訪問性優化：讓進度條更友好¶
爲了屏幕閱讀器能識別進度條數值，需添加 aria-valuenow（當前進度值）、aria-valuemin（最小值）、aria-valuemax（最大值）屬性：
示例代碼：
<div class="progress">
<div class="progress-bar bg-info"
style="width: 70%"
role="progressbar"
aria-valuenow="70"
aria-valuemin="0"
aria-valuemax="100">
70% 完成
</div>
</div>
總結¶
Bootstrap5進度條通過簡單的類名和工具類即可實現多種效果，核心要點如下：
- 基礎結構：.progress（容器）+ .progress-bar（進度條）。
- 顏色定製：直接添加 bg-* 類。
- 樣式擴展：高度（h-* 工具類）、條紋（progress-bar-striped）、動畫（progress-bar-animated）。
- 動態進度：配合JS修改 width 或使用動畫類。
通過以上方法，即可快速在網頁中實現直觀、美觀的進度展示效果，提升用戶體驗。