Thanh Tiến Trình trong Bootstrap: Ý nghĩa và Hướng Dẫn Sử Dụng

Trong bài học Bootstrap trước đó, Mytour đã hướng dẫn cách tạo Badge trong Bootstrap. Trong bài học này, chúng tôi sẽ tiếp tục giới thiệu về Thanh Tiến Trình trong Bootstrap.

Thanh Tiến Trình trong Bootstrap

1. Tạo Progress Bar trong Bootstrap

Thanh Tiến Trình (Progress Bar) trong Bootstrap được dùng để hiển thị tiến trình của một tác vụ hoặc hành động cho người dùng.

Ví dụ: Dưới đây là minh họa cách tạo một thanh tiến trình đơn giản trong Bootstrap:

Dưới đây là kết quả mong đợi:

2. Tạo thanh tiến trình với các nhãn

Để hiển thị trạng thái của thanh tiến trình dưới dạng phần trăm, chúng ta chỉ cần sử dụng lớp .sr-only để ẩn span trong thanh tiến trình, như trong ví dụ sau đây:

Dưới đây là kết quả bạn sẽ thu được:

Lưu ý: khi hiển thị nhãn phần trăm, nên áp dụng min-width cho thanh tiến trình để đảm bảo nhãn vẫn hiển thị ngay cả khi tỷ lệ phần trăm thấp, như trong ví dụ dưới đây:

Dưới đây là kết quả bạn sẽ thu được:

3. Thiết lập chiều cao cho thanh tiến trình

Mặc định chiều cao của thanh tiến trình (progress bar) là 16px, tuy nhiên, nếu muốn, bạn có thể thiết lập chiều cao bất kỳ bằng cách sử dụng thuộc tính CSS height trên phần tử .progress.

Ví dụ: dưới đây là một ví dụ minh họa về cách thiết lập chiều cao cho thanh tiến trình:

Dưới đây là kết quả bạn sẽ nhận được:

4. Tạo thanh tiến trình có vạch sọc

Để tạo thanh tiến trình có vạch sọc, chỉ cần thêm lớp .progress-bar-striped cho phần tử .progress-bar.

Ví dụ: trong ví dụ này, chúng ta sẽ tạo một thanh tiến trình có hiệu ứng động:

Dưới đây là kết quả bạn sẽ nhìn thấy:

5. Tạo thanh tiến trình động

Để tạo thanh tiến trình động, chúng ta chỉ cần thêm lớp .progress-bar-animated vào phần tử .progress-bar, như trong ví dụ dưới đây:

Dưới đây là kết quả bạn sẽ nhìn thấy:

6. Cập nhật giá trị hiển thị trong thanh tiến trình

Trong ví dụ sau đây, chúng ta sẽ minh họa cách cập nhật giá trị hiển thị trong thanh tiến trình trong Bootstrap bằng jQuery:

Dưới đây là kết quả bạn sẽ nhìn thấy:

7. Tạo thanh tiến trình xếp chồng

Ngoài ra, có thể xếp chồng nhiều thanh khác nhau trong cùng một thanh tiến trình, như minh họa dưới đây:

Dưới đây là kết quả bạn sẽ nhìn thấy:

8. Tạo thanh tiến trình với các lớp nhấn mạnh

Bootstrap cung cấp nhiều lớp nhấn mạnh hữu ích dành cho thanh tiến trình, giúp truyền đạt thông điệp qua các màu sắc đa dạng. Bạn có thể tham khảo ví dụ dưới đây:

Dưới đây là kết quả bạn sẽ thu được:

9. Tạo thanh tiến trình có vạch sọc và lớp nhấn mạnh

Tương tự, chúng ta có thể tạo thanh tiến trình với các lớp nhấn mạnh và vạch sọc khác nhau, như minh họa dưới đây:

Dưới đây là kết quả bạn sẽ nhận được:

Bài học này của Mytour đã hướng dẫn cách tạo Progress Bar trong Bootstrap. Nếu có câu hỏi hoặc thắc mắc, bạn đọc có thể chia sẻ ý kiến của mình trong phần bình luận dưới bài viết. Bài học tiếp theo sẽ giới thiệu về Badge trong Bootstrap.