Bootstrap - Breadcrumbs Demo

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 kỳ diệu của Bootstrap breadcrumbs. Là người thầy thân thiện trong khu phố, tôi rất vui mừng được hướng dẫn các bạn trong hành trình này. Hãy lấy một tách cà phê (hoặc đồ uống yêu thích của bạn) và bắt đầu nhé!

Breadcrumb là gì?

Trước khi chúng ta vào phần mã, hãy hiểu breadcrumb là gì. Nhớ câu chuyện về Hansel và Gretel? Họ để lại một dấu vết từ bánh mì để tìm đường trở về nhà. Well, các nhà phát triển web đã vay mượn ý tưởng này!

Trong thiết kế web, breadcrumb là một công cụ导航 giúp người dùng biết vị trí hiện tại của họ trong cấu trúc của website. Đó như một dấu vết số hóa giúp người dùng hiểu họ đang ở đâu và cách để quay lại các trang trước. Thật tuyệt vời phải không?

Tại sao sử dụng breadcrumb?

Cải thiện导航
Tăng trải nghiệm người dùng
Giảm tỷ lệ thoát trang
Lợi ích SEO

Bây giờ chúng ta đã biết breadcrumb là gì, hãy xem Bootstrap giúp chúng ta triển khai chúng như thế nào!

Bootstrap Breadcrumbs: Cơ bản

Bootstrap, khung công tác front-end đáng tin cậy của chúng ta, cung cấp một cách đơn giản để tạo breadcrumb. Hãy bắt đầu với một ví dụ cơ bản:

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Trang chủ</li>
</ol>
</nav>

Mã này tạo một breadcrumb đơn giản với chỉ một mục: "Trang chủ". Hãy phân tích:

Chúng ta sử dụng thẻ <nav> với aria-label="breadcrumb" để đảm bảo khả năng truy cập.
Bên trong, chúng ta có một danh sách có thứ tự (<ol>) với lớp breadcrumb.
Mỗi mục trong breadcrumb là một mục danh sách (<li>) với lớp breadcrumb-item.
Lớp active và thuộc tính aria-current="page" chỉ định trang hiện tại.

Thêm nhiều cấp độ

Bây giờ, hãy thêm một chút chiều sâu cho breadcrumb của chúng ta:

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

Trong ví dụ này, chúng ta có ba cấp độ:

Trang chủ (liên kết)
Thư viện (liên kết)
Dữ liệu (trang hiện tại, không liên kết)

Chú ý rằng chỉ mục cuối cùng có lớp active và thuộc tính aria-current="page". Các mục khác là liên kết, cho phép người dùng quay lại các cấp độ trước.

Tùy chỉnh dấu phân cách

Mặc định, Bootstrap sử dụng dấu gạch ngang (/) làm dấu phân cách giữa các mục breadcrumb. Nhưng nếu bạn muốn gì khác? Hãy thử sáng tạo!

Sử dụng CSS để thay đổi dấu phân cách

Thêm mã CSS này vào file stylesheet của bạn:

.breadcrumb-item + .breadcrumb-item::before {
content: ">";
}

Điều này thay đổi dấu phân cách thành dấu lớn hơn (>). Bạn có thể thử nghiệm với các ký tự khác hoặc thậm chí là emoji! ?➡️?

Sử dụng dấu phân cách tích hợp sẵn của Bootstrap

Bootstrap 5 giới thiệu một cách mới để thay đổi dấu phân cách sử dụng 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 active" aria-current="page">Thư viện</li>
</ol>
</nav>

Ở đây, chúng ta sử dụng thuộc tính style để đặt biến CSS --bs-breadcrumb-divider. Đơn giản phải không!

Thêm biểu tượng vào Breadcrumbs

Muốn làm breadcrumb của bạn hấp dẫn hơn về mặt thị giác? Hãy thêm một số biểu tượng!

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

Trong ví dụ này, chúng ta sử dụng Font Awesome icons, nhưng bạn có thể sử dụng bất kỳ thư viện biểu tượng nào bạn thích. Chỉ cần chắc chắn bao gồm các file CSS và JavaScript cần thiết cho bộ biểu tượng bạn chọn.

