Bootstrap4 教程
Bootstrap4 進(jìn)度條
進(jìn)度條可以明確顯示用戶任務(wù)的完成進(jìn)度，是日常使用頻率非常高的一項(xiàng)功能。
創(chuàng)建一個(gè)基本的進(jìn)度條的步驟如下：
- 添加一個(gè)帶有 .progress 類的 <div>。
- 接著，在上面的 <div> 內(nèi)，添加一個(gè)帶有 class .progress-bar 的空的 <div>。
- 添加一個(gè)帶有百分比表示的寬度的 style 屬性，例如 style="width:70%" 表示進(jìn)度條在 70% 的位置。
實(shí)例
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
運(yùn)行代碼 ?
進(jìn)度條高度
進(jìn)度條高度默認(rèn)為 16px。我們可以使用 CSS 的 height 屬性來修改他：
實(shí)例
<div class="progress" style="height:20px;">
<div class="progress-bar" style="width:40%;"></div>
</div>
運(yùn)行代碼 ?
進(jìn)度條標(biāo)簽
可以在進(jìn)度條內(nèi)添加文本，如進(jìn)度的百分比，這樣可以讓用戶一眼就看出當(dāng)前任務(wù)的進(jìn)度：
實(shí)例
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
運(yùn)行代碼 ?
不同顏色的進(jìn)度條
默認(rèn)情況下進(jìn)度條為藍(lán)色，Bootstrap4 還提供了以下顏色的進(jìn)度條：
實(shí)例
<div class="progress">
<div class="progress-bar bg-success" style="width:40%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" style="width:50%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width:60%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width:70%"></div>
</div>
運(yùn)行代碼 ?
條紋的進(jìn)度條
可以使用 .progress-bar-striped 類來設(shè)置條紋進(jìn)度條：
實(shí)例
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>
運(yùn)行代碼 ?
動(dòng)畫進(jìn)度條
使用 .progress-bar-animated 類可以為進(jìn)度條添加動(dòng)畫：
實(shí)例
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div>
運(yùn)行代碼 ?
混合色彩進(jìn)度條
進(jìn)度條可以設(shè)置多種顏色：
實(shí)例
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger
</div>
</div>
運(yùn)行代碼 ?