Bootstrap Breadcrumb

Trong hướng dẫn này, bạn sẽ học cách tạo Breadcrumb với Bootstrap.

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:

Tạo Breadcrumb với Bootstrap

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:

Tạo Breadcrumb với Bootstrap
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ính content.
BootstrapBootstrap Cơ Bản
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

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.

Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

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.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.