openplanning

Hướng dẫn và ví dụ Bootstrap Badge

  1. Bootstrap Badge
  2. Badge (.badge-pill)

1. Bootstrap Badge

Badge (Huy hiệu) là một thành phần giao diện nhỏ, nó thường được sử dụng để trang trí cho một thành phần nào đó. Dưới đây là một vài hình ảnh minh họa Badge được sử dụng trong trang.
Bootstrap sử dung lớp .badge áp dụng cho một thẻ (tag) để tạo ra một Badge. Một vài lớp bổ xung như .badge-primary, .badge-secondary, .badge-danger,.. giúp tạo ra mầu nền của Badge, bạn có thể dụng chúng trong các ngữ cảnh phù hợp.
  • badge-primary
  • badge-secondary
  • badge-success
  • badge-danger
  • badge-warning
  • badge-info
  • badge-light
  • badge-dark
  • badge-link
Ví dụ sử dụng Badge để trang trí cho các Link:
Link with Badge
<a href="#">News <span class="badge badge-primary">5</span></a><br>
<a href="#">Comments <span class="badge badge-secondary">10</span></a><br>
<a href="#">Updates <span class="badge badge-danger">2</span></a>
Xem ví dụ đầy đủ:
badge-link-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Badge</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <h4 class="mb-3">Link with Badge</h4>

         <a href="#">News <span class="badge badge-primary">5</span></a><br>
         <a href="#">Comments <span class="badge badge-secondary">10</span></a><br>
         <a href="#">Updates <span class="badge badge-danger">2</span></a>

      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>
Mặc định, các Badge được thiết lập kích thước Font bằng 75% so với kích thước Font của phần tử cha.
<h1>Example heading H1 <span class="badge badge-secondary">New</span></h1>
<h2>Example heading H2 <span class="badge badge-secondary">New</span></h2>
<h3>Example heading H3 <span class="badge badge-secondary">New</span></h3>
<h4>Example heading H4 <span class="badge badge-secondary">New</span></h4>
<h5>Example heading H5 <span class="badge badge-secondary">New</span></h5>
<h6>Example heading H6 <span class="badge badge-secondary">New</span></h6>
Badge cũng được sử dụng để trang trí cho Button. Ví dụ một Button, người dùng nhấn vào Button này để download file, Badge được sử dụng để hiển thị tổng số lần file đã được download bởi các người dùng.
<button class="btn btn-primary">
  Download <span class="badge badge-light">5</span>
</button>

2. Badge (.badge-pill)

Sử dụng lớp .badge-pill giúp cho Badge của bạn tròn hơn ở 4 góc. Hình dưới đây chỉ ra sự khác biệt giữa một Badge thông thường và một Badge có sử dụng lớp .badge-pill:
.badge .badge-pill
<h1>
   News
   <span class="badge badge-primary">100</span>
</h1>
<h1>
   Comments
   <span class="badge badge-pill badge-primary">20K</span>
</h1>

Các hướng dẫn Bootstrap

Show More