Huy hiệu Bootstrap 5
danh hiệu
Huy hiệu được sử dụng để thêm thông tin bổ sung vào bất kỳ nội dung nào:
Tiêu đề ví dụ Mới
Tiêu đề ví dụ Mới
Tiêu đề ví dụ Mới
Tiêu đề ví dụ Mới
Tiêu đề ví dụ Mới
Tiêu đề ví dụ Mới
Sử dụng lớp .badge
cùng với lớp theo ngữ cảnh (như .bg-secondary
) trong các phần tử <span>
để tạo huy hiệu hình chữ nhật. Lưu ý rằng tỷ lệ huy hiệu phù hợp với kích thước của phần tử gốc (nếu có):
Ví dụ
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
Hãy tự mình thử »Huy hiệu theo ngữ cảnh
Sử dụng bất kỳ lớp ngữ cảnh nào ( .bg-*
) để thay đổi màu của huy hiệu:
Ví dụ
<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">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light">Light</span>
<span class="badge
bg-dark">Dark</span>
Hãy tự mình thử » Huy hiệu thuốc
Sử dụng lớp .rounded-pill
để làm cho huy hiệu tròn hơn:
Ví dụ
<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">Warning</span>
<span class="badge rounded-pill
bg-info">Info</span>
<span class="badge rounded-pill
bg-light">Light</span>
<span class="badge rounded-pill
bg-dark">Dark</span>
Hãy tự mình thử »Huy hiệu bên trong một phần tử
Ví dụ về sử dụng huy hiệu bên trong nút:
Ví dụ
<button type="button" class="btn btn-primary">
Messages <span
class="badge bg-danger">4</span>
</button>
Hãy tự mình thử »Bạn có biết không?
W3.CSS là một sự thay thế tuyệt vời cho Bootstrap 5.
W3.CSS nhỏ hơn, nhanh hơn và dễ sử dụng hơn.
Nếu bạn muốn tìm hiểu W3.CSS, hãy truy cập Hướng dẫn W3.CSS của chúng tôi.