Buzz
Breadcrumb là một phần của giao diện người dùng giúp người dùng biết được đang ở trang nào trong trang web hoặc ứng dụng. Hãy tham khảo bài viết dưới đây để hiểu rõ hơn về cách tạo Breadcrumb trong Bootstrap.
Hướng dẫn tạo Breadcrumb trong Bootstrap
Hướng dẫn tạo Breadcrumb trong Bootstrap
Như đã đề cập trước đó, Breadcrumb là một phần của giao diện người dùng giúp họ hiểu được đang ở đâu trên trang web hoặc ứng dụng hiện tại.
Để tạo Breadcrumb tĩnh trong Bootstrap, chúng ta chỉ cần sử dụng lớp .breadcrumb cho kiểu danh sách sắp xếp (ordered list), như ví dụ dưới đây:
Kết quả hiển thị như sau:
Trong Breadcrumb, dấu phân cách mặc định là /. Tuy nhiên, bạn có thể thay đổi dấu phân cách này bằng cách tùy chỉnh CSS.
Ví dụ: Dưới đây là cách chúng tôi sử dụng dấu > làm dấu phân cách thông qua việc áp dụng các quy tắc CSS sau:
Kết quả hiển thị sẽ như sau:
Mẹo: Dấu phân cách trong các thành phần Breadcrumb được thêm tự động thông qua pseudo-element ::before trong CSS và thuộc tính content.
Trong bài học này, Mytour đã chỉ cho bạn cách tạo Breadcrumb trong Bootstrap. Nếu quan tâm, bạn cũng có thể tham khảo các bài học khác về tạo biểu mẫu tùy chỉnh trong Bootstrap trên Mytour.
Trong bài học tiếp theo, Mytour sẽ giới thiệu cho bạn về Pagination trong Bootstrap.
