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.

Trên trang này

Các ví 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. Kể từ phiên bản 5, huy hiệu không còn có tiêu điểm hoặc kiểu di chuột cho các liên kết.

Đề mục

Tiêu đề ví dụMới

<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>

nút

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 bg-secondary">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.

Định vị

Sử dụng các tiện ích để sửa đổi a .badgevà định vị nó ở góc của liên kết hoặc nút.

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

Bạn cũng có thể thay thế .badgelớp bằng một vài tiện ích khác mà không cần đếm cho một chỉ báo chung chung hơn.

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

Màu nền

Sử dụng các lớp tiện ích nền của chúng tôi để nhanh chóng thay đổi hình thức của huy hiệu. Xin lưu ý rằng khi sử dụng mặc định của Bootstrap .bg-light, bạn có thể cần một tiện ích màu văn bản như .text-darkđể tạo kiểu phù hợp. Điều này là do các tiện ích nền không thiết lập bất cứ điều gì ngoại trừ background-color.

Sơ đẳng Sơ trung Thành công Sự nguy hiểm Cảnh báo Thông tin Nhẹ Tối

<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 text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-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 .visually-hiddenlớp.

Phù hiệu viên thuốc

Sử dụng .rounded-pilllớp tiện ích để làm cho huy hiệu tròn hơn với chữ lớn hơn border-radius.

Sơ đẳng Sơ trung Thành công Sự nguy hiểm Cảnh báo Thông tin Nhẹ Tối

<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 text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

Sass

Biến

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;