HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Thanh tiến trình Bootstrap

❮ Trước Kế tiếp ❯

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.

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:

70% hoàn thành

Để tạo thanh tiến trình mặc định, hãy thêm một .progresslớp vào một <div>phần tử:

Thí 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>

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 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, 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:

70%

Xóa .sr-onlylớp khỏi thanh tiến trình để hiển thị tỷ lệ phần trăm hiển thị:

Thí 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>

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% Hoàn thành (thành công)
Hoàn thành 50% (thông tin)
Hoàn thành 60% (cảnh báo)
70% Hoàn thành (nguy hiểm)

Ví dụ sau cho thấy cách tạo thanh tiến trình với các lớp ngữ cảnh khác nhau:

Thí 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>

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

Các thanh tiến trình cũng có thể có sọc:

40% Hoàn thành (thành công)
Hoàn thành 50% (thông tin)
Hoàn thành 60% (cảnh báo)
70% Hoàn thành (nguy hiểm)

Thêm lớp .progress-bar-stripedđể thêm sọc vào thanh tiến trình:

Thí 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>

Thanh tiến trình hoạt ảnh

40%

Thêm lớp .activeđể tạo hiệu ứng cho thanh tiến trình:

Thí 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>

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:

Không gian trông
Cảnh báo
Sự nguy hiểm

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">:

Thí 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>

Kiểm tra bản thân với các bài tập

Bài tập:

Thêm các lớp chính xác để làm cho mã HTML này hoạt động như một thanh tiến trình.

<div class="">
  <div class=""
    role="progressbar"
    style="width:70%">
  </div>
</div>


❮ Trước Kế tiếp ❯