Bootstrap - Hướng dẫn cơ bản về Breadcrumb

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới của Bootstrap breadcrumbs. Đừng lo lắng nếu bạn chưa từng nghe đến breadcrumb trước đây - đến cuối bài hướng dẫn này, bạn sẽ có thể tạo chúng như một chuyên gia! Hãy cùng bắt đầu hành trình thú vị này.

Bootstrap - Breadcrumb

Breadcrumb là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu breadcrumb là gì. Hãy tưởng tượng bạn đang khám phá một khu rừng rộng lớn (đó là cảm giác của internet đôi khi). Có phải sẽ tuyệt vời nếu có một dãy breadcrumb để giúp bạn tìm đường quay lại? Đó chính xác là điều breadcrumb làm trong thiết kế web!

Breadcrumb là một công cụ hỗ trợ định hướng, cho biết vị trí hiện tại của người dùng trong cấu trúc phân cấp của một trang web. Chúng thường được hiển thị như một hàng liên kết ở đỉnh trang, cho phép người dùng dễ dàng điều hướng trở lại các trang cấp cao hơn.

Tại sao nên sử dụng Bootstrap Breadcrumbs?

Bootstrap, khung công tác CSS gần gũi của chúng ta, giúp tạo breadcrumb một cách dễ dàng. Nó cung cấp các thành phần đã được thiết kế sẵn mà chúng ta có thể dễ dàng tích hợp vào các trang web. Vậy thay vì tạo lại từ đầu, chúng ta có thể sử dụng breadcrumb sẵn có của Bootstrap và tùy chỉnh chúng theo ý muốn!

Bây giờ, hãy c rolled up our sleeves và bắt đầu viết mã!

Breadcrumb cơ bản

Bước 1: Cài đặt Bootstrap

Đầu tiên, chúng ta cần bao gồm Bootstrap trong tệp HTML của mình. Thêm các dòng sau trong phần <head> của HTML:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Điều này liên kết các tệp CSS và JavaScript của Bootstrap vào tài liệu của chúng ta.

Bước 2: Tạo Breadcrumb cơ bản

Bây giờ, hãy tạo breadcrumb đầu tiên của chúng ta! Dưới đây là cấu trúc cơ bản:

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Trang chủ</a></li>
<li class="breadcrumb-item"><a href="#">Thư viện</a></li>
<li class="breadcrumb-item active" aria-current="page">Dữ liệu</li>
</ol>
</nav>

Hãy phân tích này:

Chúng ta bao bọc breadcrumb trong một thẻ <nav> với aria-label="breadcrumb". Điều này cải thiện khả năng truy cập cho người dùng máy quét màn hình.
Thẻ <ol> với lớp breadcrumb tạo ra容器 cho breadcrumb.
Mỗi thẻ <li> đại diện cho một cấp độ trong hierachy của breadcrumb.
Lớp breadcrumb-item định dạng mỗi mục.
Mục cuối cùng có lớp active và aria-current="page" để chỉ định trang hiện tại.

Khi bạn xem điều này trong trình duyệt, bạn sẽ thấy một dãy breadcrumb gọn gàng: Trang chủ > Thư viện > Dữ liệu

Bước 3: Thêm liên kết

Để làm cho breadcrumb hoạt động, chúng ta cần thêm các liên kết chính xác. Hãy điều chỉnh mã của chúng ta:

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Trang chủ</a></li>
<li class="breadcrumb-item"><a href="library.html">Thư viện</a></li>
<li class="breadcrumb-item active" aria-current="page">Dữ liệu</li>
</ol>
</nav>

Bây giờ, nhấp vào "Trang chủ" sẽ đưa bạn đến index.html, và "Thư viện" đến library.html. Trang hiện tại ("Dữ liệu") không có liên kết vì đó là nơi chúng ta hiện tại.

Phân cách

Theo mặc định, Bootstrap sử dụng dấu gạch ngang (/) làm phân cách giữa các mục breadcrumb. Nhưng giả sử chúng ta muốn sáng tạo và sử dụng thứ khác? Hãy cùng xem cách tùy chỉnh phân cách của chúng ta!

Phân cách tùy chỉnh với CSS

Chúng ta có thể thay đổi phân cách bằng CSS. Dưới đây là cách thực hiện:

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Trang chủ</a></li>
<li class="breadcrumb-item"><a href="#">Thư viện</a></li>
<li class="breadcrumb-item active" aria-current="page">Dữ liệu</li>
</ol>
</nav>

Trong ví dụ này, chúng ta đã thay đổi phân cách thành dấu lớn hơn ">" symbol using the --bs-breadcrumb-divider CSS variable.

Sử dụng biểu tượng làm phân cách

Muốn sáng tạo hơn nữa? Hãy sử dụng biểu tượng làm phân cách! Chúng ta sẽ sử dụng Font Awesome icons cho ví dụ này:

<!-- Include Font Awesome in your HTML head -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<!-- Your breadcrumb HTML -->
<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Trang chủ</a></li>
<li class="breadcrumb-item">
<i class="fas fa-chevron-right"></i>
<a href="#">Thư viện</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
<i class="fas fa-chevron-right"></i>
Dữ liệu
</li>
</ol>
</nav>

Ở đây, chúng ta đã đặt --bs-breadcrumb-divider thành một chuỗi trống và手动 thêm biểu tượng mũi tên Font Awesome giữa các mục breadcrumb.

Cách tốt nhất khi sử dụng Breadcrumb

Bây giờ bạn đã biết cách tạo và tùy chỉnh breadcrumb, hãy nói về một số nguyên tắc tốt nhất:

Giữ cho nó đơn giản: Đừng bao gồm mọi trang trong dãy breadcrumb của bạn. Dính vào các danh mục chính.
Sử dụng các nhãn rõ ràng: Đảm bảo các nhãn breadcrumb của bạn ngắn gọn và mô tả.
Đừng sử dụng breadcrumb trên các trang đơn cấp: Chúng rất hữu ích cho các trang có cấu trúc phân cấp rõ ràng.
Đặt chúng ở đỉnh: Breadcrumb thường được đặt ở đỉnh trang, dưới phần导航 chính.

Kết luận

Chúc mừng! Bạn vừa học cách tạo và tùy chỉnh breadcrumb của Bootstrap. Từ việc triển khai cơ bản đến phân cách sáng tạo, bạn现在已经装备齐全 để hướng dẫn người dùng của mình thông qua trang web của bạn một cách.style.

Nhớ rằng breadcrumb giống như các biển báo trong rừng kỹ thuật số. Chúng giúp người dùng hiểu họ đang ở đâu và cách quay lại nơi họ đã từng. Sử dụng chúng khôn ngoan, và người dùng của bạn sẽ cảm ơn bạn vì đã làm cho hành trình của họ trên trang web của bạn một cách mượt mà!

Tiếp tục thực hành, tiếp tục khám phá, và quan trọng nhất, tiếp tục vui vẻ với việc phát triển web. Đến gặp lại lần sau, chúc các bạn viết mã vui vẻ!

Credits: Image by storyset