Bootstrap Badge

Trong hướng dẫn này, bạn sẽ học cách tạo huy hiệu bằng Bootstrap Badge.

Tạo huy hiệu bằng Bootstrap Badge

Huy hiệu (badge) thường được sử dụng để chỉ ra một số thông tin có giá trị trên các trang web như tiêu đề quan trọng, thông báo cảnh báo, bộ đếm thông báo, v.v.

Ví dụ sau đây sẽ chỉ cho bạn cách tạo huy hiệu trên cùng một hàng bằng Bootstrap.

<h1>Bootstrap heading <span class="badge bg-secondary">New</span></h1>
<h2>Bootstrap heading <span class="badge bg-secondary">New</span></h2>
<h3>Bootstrap heading <span class="badge bg-secondary">New</span></h3>
<h4>Bootstrap heading <span class="badge bg-secondary">New</span></h4>
<h5>Bootstrap heading <span class="badge bg-secondary">New</span></h5>
<h6>Bootstrap heading <span class="badge bg-secondary">New</span></h6>

Kết quả của ví dụ trên sẽ giống như sau:

Mẹo: Bootstrap Badge tự động mở rộng tỷ lệ để phù hợp với kích thước của phần tử cha trực tiếp bằng cách sử dụng đơn vị em và font size tương đối.

Thay đổi hình thức của huy hiệu

Bạn có thể sử dụng các lớp tiện ích màu nền có sẵn của Bootstrap để nhanh chóng thay đổi hình thức của các huy hiệu. Hãy xem ví dụ sau.

<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-dark">Dark</span>
<span class="badge bg-light text-dark">Light</span>

Kết quả của ví dụ trên sẽ giống như sau:

Lưu ý: Khi sử dụng màu nền sáng, chẳng hạn như .bg-light, bạn sẽ cần sử dụng tiện ích màu văn bản tối, như .text-dark để hiển thị văn bản phù hợp. Điều này là do các lớp tiện ích màu nền không thiết lập bất kỳ thứ gì ngoại trừ màu nền.

Tạo huy hiệu hình viên thuốc

Tương tự, bạn có thể tạo huy hiệu hình viên thuốc (tức là huy hiệu có các góc tròn hơn) bằng cách sử dụng lớp bổ trợ .rounded-pill, như được hiển thị trong ví dụ sau:

<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-dark">Dark</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>

Kết quả của ví dụ trên sẽ giống như sau:

Hiển thị bộ đếm với huy hiệu

Bạn cũng có thể sử dụng huy hiệu như một phần của các liên kết hoặc nút để cung cấp bộ đếm, chẳng hạn như số lượng tin nhắn đã nhận hoặc chưa đọc, số lượng thông báo, v.v. Chúng thường được tìm thấy nhất trong ứng dụng email, trang tổng quan ứng dụng, trang web mạng xã hội, v.v. Đây là một ví dụ:

<nav class="nav nav-pills">
    <a href="#" class="nav-link">Home</a>
    <a href="#" class="nav-link">Profile</a>
    <a href="#" class="nav-link active">Messages <span class="badge bg-light text-primary">24</span></a>
    <a href="#" class="nav-link">Notification <span class="badge bg-primary">5</span></a>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo huy hiệu được định vị

Bạn có thể sử dụng các tiện ích định vị để sửa đổi huy hiệu và định vị nó ở góc của một liên kết hoặc button.

Hãy xem ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

<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">50+</span>
</button>

Kết quả của ví dụ trên sẽ giống như sau:

Bootstrap • Bootstrap Cơ Bản