danh hiệu
Tài liệu và ví dụ về huy hiệu, thành phần số lượng nhỏ và ghi nhãn của chúng tôi.
Thí dụ
Huy hiệu chia tỷ lệ để phù hợp với kích thước của phần tử gốc trực tiếp bằng cách sử dụng emđơn vị và kích thước phông chữ tương đố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
Tiêu đề ví dụMới
<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 có thể được sử dụng như một phần của liên kết hoặc nút để cung cấp bộ đếm.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>Lưu ý rằng tùy thuộc vào cách chúng được sử dụng, huy hiệu có thể gây nhầm lẫn cho người dùng trình đọc màn hình và các công nghệ hỗ trợ tương tự. Mặc dù kiểu dáng của huy hiệu cung cấp một gợi ý trực quan về mục đích của họ, nhưng những người dùng này sẽ chỉ đơn giản là được hiển thị nội dung của huy hiệu. Tùy thuộc vào tình huống cụ thể, những huy hiệu này có thể giống như các từ hoặc số bổ sung ngẫu nhiên ở cuối câu, liên kết hoặc nút.
Trừ khi ngữ cảnh rõ ràng (như với ví dụ “Thông báo”, nơi người ta hiểu “4” là số lượng thông báo), hãy cân nhắc bao gồm ngữ cảnh bổ sung với một đoạn văn bản bổ sung được ẩn trực quan.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>Các biến thể theo ngữ cảnh
Thêm bất kỳ lớp bổ trợ nào được đề cập bên dưới để thay đổi hình thức của huy hiệu.
<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>Truyền đạt ý nghĩa cho các công nghệ hỗ trợ
Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp một dấu hiệu trực quan, điều này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc hiển thị rõ ràng từ chính nội dung (ví dụ: văn bản hiển thị) hoặc được đưa vào thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung bị ẩn với .sr-onlylớp.
Phù hiệu viên thuốc
Sử dụng .badge-pilllớp bổ trợ để làm cho huy hiệu tròn hơn (với border-radiuschiều ngang lớn hơn và bổ sung padding). Hữu ích nếu bạn bỏ lỡ các huy hiệu từ v3.
<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>Liên kết
Việc sử dụng các lớp ngữ cảnh .badge-*trên một <a>phần tử sẽ nhanh chóng cung cấp các huy hiệu có thể hành động với các trạng thái di chuột và tiêu điểm.
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>