Trong hướng dẫn này, bạn sẽ học cách tạo Breadcrumb với Bootstrap.
Breadcrumb là một lược đồ điều hướng cho biết vị trí của trang hiện tại cho người dùng trong một trang web hoặc ứng dụng. Breadcrumb có thể nâng cao đáng kể khả năng truy cập của một trang web có số lượng trang lớn hoặc hệ thống phân cấp điều hướng phức tạp.
Bạn có thể tạo bố cục breadcrumbs tĩnh với Bootstrap đơn giản bằng cách sử dụng lớp .breadcrumb
trên danh sách có thứ tự, như được minh họa trong ví dụ sau:
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Products</a></li>
<li class="breadcrumb-item active">Accessories</li>
</ol>
</nav>
Kết quả của ví dụ trên sẽ giống như sau:
Dấu phân tách đường dẫn mặc định là /
. Tuy nhiên, bạn có thể thay đổi nó bằng một chút CSS tùy chỉnh, ví dụ: nếu bạn muốn sử dụng >
làm dấu phân tách, bạn có thể áp dụng như sau:
.breadcrumb-item + .breadcrumb-item::before {
content: ">";
}
Kết quả của ví dụ trên sẽ giống như sau:
Mẹo: Các dấu phân tách bên trong thành phần breadcrumb được thêm tự động qua CSS thông qua phần tử giả::before
và thuộc tínhcontent
.
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.
Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.
Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.
Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.