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