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
Tiểu học Trung học Thành công Nguy hiểm Cảnh báo Thông tin Sáng Tối
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
Tiểu học Trung học Thành công Nguy hiểm Cảnh báo Thông tin Sáng Tối
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ử »