Trong series học Bootstrap 5 trên CodeTutHub, chúng ta sẽ khám phá một thành phần thú vị và rất hữu ích trong việc hiển thị thông tin bổ sung: Badges. Thành phần này thường được sử dụng để tạo các nhãn, huy hiệu đếm số, hoặc để làm nổi bật thông tin quan trọng trong giao diện người dùng.

Badges là gì?

Badges trong Bootstrap là các thành phần nhỏ, thường được sử dụng để thêm nhãn hoặc đếm số vào các thành phần khác, chẳng hạn như nút, tiêu đề, hoặc các danh sách. Badges giúp người dùng dễ dàng nhận ra các trạng thái hoặc thông tin bổ sung mà không làm rối giao diện.

Cú pháp cơ bản của Badges:

html
Thử online
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
<hr>
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
<hr>
<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">4</span>
</button>

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

Các loại Badges trong Bootstrap 5

Bootstrap 5 cung cấp nhiều kiểu dáng cho Badges, được phân loại dựa trên màu sắc, giống như Alerts. Dưới đây là các loại phổ biến:

1. Badge Primary

html
Thử online
<span class="badge bg-primary">Primary</span>

2. Badge Secondary

html
Thử online
<span class="badge bg-secondary">Secondary</span>

3. Badge Success

html
Thử online
<span class="badge bg-success">Success</span>

4. Badge Danger

html
Thử online
<span class="badge bg-danger">Danger</span>

5. Badge Warning

html
Thử online
<span class="badge bg-warning text-dark">Warning</span>

6. Badge Info

html
Thử online
<span class="badge bg-info text-dark">Info</span>

7. Badge Light

html
Thử online
<span class="badge bg-light text-dark">Light</span>

8. Badge Dark

html
Thử online
<span class="badge bg-dark">Dark</span>

Badges và các thành phần khác

Badges thường được sử dụng kết hợp với các thành phần khác để cung cấp thông tin bổ sung:

1. Badges trong button

Bạn có thể chèn Badge vào nút để hiển thị thông tin, chẳng hạn như số lượng thông báo:

html
Thử online
<button type="button" class="btn btn-primary">
  Thông báo <span class="badge bg-light text-dark">4</span>
</button>

2. Badges trong Danh sách

Sử dụng Badges để hiển thị thông tin liên quan đến từng mục trong danh sách:

html
Thử online
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Mục 1
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Mục 2
    <span class="badge bg-success rounded-pill">7</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Mục 3
    <span class="badge bg-danger rounded-pill">1</span>
  </li>
</ul>

Badges và Tiêu đề

Sử dụng Badges trong tiêu đề giúp làm nổi bật thông tin:

html
Thử online
<h1>
  Tiêu đề chính <span class="badge bg-secondary">New</span>
</h1>
<h2>
  Tiêu đề phụ <span class="badge bg-info">Updated</span>
</h2>

Badges trong dạng Pill

Badges mặc định có hình chữ nhật, nhưng bạn có thể sử dụng lớp .rounded-pill để tạo huy hiệu có góc tròn:

html
Thử online
<span class="badge rounded-pill bg-primary">Pill</span>
<span class="badge rounded-pill bg-danger">Alert</span>

Tùy chỉnh Badges bằng JavaScript

Bạn có thể thêm hoặc xóa Badges động thông qua JavaScript. Ví dụ:

Thêm Badge vào button

js
document.getElementById("add-badge").addEventListener("click", function() {
  var button = document.querySelector(".btn");
  button.innerHTML = `Thông báo <span class="badge bg-warning">1</span>`;
});

Lưu ý khi sử dụng Badges

  1. Sử dụng hợp lý: Badges nên được sử dụng để hiển thị các thông tin nhỏ gọn, không nên chứa nội dung dài dòng.
  2. Phù hợp ngữ cảnh: Hãy sử dụng màu sắc Badge phù hợp với ý nghĩa thông tin. Ví dụ, bg-success cho trạng thái thành công, bg-danger cho lỗi.

Kết luận

Badges là một thành phần rất linh hoạt trong Bootstrap 5, giúp bạn trình bày thông tin quan trọng một cách trực quan. Từ các nút, danh sách, đến tiêu đề, Badges đều có thể nâng cao trải nghiệm người dùng trong ứng dụng của bạn.

Hãy tiếp tục theo dõi CodeTutHub để khám phá thêm các thành phần hấp dẫn khác trong series học Bootstrap 5. Nếu bạn có thắc mắc hoặc đóng góp ý kiến, đừng ngần ngại để lại bình luận nhé!

Chúc bạn học tốt!