Bootstrap - Thanh tiến trình

Chương này thảo luận về các thanh tiến trình Bootstrap. Mục đích của thanh tiến trình là để hiển thị rằng nội dung đang tải, đang được xử lý hoặc có hành động đang diễn ra liên quan đến các phần tử trên trang.

Thanh tiến trình sử dụng chuyển tiếp CSS3 và hoạt ảnh để đạt được một số hiệu ứng của chúng. Các tính năng này không được hỗ trợ trong Internet Explorer 9 trở xuống hoặc các phiên bản Firefox cũ hơn. Opera 12 không hỗ trợ hoạt ảnh.

Thanh tiến trình mặc định

Để tạo một thanh tiến trình cơ bản -

Thêm một <div> với một lớp .progress.
Tiếp theo, bên trong <div> ở trên, thêm một <div> trống với một lớp .progress-bar.
Thêm thuộc tính kiểu với chiều rộng được biểu thị dưới dạng phần trăm. Ví dụ: style = "60%"; cho biết rằng thanh tiến trình ở mức 60%.

Hãy cho chúng tôi xem một ví dụ bên dưới -

<div class = "progress">
   <div class = "progress-bar" role = "progressbar" aria-valuenow = "60" 
      aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Thanh tiến trình thay thế

Để tạo thanh tiến trình với các kiểu khác nhau -

Thêm một <div> với một lớp .progress.
Tiếp theo, bên trong <div> ở trên, thêm một <div> trống với một lớp .progress-bar và lớp học progress-bar-* * có thể ở đâu success, info, warning, danger.
Thêm thuộc tính kiểu với chiều rộng được biểu thị dưới dạng phần trăm. Ví dụ: style = "60%"; cho biết rằng thanh tiến trình ở mức 60%.

Hãy cho chúng tôi xem một ví dụ bên dưới -

<div class = "progress">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </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: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

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

Để tạo thanh tiến trình sọc -

Thêm một <div> với một lớp .progress và .progress-striped.
Tiếp theo, bên trong <div> ở trên, thêm một <div> trống với một lớp .progress-bar và lớp học progress-bar-* * có thể ở đâu success, info, warning, danger.
Thêm thuộc tính kiểu với chiều rộng được biểu thị dưới dạng phần trăm. Ví dụ: style = "60%"; cho biết rằng thanh tiến trình ở mức 60%.

Hãy cho chúng tôi xem một ví dụ bên dưới -

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-info" role = "progressbar"
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

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

Để tạo một thanh tiến trình động -

Thêm một <div> với một lớp .progress và .progress-striped. Cũng thêm lớp.active đến .progress-striped.
Tiếp theo, bên trong <div> ở trên, thêm một <div> trống với một lớp .progress-bar.
Thêm thuộc tính kiểu với chiều rộng được biểu thị dưới dạng phần trăm. Ví dụ: style = "60%"; cho biết rằng thanh tiến trình ở mức 60%.

Thao tác này sẽ làm sinh động các sọc từ phải sang trái.

Hãy cho chúng tôi xem một ví dụ bên dưới -

<div class = "progress progress-striped active">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

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

Bạn thậm chí có thể xếp chồng nhiều thanh tiến trình. Đặt nhiều thanh tiến trình vào cùng một.progress để xếp chúng như được thấy trong ví dụ sau:

<div class = "progress">
   
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
   
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
   
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
   
</div>