Bootstrap 4 - Bootstrap Breadcrumbs

Tạo Breadcrumb trong Bootstrap

Trong bài học Bootstrap trước hiepsiit.com đã hướng dẫn bạn cách tạo thanh điều hướng trong Bootstrap. Trong bài học tiếp theo dưới đây hiepsiit.com sẽ hướng dẫn tiếp cho bạn cách tạo Breadcrumb trong Bootstrap.

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.

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:

<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>

Xem ví dụ

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:

  <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>

Xem ví dụ

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.