Bootstrap進度條
阿新 • • 發佈:2019-02-02
基本結構
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
預設的進度條:
建立一個基本的進度條的步驟如下:
(1)新增一個帶有 .progress 的 <div>
(2)在上面的
<div>
內,新增一個帶有 .progress-bar 的空的 <div>
。 (3)新增一個帶有百分比表示的寬度的 style 屬性,例如 style=”60%”; 表示進度條在 60% 的位置。
建立不同樣式的進度條:
(1)新增一個帶有 class .progress 的 <div>
。
(2)接著,在上面的 <div>
內,新增一個帶有 .progress-bar 和 progress-bar- 的空的 <div>
。其中, 可以是 success、info、warning、danger。
(3)新增一個帶有百分比表示的寬度的 style 屬性,例如 style=”60%”; 表示進度條在 60% 的位置。
建立一個條紋的進度條:
(1)新增一個帶有 class .progress 和 .progress-striped 的 <div>
。
(2)在上面的 <div>
內,新增一個帶有 .progress-bar 和 progress-bar-* 的空的 <div>
。其中,* 可以是 success、info、warning、danger。
(3)新增一個帶有百分比表示的寬度的 style 屬性,例如 style=”60%”; 表示進度條在 60% 的位置。
建立一個動畫的進度條:
(1)新增一個帶有 class .progress 和 .progress-striped 的 <div>
(2)接著,在上面的
<div>
內,新增一個帶有 .progress-bar 的空的 <div>
。 (3)新增一個帶有百分比表示的寬度的 style 屬性,例如 style=”60%”; 表示進度條在 60% 的位置。
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 40%;">
<span class="sr-only">40% 完成</span>
</div>
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
<span class="sr-only">30% 完成(資訊)</span>
</div>
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 20%;">
<span class="sr-only">20% 完成(警告)</span>
</div>
</div>