NỘI DUNG BÀI VIẾT

Huy hiệu trong Bootstrap

Trong lập trình front-end, bạn có để ý các huy hiệu (hay nhãn hiệu, tiếng Anh là badge) là một ô nhỏ thể hiện thông tin cho nội dung nào đó. Để thể hiện huy hiệu trong Bootstrap, bạn có thể dùng lớp .badge và lớp bối cảnh (ví dụ .badge-secondary) bên trong các phần tử span.

Ví dụ tạo huy hiệu bên trong phần tử span như sau.

Bootstrap Example

Badges

Example heading New

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Badges</h2>
  <h1>Example heading <span class="badge badge-secondary">New</span></h1>
  <h2>Example heading <span class="badge badge-secondary">New</span></h2>
  <h3>Example heading <span class="badge badge-secondary">New</span></h3>
  <h4>Example heading <span class="badge badge-secondary">New</span></h4>
  <h5>Example heading <span class="badge badge-secondary">New</span></h5>
  <h6>Example heading <span class="badge badge-secondary">New</span></h6>
</div>

</body>
</html>
Code language: HTML, XML (xml)

Huy hiệu kèm theo thông tin bối cảnh

Nếu bạn muốn tạo huy hiệu với các màu sắc để người dùng cảm nhận được thông tin bên trong đó, bạn có thể dùng thêm các lớp như .badge-primary, .badge-secondary, .badge-success, .badge-warning, .badge-danger, .badge-info, .badge-light, và .badge-dark.

Bootstrap Example

Contextual Badges

Primary Secondary Success Danger Warning Info Light Dark

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Contextual Badges</h2>
  <span class="badge badge-primary">Primary</span>
  <span class="badge badge-secondary">Secondary</span>
  <span class="badge badge-success">Success</span>
  <span class="badge badge-danger">Danger</span>
  <span class="badge badge-warning">Warning</span>
  <span class="badge badge-info">Info</span>
  <span class="badge badge-light">Light</span>
  <span class="badge badge-dark">Dark</span>
</div>

</body>
</html>
Code language: HTML, XML (xml)

Huy hiệu hình con nhộng

Ngoài việc tạo huy hiệu hình chữ nhật 4 góc bo tròn, bạn còn có thể tạo các huy hiệu hình con nhộng (giống viên thuốc). Để làm được như vậy, bạn chỉ cần thêm lớp .badge-pill vào.

Bootstrap Example

Pill Badges

Primary Secondary Success Danger Warning Info Light Dark

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Pill Badges</h2>
  <span class="badge badge-pill badge-primary">Primary</span>
  <span class="badge badge-pill badge-secondary">Secondary</span>
  <span class="badge badge-pill badge-success">Success</span>
  <span class="badge badge-pill badge-danger">Danger</span>
  <span class="badge badge-pill badge-warning">Warning</span>
  <span class="badge badge-pill badge-info">Info</span>
  <span class="badge badge-pill badge-light">Light</span>
  <span class="badge badge-pill badge-dark">Dark</span>
</div>

</body>
</html>
Code language: HTML, XML (xml)

Huy hiện bên trong một phần tử HTML khác

Ngoài ra chúng ta có thể sử dụng badge như một phần của liên kết (link) hoặc nút (button) để hiển thị số đếm, chẳng hạn như số lượng tin nhắn đã nhận hoặc chưa đọc, số lượng các thông báo, … mà chúng ta vẫn hay thấy trong các ứng dụng mail hay ứng dụng Facebook,….

Bootstrap Example

Badge inside a Button

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Badge inside a Button</h2>
  <button type="button" class="btn btn-primary">
    Messages <span class="badge badge-light">4</span>
  </button>
  <button type="button" class="btn btn-danger">
    Notifications <span class="badge badge-light">7</span>
  </button>
</div>

</body>
</html>
Code language: HTML, XML (xml)

Ngoài ra, bạn còn có thể kết hợp huy hiệu ở thanh điều hướng, nhóm nút nhấn, dropdown box,… để tạo ra nhiều giao diện phong phú khác nhau.

Kết luận

Bài viết đã hướng dẫn cho bạn cách tạo huy hiệu trong Bootstrap, bạn có thể dùng huy hiệu để tăng tính thẩm mỹ và tạo sự phong phú giao diện website. Mời bạn tiếp tục theo dõi bài tiếp theo.

Các bạn có thể tham khảo các bài viết hay về Bootstrap tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Huy hiệu trong Bootstrap 4

Huy hiệu trong Bootstrap

Badges

Example heading New