Trong hướng dẫn này, bạn sẽ học cách 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.
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ươ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:
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:
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:
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.
Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.
Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.
Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.