Bootstrap 5 進度條
基本進度條
進度條可用於顯示使用者在某個過程中的進度。
要建立預設的進度條，請在容器元素中新增 .progress 類，併為其子元素新增 .progress-bar 類。使用 CSS width 屬性來設定進度條的寬度。
進度條高度
進度條的高度預設是 1rem（通常是 16px）。使用 CSS height 屬性來更改它。
示例
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;"></div>
</div>
自己動手試一試 »
進度條標籤
在進度條內部新增文字以顯示可見的百分比。
彩色進度條
預設情況下，進度條是藍色的（主要顏色）。使用任何上下文背景類來更改其顏色。
示例
<!-- 藍色 -->
<div class="progress">
<div class="progress-bar" style="width:10%"></div>
</div>
<!-- 綠色 -->
<div class="progress">
<div class="progress-bar bg-success" style="width:20%"></div>
</div>
<!-- 青綠色 -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- 橙色 -->
<div class="progress">
<div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<!-- 紅色 -->
<div class="progress">
<div class="progress-bar bg-danger" style="width:50%"></div>
</div>
<!-- 白色 -->
<div class="progress border">
<div class="progress-bar bg-white" style="width:60%"></div>
</div>
<!-- 灰色 -->
<div class="progress">
<div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<!-- 淺灰色 -->
<div class="progress border">
<div class="progress-bar bg-light" style="width:80%"></div>
</div>
<!-- 深灰色 -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
自己動手試一試 »
條紋進度條
使用 .progress-bar-striped 類為進度條新增條紋。
示例
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>
自己動手試一試 »
動畫進度條
新增 .progress-bar-animated 類以動畫化進度條。
示例
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
自己動手試一試 »
多個進度條
進度條也可以堆疊
示例
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
免費空間
</div>
<div class="progress-bar bg-warning" style="width:10%">
警告
</div>
<div class="progress-bar bg-danger" style="width:20%">
危險
</div>
</div>
自己動手試一試 »
