Thanh tiến trình Bootstrap

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ọ đã thực hiện được bao xa trong một quá trình.

Bootstrap cung cấp cho chúng ta một số loại thanh tiến trình cơ bản.

Thanh tiến trình mặc định trong Bootstrap có dạng như sau.

Để tạo thanh tiến trình mặc định, chúng ta thêm một lớp .progress vào một 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>

Xem kết quả

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ạo ra một số hiệu ứng của chúng).
Lưu ý: Để giúp cải thiện khả năng tiếp cận cho những người sử dụng trình đọc màn hình, chúng ta nên thêm các thuộc tính aria-*.

Thanh tiến trình có nhãn label

Thanh tiến trình có nhãn có dạng như sau.

70%

Chúng ta xóa lớp .sr-only khỏi thanh tiến trình để hiển thị tỷ lệ phần trăm hoàn thành.

Ví dụ

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
        70% Complete
    </div>
</div>

Xem kết quả

Thanh tiến trình màu

Các lớp ngữ cảnh được sử dụng để cung cấp "ý nghĩa thông qua màu sắc".

Các lớp 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

40% Complete (success)

50% Complete (info)

60% Complete (warning)

70% Complete (danger)

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>

Xem kết quả

Thanh tiến trình có sọc

Cá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>

Xem kết quả

Thanh tiến trình hoạt ả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-success progress-bar-striped active" role="progressbar" 
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
        40% Complete (success)
    </div>
</div>

Xem kết quả

Thanh tiến trình xếp chồng lên nhau

Các thanh tiến trình cũng có thể được xếp chồng lên nhau.

Free Space

Warning

Danger

Tạo 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" aria-valuenow="40" 
aria-valuemin="0" aria-valuemax="100" style="width:40%">Free Space
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="10" 
aria-valuemin="0" aria-valuemax="100" style="width:10%">Warning
    </div>
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" 
aria-valuemin="0" aria-valuemax="100" style="width:20%">Danger
    </div>
</div>