Bootstrap 4 แถบความคืบหน้า
แถบความคืบหน้าขั้นพื้นฐาน
แถบความคืบหน้าสามารถใช้เพื่อแสดงให้ผู้ใช้เห็นว่าเขา/เธออยู่ในกระบวนการไกลแค่ไหน
ในการสร้างแถบความคืบหน้าเริ่มต้น ให้เพิ่ม.progressคลาสไปยังองค์ประกอบคอนเทนเนอร์และเพิ่ม.progress-barคลาสไปยังองค์ประกอบย่อย ใช้คุณสมบัติ CSS widthเพื่อกำหนดความกว้างของแถบความคืบหน้า:
ตัวอย่าง
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
ความสูงของแถบความคืบหน้า
ความสูงของแถบความคืบหน้าคือ 16px โดยค่าเริ่มต้น ใช้คุณสมบัติ CSS heightเพื่อเปลี่ยน โปรดทราบว่าคุณต้องตั้งค่าความสูงเท่ากันสำหรับคอนเทนเนอร์ความคืบหน้าและแถบความคืบหน้า:
ตัวอย่าง
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
ป้ายแถบความคืบหน้า
เพิ่มข้อความในแถบความคืบหน้าเพื่อแสดงเปอร์เซ็นต์ที่มองเห็นได้:
ตัวอย่าง
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
แถบความคืบหน้าสี
ตามค่าเริ่มต้น แถบความคืบหน้าจะเป็นสีน้ำเงิน (หลัก) ใช้คลาสพื้นหลังตามบริบทของ Bootstrap 4 เพื่อเปลี่ยนสี:
ตัวอย่าง
<!-- Blue -->
<div class="progress">
<div class="progress-bar"
style="width:10%"></div>
</div>
<!-- Green -->
<div
class="progress">
<div
class="progress-bar bg-success" style="width:20%"></div>
</div>
<!--
Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning"
style="width:40%"></div>
</div>
<!-- Red -->
<div
class="progress">
<div class="progress-bar bg-danger"
style="width:50%"></div>
</div>
<!-- White -->
<div
class="progress border">
<div
class="progress-bar bg-white" style="width:60%"></div>
</div>
<!--
Grey -->
<div class="progress">
<div class="progress-bar bg-secondary"
style="width:70%"></div>
</div>
<!-- Light Grey -->
<div
class="progress border">
<div class="progress-bar bg-light"
style="width:80%"></div>
</div>
<!--
Dark Grey -->
<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%">
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>