Bootstrap 進度條
基本進度條
進度條可用於告知使用者他們在一個過程中的進度。
Bootstrap 提供了幾種型別的進度條。
Bootstrap 中的預設進度條如下所示
要建立預設進度條，請將 `.progress` 類新增到 `
` 元素中
示例
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">完成 70%</span>
</div>
</div>
自己動手試一試 »
注意: 進度條在 Internet Explorer 9 及更早版本中不受支援（因為它們使用 CSS3 過渡和動畫來實現部分效果）。
注意: 為了幫助提高螢幕閱讀器使用者的可訪問性，您應該包含 aria-* 屬性。
帶標籤的進度條
帶標籤的進度條如下所示
從進度條中移除 `.sr-only` 類以顯示可見的百分比
示例
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
自己動手試一試 »
彩色進度條
上下文類用於提供“色彩含義”。
可用於進度條的上下文類是
.progress-bar-success.progress-bar-info.progress-bar-warning.progress-bar-danger
以下示例顯示瞭如何使用不同的上下文類建立進度條
示例
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:40%">
完成 40% (成功)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
完成 50% (資訊)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
完成 60% (警告)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
完成 70% (危險)
</div>
</div>
自己動手試一試 »
條紋進度條
進度條也可以是條紋狀的
新增 `.progress-bar-striped` 類可為進度條新增條紋
示例
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
完成 40% (成功)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
完成 50% (資訊)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
完成 60% (警告)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
完成 70% (危險)
</div>
</div>
自己動手試一試 »
動畫進度條
新增 `.active` 類可為進度條新增動畫
示例
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>
</div>
自己動手試一試 »
堆疊進度條
進度條也可以堆疊
透過將多個條放置在同一個 `
` 中來建立堆疊進度條
示例
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
免費空間
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
警告
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
危險
</div>
</div>
自己動手試一試 »
