Thanh tiến trình Bootstrap
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.
Bootstrap cung cấp một số loại thanh tiến trình.
Thanh tiến trình mặc định trong Bootstrap trông như thế này:
Để tạo thanh tiến trình mặc định, hãy thêm lớp .progress vào phần tử <div> :
Ví dụ
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div> Hãy tự mình thử » Lưu ý: Thanh tiến trình không được hỗ trợ trong Internet Explorer 9 trở về trước (vì chúng sử dụng chuyển tiếp và hoạt ảnh CSS3 để đạt được một số hiệu ứng).
Lưu ý: Để giúp cải thiện khả năng truy cập cho những người sử dụng trình đọc màn hình, bạn nên bao gồm các thuộc tính aria-*.
Thanh tiến trình có nhãn
Thanh tiến trình có nhãn trông như thế này:
Xóa lớp .sr-only khỏi thanh tiến trình để hiển thị tỷ lệ phần trăm hiển thị:
Ví dụ
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div> Hãy tự mình thử » Thanh tiến trình màu
Các lớp theo ngữ cảnh được sử dụng để cung cấp "ý nghĩa thông qua màu sắc".
Các lớp theo ngữ cảnh có thể được sử dụng với thanh tiến trình là:
-
.progress-bar-success -
.progress-bar-info -
.progress-bar-warning -
.progress-bar-danger
Ví dụ sau đây cho thấy cách tạo thanh tiến trình với các lớp ngữ cảnh khác nhau:
Ví dụ
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70% Complete (danger)
</div>
</div> Hãy tự mình thử »Thanh tiến trình sọc
Thanh tiến trình cũng có thể có sọc:
Thêm 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-success progress-bar-striped" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
70% Complete (danger)
</div>
</div> Hãy tự mình thử »Thanh tiến trình hoạt hình
Thêm lớp .active để tạo hiệu ứng cho thanh tiến trình:
Ví dụ
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>
</div> Hãy tự mình thử »Thanh tiến trình xếp chồng lên nhau
Thanh tiến trình cũng có thể được xếp chồng lên nhau:
Tạo một thanh tiến trình xếp chồng lên nhau bằng cách đặt nhiều thanh vào cùng một <div class="progress"> :
Ví dụ
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
Free Space
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
Warning
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
Danger
</div>
</div> Hãy tự mình thử » 