Bài 12: Badge trong Bootstrap 5

Chí Vỹ

Badge trong Bootstrap rất cần thiết khi phát triển web và ứng dụng. Ở bài này, hãy cùng Quantrimang.com tìm hiểu cách dùng badge trong Bootstrap như thế nào nhé!

Nếu thường xuyên lướt web hay dùng ứng dụng, bạn sẽ thấy badge hay huy hiệu xuất hiện thường xuyên. Chúng có thể là các biểu tượng thông báo, nút điều hướng hoặc đánh dấu nội dung đặc biệt nào đó.

Badge trong Bootstrap 5 cũng tương tự như vậy. Nó là một nhãn hiện thông tin ngắn dưới một hình dạng nhỏ. Nó được dùng để thêm thông tin phụ vào các phần tử khác trên trang web.

Cách dùng Badge trong Bootstrap 5 rất dễ. Về cơ bản, bạn chỉ cần dùng các lớp css .badge và badge-* trong thẻ span hoặc div. Ví dụ, nếu muốn tạo một huy hiệu màu xanh lá cây, bạn có thể dùng mã HTML sau:

<span class="badge badge-success">Thông tin quan trọng</span>

Những lớp CSS như .badge-pill và .badge-lg giúp bạn tạo badge hình tròn hoặc lớn hơn. Ví dụ code mẫu tạo huy hiệu tròn lớn màu đỏ:

<span class="badge badge-pill badge-lg badge-danger">Thông báo</span>

Ngoài ra, bạn còn có thể dùng các lớp .badge-primary, .badge-secondary, .badge-success, .badge-info, .badge-warning, .badge-danger, .badge-light và .badge-dark để thiết kế huy hiệu trong Bootstrap 5. Dưới đây là hướng dẫn chi tiết:

Badge thường được dùng để hiển thị thông tin bổ sung đánh dấu các mục mới hoặc chưa đọc. Để tạo Badge, bạn chỉ cần thêm <span class = "badge"> vào các link, nav...

Khi phần thông tin bổ sung bị trống, Badge sẽ được thu gọn thông qua selector :empty

Badge thường dùng trong một số trường hợp như ảnh dưới đây:

Badge cơ bản

Badge theo ngữ cảnh

Sử dụng class .badge cùng với lớp ngữ cảnh (như .bg-secondary) trong các phần tử <span> để tạo các badge chữ nhật với màu sắc tương ứng. Xem ví dụ sau để hiểu rõ hơn:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ về Bootstrap - Quản Trị Mạng</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Các ví dụ về Badge</h1>
  <h2>Heading ví dụ <span class="badge bg-primary">Mới</span></h2>
  <h3>Các bài báo chưa đọc <span class="badge bg-success">5</span></h3>
  <h4>Bạn có tin nhắn mới <span class="badge bg-warning">20+</span></h4>
  <h5>Một số ví dụ khác <span class="badge bg-danger">HOT</span></h5>
</div>

</body>
</html>

Sẽ cho kết quả như sau:

Badge theo ngữ cảnh

Pill Badge

Ngoài các Badge hình chữ nhật bo góc, bạn có thể tạo những Badge mềm mại hơn với việc sử dụng thêm class .rounded-pill trong <span> tương ứng:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ về Bootstrap - Quản Trị Mạng</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Các ví dụ về Badge</h1>
  <h2>Heading ví dụ <span class="badge rounded-pill bg-primary">Mới</span></h2>
  <h3>Các bài báo chưa đọc <span class="badge rounded-pill bg-success">5</span></h3>
  <h4>Bạn có tin nhắn mới <span class="badge rounded-pill bg-warning">20+</span></h4>
  <h5>Một số ví dụ khác <span class="badge rounded-pill bg-danger">HOT</span></h5>
</div>

</body>
</html>

Với file HTML trên, bạn sẽ có được các Badge như sau:

Pill Badge

Badge đặt bên trong 1 đối tượng

Bạn có thể đặt Badge ở trạng thái hoạt động vào bên trong phần điều hướng của website hoặc 1 nút bất kỳ. Chỉ cần đặt nó bên cạnh link hoặc nút theo như ví dụ sau:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ về Bootstrap - Quản Trị Mạng</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Badge bên trong Nút</h2>
  <button type="button" class="btn btn-primary">
    Tin nhắn <span class="badge bg-danger">4</span>
  </button>
  <button type="button" class="btn btn-danger">
    Thông báo <span class="badge bg-dark">7</span>
  </button>
</div>

</body>
</html>

Kết quả sẽ có giao diện như sau:

Badge lồng trong nút

Kết thúc bài này, chúng ta đã biết cách sử dụng Badge trong một số tình huống cơ bản. Hãy tiếp tục theo các bài học tiếp theo để nắm rõ hơn cách sử dụng Badge một cách nhuần nhuyễn hơn bạn nhé.

Thứ Tư, 28/12/2022 16:37

3 ★ 1 👨 947

#Bootstrap