Breadcrumbs responsive

Là người thầy trong khu phố, tôi muốn nhấn mạnh tầm quan trọng của thiết kế responsive. Hãy tạo breadcrumb đẹp trên tất cả các thiết bị:

<nav aria-label="breadcrumb">
<ol class="breadcrumb flex-wrap">
<li class="breadcrumb-item"><a href="#">Trang chủ</a></li>
<li class="breadcrumb-item"><a href="#">Tên Danh mục Dài</a></li>
<li class="breadcrumb-item"><a href="#">Tên Subcategory Dài</a></li>
<li class="breadcrumb-item active" aria-current="page">Trang Hiện tại với Tiêu đề Dài</li>
</ol>
</nav>

Lớp flex-wrap cho phép các mục breadcrumb cuộn xuống dòng tiếp theo trên màn hình nhỏ hơn, tránh việc cuộn ngang.

Về khả năng truy cập

Là những nhà phát triển có trách nhiệm, chúng ta nên luôn luôn nghĩ đến khả năng truy cập. Dưới đây là một số lời khuyên:

Sử dụng các thuộc tính ARIA chính xác (aria-label, aria-current)
Đảm bảo có sự tương phản màu sắc đủ
Đảm bảo các liên kết có thể truy cập bằng phím đàn

Kết hợp tất cả lại

Hãy tạo một ví dụ toàn diện tích hợp tất cả những gì chúng ta đã học:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Breadcrumbs Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<style>
.breadcrumb-item + .breadcrumb-item::before {
content: "➡️";
}
</style>
</head>
<body>
<div class="container mt-5">
<h1>Bootstrap Breadcrumbs Demo</h1>
<nav aria-label="breadcrumb">
<ol class="breadcrumb flex-wrap">
<li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i> Trang chủ</a></li>
<li class="breadcrumb-item"><a href="#"><i class="fas fa-book"></i> Thư viện</a></li>
<li class="breadcrumb-item"><a href="#"><i class="fas fa-laptop-code"></i> Lập trình Web</a></li>
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-bootstrap"></i> Bootstrap</li>
</ol>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Ví dụ này bao gồm các dấu phân cách tùy chỉnh, biểu tượng, thiết kế responsive và các thuộc tính khả năng truy cập chính xác.

Kết luận

Chúc mừng! Bạn đã thành thạo nghệ thuật tạo breadcrumb với Bootstrap. Từ việc triển khai cơ bản đến tùy chỉnh nâng cao, bạn现在已经 có công cụ để hướng dẫn người dùng qua website của bạn một cách.style và hiệu quả.

Nhớ rằng, breadcrumb là như một dấu vết số hóa bạn để lại cho người dùng. Chúng giúp ngăn chặn người dùng bị lạc trong cấu trúc website của bạn. Sử dụng chúng khôn ngoan, và người dùng của bạn sẽ cảm ơn bạn!

Chúc các bạn lập trình vui vẻ, và hy vọng breadcrumb của bạn luôn dẫn đến những trải nghiệm người dùng tuyệt vời! ?✨

Phương pháp	Mô tả
Triển khai cơ bản	Sử dụng `<nav>`, `<ol>`, và `<li>` với các lớp của Bootstrap
Thêm nhiều cấp độ	Tạo một hierachy với các mục liên kết và mục hiện tại
Tùy chỉnh dấu phân cách	Sử dụng CSS hoặc biến phân cách tích hợp sẵn của Bootstrap
Thêm biểu tượng	Sử dụng thư viện biểu tượng để tăng tính hấp dẫn thị giác
Thiết kế responsive	Sử dụng `flex-wrap` để có trải nghiệm tốt trên di động
Khả năng truy cập	Thực hiện các thuộc tính ARIA chính xác và đảm bảo导航 bằng phím đàn

Credits: Image by storyset

Hướng Dẫn Trước:

Bootstrap - Demo Huy hiệu

Hướng Dẫn Tiếp Theo:

Bootstrap - Demo Jumbotrons