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