Hiểu nôm na Breadcrumb là menu điều hướng để người dùng có thể hình dung được vị trí trang web hoặc ứng dụng mà họ đang truy cập hiện tại. Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu cách tạo Breadcrumb trong Bootstrap.
Như đã đề cập ở trên, Breadcrumb là menu điều hướng để người dùng có thể hình dung được vị trí trang web hoặc ứng dụng mà họ truy cập hiện tại.
Để tạo bố cục Breadcrumb tĩnh bằng Bootstrap, chúng ta chỉ cần sử dụng lớp .breadcrumb trên kiểu danh sách sắp xếp (ordered list), như trong ví dụ dưới đây:
Kết quả đầu ra có dạng như dưới đây:
Dấu phân cách mặc định trong Breadcrumb là /. Tuy nhiên nếu muốn chúng ta có thể thay đổi dấu phân cách này bằng cách tùy chỉnh CSS.
Ví dụ: trong ví dụ dưới đây chúng ta sử dụng > làm dấu phân cách bằng cách áp dụng style rule dưới đây:
Kết quả đầu ra có dạng như dưới đây:
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.
Bài học trên đây Taimienphi.vn vừa hướng dẫn bạn cách tạo Breadcrumb trong Bootstrap. Ngoài ra bạn đọc có thể tham khảo thêm một số bài học Bootstrap khác đã có trên Taimienphi.vn để tìm hiểu thêm về cách tạo form (biểu mẫu) tùy chỉnh trong Bootstrap.
Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về Pagination trong Bootstrap.