Tiến triển
Tài liệu và ví dụ để sử dụng thanh tiến trình tùy chỉnh Bootstrap có hỗ trợ cho các thanh xếp chồng lên nhau, hình nền động và nhãn văn bản.
Làm thế nào nó hoạt động
Các thành phần tiến trình được xây dựng bằng hai phần tử HTML, một số CSS để đặt chiều rộng và một vài thuộc tính. Chúng tôi không sử dụng phần tử HTML5<progress>
, đảm bảo bạn có thể xếp chồng các thanh tiến trình, tạo hiệu ứng cho chúng và đặt nhãn văn bản lên chúng.
- Chúng tôi sử dụng
.progress
như một trình bao bọc để chỉ ra giá trị tối đa của thanh tiến trình. - Chúng tôi sử dụng bên trong
.progress-bar
để chỉ ra sự tiến bộ cho đến nay. - Yêu
.progress-bar
cầu kiểu nội tuyến, lớp tiện ích hoặc CSS tùy chỉnh để đặt chiều rộng của chúng. - Nó
.progress-bar
cũng yêu cầu một sốrole
vàaria
thuộc tính để làm cho nó có thể truy cập được.
Đặt tất cả lại với nhau, và bạn có các ví dụ sau.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Bootstrap cung cấp một số tiện ích để thiết lập chiều rộng . Tùy thuộc vào nhu cầu của bạn, những điều này có thể giúp tiến trình cấu hình nhanh chóng.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Nhãn
Thêm nhãn vào thanh tiến trình của bạn bằng cách đặt văn bản trong .progress-bar
.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
Chiều cao
Chúng tôi chỉ đặt một height
giá trị trên .progress
, vì vậy nếu bạn thay đổi giá trị đó, bên trong .progress-bar
sẽ tự động thay đổi kích thước cho phù hợp.
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Tầng lớp
Sử dụng các lớp tiện ích nền để thay đổi giao diện của các thanh tiến trình riêng lẻ.
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Nhiều thanh
Bao gồm nhiều thanh tiến trình trong một thành phần tiến trình nếu bạn cần.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Sọc
Thêm .progress-bar-striped
vào bất kỳ .progress-bar
để áp dụng một sọc thông qua CSS gradient trên màu nền của thanh tiến trình.
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Sọc hoạt hình
Gradient sọc cũng có thể được làm động. Thêm vào .progress-bar-animated
để .progress-bar
tạo hoạt ảnh cho các sọc từ phải sang trái thông qua hoạt ảnh CSS3.
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>