Bootstrap 5 Lesson 12: Badges (mới nhất 2023)

Trong bài học số 12 về Bootstrap 5: Badges, chúng ta sẽ tìm hiểu về cách sử dụng Badges trong Bootstrap 5. Badges là những thẻ được sử dụng để hiển thị thông tin hoặc trạng thái ngắn gọn, như số lượng tin nhắn chưa đọc, số lượng thông báo mới, hoặc chỉ mục của một danh sách. Trong bài học này, chúng ta sẽ học cách tạo và tuỳ chỉnh Badges, bao gồm thay đổi màu sắc, kích thước và kiểu chữ. Bạn sẽ có cơ hội thực hành thông qua các ví dụ minh họa và bài tập thực tế. Hãy tham gia khóa học ngay để nắm bắt thêm thông tin hữu ích về Badges trong Bootstrap 5!

Badge trong Bootstrap 5 là một phương thức đánh dấu chức năng với giao diện trực quan, hạn chế tối đa 20 ký tự.

Badge trong Bootstrap là một phần quan trọng khi phát triển web và ứng dụng. Hãy cùng Quantrimang.com khám phá cách sử dụng badge trong Bootstrap nhé!

Nếu thường xuyên duyệt web hoặc sử dụng ứng dụng, bạn sẽ thường thấy các huy hiệu hoặc biểu trưng 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 cho một nội dung đặc biệt nào đó.

Badge trong Bootstrap 5 cũng có cách hoạt động tương tự. Nó là một loại nhãn hiển thị thông tin ngắn gọn dưới dạng một hình dạng nhỏ. Badge được sử dụng để bổ sung thông tin bổ sung cho các phần tử khác trên trang web.

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

Huy hiệu màu xanh lá cây

<span >Thông tin quan trọng</span>

Các lớp CSS như .badge-pill và .badge-lg sẽ giúp bạn tạo huy hiệu có hình tròn hoặc kích thước lớn hơn. Dưới đây là ví dụ mã HTML để tạo huy hiệu tròn lớn màu đỏ:

Huy hiệu

<span >Thông báo</span>

Thêm vào đó, bạn cũng có thể sử dụng các lớp .badge-primary, .badge-secondary, .badge-success, .badge-info, .badge-warning, .badge-danger, .badge-light và .badge-dark để tạo hiệu ứng huy hiệu trong Bootstrap 5. Dưới đây là hướng dẫn chi tiết:

Việc sử dụng badge thường để hiển thị thông tin bổ sung và nhận dạng các mục mới hoặc chưa được đọc. Để tạo một badge, bạn chỉ cần thêm <span class="badge"> vào các liên kết, thanh điều hướng…

Trong trường hợp không có thông tin bổ sung, Badge sẽ được thu gọn bằng cách sử dụng selector :empty.

Nhẫn hiện đang được sử dụng trong một số tình huống như hình ảnh dưới đây:

Badge theo ngữ cảnh

Sử dụng lớp .badge kết hợp với lớp ngữ cảnh (như .bg-secondary) trong các thẻ <span> để tạo các badge hình chữ nhật với màu sắc tương ứng. Xem ví dụ dưới đây để 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" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h1>Các ví dụ về Badge</h1>
  <h2>Heading ví dụ <span >Mới</span></h2>
  <h3>Các bài báo chưa đọc <span >5</span></h3>
  <h4>Bạn có tin nhắn mới <span >20+</span></h4>
  <h5>Một số ví dụ khác <span >HOT</span></h5>
</div>

</body>
</html>

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

Pill Badge

Bên cạnh các huy hiệu hình chữ nhật bo góc, bạn có thể tạo ra những huy hiệu mềm mại hơn bằng cách sử dụng lớp .rounded-pill trong điểm bắt đầu <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" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h1>Các ví dụ về Badge</h1>
  <h2>Heading ví dụ <span >Mới</span></h2>
  <h3>Các bài báo chưa đọc <span >5</span></h3>
  <h4>Bạn có tin nhắn mới <span >20+</span></h4>
  <h5>Một số ví dụ khác <span >HOT</span></h5>
</div>

</body>
</html>

Khi sử dụng file HTML này, bạn sẽ nhận được các huy hiệu như sau:

Huy hiệu dính vào trong một vật phẩm.

Bạn có thể đặt Badge ở trạng thái hoạt động trong phần điều hướng của trang web hoặc bất kỳ nút nào khác. Chỉ cần đặt nó bên cạnh liên kết hoặc nút theo cách ví dụ dưới đây:

<!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" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h2>Badge bên trong Nút</h2>
  <button type="button" >
    Tin nhắn <span >4</span>
  </button>
  <button type="button" >
    Thông báo <span >7</span>
  </button>
</div>

</body>
</html>

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

Sau khi đọc bài này, chúng ta đã có kiến thức về cách sử dụng Badge trong những tình huống cơ bản. Để hiểu rõ hơn và sử dụng Badge một cách tự nhiên hơn, hãy tiếp tục theo dõi những bài học tiếp theo.

Bài 12: Biểu tượng trong Bootstrap 5