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 .progressnhư 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-barcầ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-barcũng yêu cầu một số rolevà ariathuộ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.
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.
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.
25%
Chiều cao
Chúng tôi chỉ đặt một heightgiá trị trên .progress, vì vậy nếu bạn thay đổi giá trị đó, bên trong .progress-barsẽ tự động thay đổi kích thước cho phù hợp.
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ẻ.
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.
Sọc
Thêm .progress-bar-stripedvà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.
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-bartạo hoạt ảnh cho các sọc từ phải sang trái thông qua hoạt ảnh CSS3.