Bootstrap 4 huy hiệu
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 .badgelớp cùng với một lớp theo ngữ cảnh (như .badge-secondary) trong <span>
các phần tử để tạo huy hiệu hình chữ nhật. Lưu ý rằng quy mô huy hiệu để phù hợp với kích thước của phần tử mẹ (nếu có):
Thí 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>
Huy hiệu theo ngữ cảnh
Sơ cấp
Thứ hai
Thành công
Sự nguy hiểm
Cảnh báo
Thông tin
Nhẹ
Tối tăm
Sử dụng bất kỳ lớp ngữ cảnh nào ( .badge-*) để thay đổi màu của huy hiệu:
Thí 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>
Phù hiệu thuốc
Sơ cấp
Thứ hai
Thành công
Sự nguy hiểm
Cảnh báo
Thông tin
Nhẹ
Tối tăm
Sử dụng .badge-pilllớp để làm cho các huy hiệu tròn hơn:
Thí 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>
Huy hiệu bên trong một phần tử
Ví dụ về việc sử dụng một huy hiệu bên trong một nút:
Thí dụ
<button type="button" class="btn btn-primary">
Messages <span
class="badge badge-light">4</span>
</button>