Trên nền tảng Bootstrap, việc tạo thanh tiến trình không chỉ đơn giản mà còn mang tính linh hoạt cao để phù hợp với mọi thiết kế giao diện. Nó là một công cụ mạnh mẽ giúp hiển thị tiến độ của các quá trình và tác vụ trên giao diện người dùng một cách rõ ràng và dễ dàng nhận biết. Tiếp tục nối series hành trang cho bạn đọc tìm hiểu về Boostrap, bài viết ngày hôm nay CNET sẽ hướng dẫn chi tiết cách sử dụng thành phần Progress trong Bootstrap để tạo ra những thanh tiến trình đa dạng, từ đơn giản đến phức tạp, đồng thời cung cấp các ví dụ minh họa để bạn có thể áp dụng ngay vào dự án của mình.
1.Khám phá thanh tiến trình cơ bản
Thanh tiến trình có thể được sử dụng để hiển thị mức độ tiến triển của người dùng trong một quy trình.
Tùy thuộc vào mục đích sử dụng thanh tiến trình, sử dụng để cung cấp thông tin trực quan về tiến độ của các tác vụ như tải dữ liệu, xử lý dữ liệu hay bất kỳ hoạt động nào mất một khoảng thời gian đáng kể để hoàn thành, ta đều có thể sử dụng thanh tiến trình để biểu thị tác vụ đó.
2.Cách tạo và sử dụng thanh tiến trình
Để sử dụng thanh tiến trình cơ bản của Bootstrap, bạn đọc hãy theo dõi từng bước sau của CNET chia sẻ cùng với ví dụ đi kèm để hiểu về cách sử dụng thanh tiến trình của Bootstrap:
B1: Đầu tiên cần phải có bao gồm tệp CSS và JavaScript của Bootstrap vào trong trang HTML. Bạn có thể sử dụng phiên bản được lưu trữ cục bộ của Bootstrap hoặc sử dụng liên kết CDN (nếu chưa biết bạn có thể tham khảo bài viết Giới thiệu Bootstrap cho người mới bắt đầu để biết về cài đặt Boostrap vào trang HTML)
B2: Tạo một thanh tiến trình: Sử dụng class .progress và các class liên quan trong Bootstrap để tạo ra một thanh tiến trình.
Trong đó :
- Class .progress là container chứa thanh tiến trình.
- Class .progress-bar đại diện cho phần tiến trình thực sự. Thuộc tính style="width: 70%;" xác định phần trăm tiến trình đã hoàn thành ( 70%).
Kết quả hiển thị sẽ như sau:
3.Tùy chỉnh thanh tiến trình của Bootstrap
Ngoài việc sử dụng thanh tiến trình đơn giản thông thường, để thanh tiến trình có thể bắt mắt, dễ nhìn, Bootstrap cung cấp hàng loạt các lớp để thay đổi màu sắc, độ rộng và thêm văn bản bên tron, giúp các lập trình viên có thể thiết kế giao diện phù hợp với nhu cầu thiết kế và trải nghiệm người dùng của.
Một số ví dụ cho việc tùy chỉnh bạn có thể tham khảo bên dưới đây;
- Thay đổi màu sắc thanh tiến trình: Sử dụng class bg-* trong .progress-bar. Ví dụ: bg-success, bg-info, bg-warning, bg-danger:
- Thay đổi độ rộng và chiều cao thanh tiến trình: Thay đổi giá trị của thuộc tính style="width: ...",style="height: ...".
- Sử dụng lớp .progress-bar-striped để thêm sọc vào thanh tiến trình:
- Một cách dùng khá phổ biển của thanh tiến trình nữa, đó là sử dụng nhiều thanh tiến trình, chúng có thể biểu diễn xếp chồng lên nhau.
Tạo một thanh tiến trình xếp chồng lên nhau bằng cách đặt nhiều thanh vào cùng một div với class="progress".
Hy vọng rằng hướng dẫn này của CNET sẽ giúp bạn nắm được cách sử dụng và tùy chỉnh thanh tiến trình trong Bootstrap một cách hiệu quả. Hãy áp dụng nó vào dự án của bạn để cải thiện trải nghiệm người dùng và đảm bảo rằng các tác vụ của bạn được thực hiện một cách trơn tru và hiệu quả nhất.
Tham khảo về KHÓA HỌC LẬP TRÌNH WEB FULL-STACK tại Học viện công nghệ CNET
