Thanh tiến trình Bootstrap 4
Thanh tiến trình cơ bản
Thanh tiến trình có thể được sử dụng để hiển thị cho người dùng biết họ đã tiến được bao xa trong một quy trình.
Để tạo thanh tiến trình mặc định, hãy thêm lớp .progress
vào phần tử vùng chứa và thêm lớp .progress-bar
vào phần tử con của nó. Sử dụng thuộc tính CSS width
để đặt độ rộng của thanh tiến trình:
Ví dụ
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
Hãy tự mình thử »Chiều cao thanh tiến trình
Chiều cao của thanh tiến trình theo mặc định là 16px. Sử dụng thuộc tính height
CSS để thay đổi nó. Lưu ý rằng bạn phải đặt cùng chiều cao cho vùng chứa tiến trình và thanh tiến trình:
Ví dụ
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
Hãy tự mình thử »Nhãn thanh tiến trình
Thêm văn bản bên trong thanh tiến trình để hiển thị phần trăm hiển thị:
Ví dụ
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
Hãy tự mình thử » Thanh tiến trình màu
Theo mặc định, thanh tiến trình có màu xanh lam (chính). Sử dụng bất kỳ lớp nền theo ngữ cảnh nào của Bootstrap 4 để thay đổi màu của nó:
Ví dụ
<!-- 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>
Hãy tự mình thử »Thanh tiến trình sọc
Sử dụng lớp .progress-bar-striped
để thêm sọc vào thanh tiến trình:
Ví dụ
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>
Hãy tự mình thử »Thanh tiến trình hoạt hình
Thêm lớp .progress-bar-animated
để tạo hiệu ứng cho thanh tiến trình:
Ví dụ
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
Hãy tự mình thử »Nhiều thanh tiến trình
Thanh tiến trình cũng có thể được xếp chồng lên nhau:
Ví dụ
<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>
Hãy tự mình thử »