Bootstrap - Huy hiệu: Thêm phong cách cho các yếu tố Web của bạn

Xin chào, những nhà phát triển web tương lai! Hôm nay, chúng ta sẽ khám phá thế giới thú vị của Huy hiệu Bootstrap. Là người giáo viên máy tính gần gũi của bạn, tôi ở đây để hướng dẫn bạn trong hành trình này, từng bước một. Vậy, hãy lấy饮料 yêu thích của bạn, thoải mái ngồi xuống, và cùng nhau bắt đầu冒险 này!

Huy hiệu Bootstrap là gì?

Huy hiệu là các thành phần nhỏ để đếm và gắn thẻ có thể thêm thông tin bổ sung cho các yếu tố web của bạn. Chúng giống như những tem số hóa nhỏ có thể làm cho trang web của bạn trở nên thông tin hơn và trực quan hơn. Hãy tưởng tượng bạn đang tạo một nền tảng mạng xã hội, và bạn muốn hiển thị số lượng tin nhắn chưa đọc của một người dùng - đó là lúc huy hiệu phát huy tác dụng!

Ví dụ cơ bản về huy hiệu

Hãy bắt đầu với một ví dụ đơn giản:

<h1>Chào mừng đến với MySpace 2.0 <span class="badge bg-secondary">Mới</span></h1>

Trong ví dụ này, chúng ta đã thêm một huy hiệu bên cạnh tiêu đề của mình. Element span với các lớp badge và bg-secondary tạo ra một huy hiệu nhỏ màu xám với nội dung "Mới". Nó giống như dán một tem "Mới!" lên một sản phẩm trong cửa hàng - nó thu hút sự chú ý!

Huy hiệu trong hành động

Huy hiệu với nút

Huy hiệu có thể được sử dụng cùng với nút để cung cấp thông tin bổ sung. Dưới đây là một ví dụ:

<button type="button" class="btn btn-primary">
Thông báo <span class="badge bg-secondary">4</span>
</button>

Mã này tạo ra một nút với nội dung "Thông báo" cùng với một huy hiệu nhỏ hiển thị số 4. Nó hoàn hảo để hiển thị số lượng thông báo chưa đọc của một người dùng!

Huy hiệu cho thông báo

Nói về thông báo, hãy xem cách chúng ta có thể sử dụng huy hiệu để tạo một biểu tượng thông báo:

<i class="bi bi-bell-fill position-relative">
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">tin nhắn chưa đọc</span>
</span>
</i>

Mã này tạo ra một biểu tượng chuông với một huy hiệu đỏ hiển thị "99+". Element visually-hidden là cho máy quét màn hình, giúp trang web của bạn trở nên khả dụng hơn.

Định vị huy hiệu

Huy hiệu có thể được định vị theo nhiều cách khác nhau. Hãy xem một vài ví dụ:

<button type="button" class="btn btn-primary position-relative">
Thư đến
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">tin nhắn chưa đọc</span>
</span>
</button>

Mã này định vị một huy hiệu ở góc trên bên phải của một nút. Nó giống như dán một note dán vào góc của một cuốn sách!

Huy hiệu jako chỉ báo

Huy hiệu cũng có thể được sử dụng như một chỉ báo:

<button type="button" class="btn btn-primary position-relative">
Hồ sơ
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">thông báo mới</span>
</span>
</button>

Điều này tạo ra một điểm chỉ báo nhỏ màu đỏ trên một nút - hoàn hảo để hiển thị có điều gì mới mà không cần xác định số lượng.

Tùy chỉnh màu sắc huy hiệu

Bootstrap cung cấp nhiều màu nền khác nhau cho huy hiệu. Dưới đây là bảng các lớp có sẵn:

Lớp	Mô tả
bg-primary	Huy hiệu xanh
bg-secondary	Huy hiệu xám
bg-success	Huy hiệu xanh lá
bg-danger	Huy hiệu đỏ
bg-warning	Huy hiệu vàng
bg-info	Huy hiệu xanh dương
bg-light	Huy hiệu trắng
bg-dark	Huy hiệu đen

Bạn có thể sử dụng các lớp này như sau:

<span class="badge bg-primary">Chính</span>
<span class="badge bg-secondary">Phụ</span>
<span class="badge bg-success">Thành công</span>
<span class="badge bg-danger">Nguy hiểm</span>
<span class="badge bg-warning text-dark">Cảnh báo</span>
<span class="badge bg-info text-dark">Thông tin</span>
<span class="badge bg-light text-dark">Sáng</span>
<span class="badge bg-dark">Đen</span>

Huy hiệu hình thuốc

Nếu bạn muốn huy hiệu của mình có các đầu tròn, bạn có thể sử dụng lớp rounded-pill:

<span class="badge rounded-pill bg-primary">Chính</span>
<span class="badge rounded-pill bg-secondary">Phụ</span>
<span class="badge rounded-pill bg-success">Thành công</span>

Những huy hiệu hình thuốc này rất tuyệt vời cho các thẻ hoặc nhãn!

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

Bây giờ chúng ta đã bao gồm tất cả các khái niệm này, hãy tạo một ví dụ phức tạp hơn tích hợp nhiều loại huy hiệu:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">MySpace 2.0</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
Trang chủ
<span class="badge bg-primary rounded-pill">Mới</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link position-relative" href="#">
Tin nhắn
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">tin nhắn chưa đọc</span>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link position-relative" href="#">
Thông báo
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-success border border-light rounded-circle">
<span class="visually-hidden">thông báo mới</span>
</span>
</a>
</li>
</ul>
</div>
</nav>

Mã này tạo ra một thanh导航 với ba mục: Trang chủ (với huy hiệu "Mới"), Tin nhắn (với huy hiệu đếm), và Thông báo (với huy hiệu chỉ báo). Nó giống như tạo một bảng điều khiển cho một con tàu vũ trụ - mỗi huy hiệu cung cấp cho người dùng thông tin quan trọng chỉ với một cái nhìn!

Và thế là xong, các bạn! Chúng ta đã khám phá thế giới của Huy hiệu Bootstrap, từ các nhãn đơn giản đến các thông báo phức tạp. Nhớ rằng, giống như bất kỳ công cụ nào trong phát triển web, chìa khóa là sử dụng huy hiệu một cách hợp lý. Chúng rất tuyệt vời để thu hút sự chú ý, nhưng quá nhiều có thể làm trang web của bạn trông rối ren.

Khi chúng ta kết thúc, tôi nhớ lại một học sinh曾经说过, "Huy hiệu giống như những hạt đường trên bánh cupcake - chúng làm mọi thứ trở nên thú vị hơn!" Và tôi không thể đồng ý hơn. Vậy, hãy tiếp tục, thử nghiệm, và thêm một chút phong cách huy hiệu vào các trang web của bạn!

Credits: Image by storyset