Tự học Bootstrap - Cơ bản - bài 13 - Thanh phần trăm tiến trình

Thanh tiến trình cơ bản

01 thanh tiến trình có thể dùng để cho thấy 01 người dùng có thể mất bao lâu để hoàn tất 01 tiến trình.

Bootstrap cung cấp 01 loạt các thanh tiến trình.

01 thanh tiến trình trong Bootstrap trông như thế này:

Để tạo 01 thanh tiến trình mặc định, ta thêm 01 khai báo lớp .progress cho 01 thẻ <div>

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

Ghi chú: thanh tiến trình không được hỗ trợ trong Internet Explorer 9 và and earlier (bởi vì chúng dùng hiệu ứng động trong CSS3).

Ghi chú: để giúp tăng tính chính xác cho người dùng , bạn nên thêm tiền tố vào thuộc tính aria-*

---

Progress Bar With Label

01 thanh tiến trình với nhãn chữ trông giống như thế này:

Xóa khai báo lớp .sr-only trong khai báo thanh tiến trình để hiển thị dấu %.

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

---

Định dạng màu cho thanh tiến trình

Các lớp ngữ cảnh sau sẽ "định nghĩa màu" cho thanh tiến trình.

Các lớp ngữ cảnh có thể 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 hiển thị cách tạo 01 thanh tiến trình với các lớp ngữ cảnh khác nhau.

<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 sọc vằn

Thêm lớp .progress-bar-striped để thêm định dạng sọc vằn cho thanh tiến trình.

<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 "động"

Thêm lớp .active để làm "động" thanh tiến trình.

<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 chia đoạn

Để tạo 01 thanh tiến trình chia nhiều đoạn ta tạo nhiều thanh trong cùng 01 lớp <div class="progress">:

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

Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48