Huy hiệu Bootstrap 4
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
Huy hiệu được sử dụng để thêm thông tin bổ sung vào bất kỳ nội dung nào. Sử dụng lớp .badge
cùng với lớp theo ngữ cảnh (như .badge-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 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>
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 ( .badge-*
) để thay đổi màu của huy hiệu:
Ví dụ
<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>
Hãy tự mình thử » Huy hiệu thuốc
Sử dụng lớp .badge-pill
để làm cho huy hiệu tròn hơn:
Ví dụ
<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>
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 badge-light">4</span>
</button>
Hãy tự mình thử »