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

html

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

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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.

html

<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ỉ số chung chung hơn.

html

<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

Đã thêm vào v5.2.0

Đặt background-colortiền cảnh tương phản colorvới những .text-bg-{color}người trợ giúp của chúng tôi . Trước đây, cần phải ghép nối thủ công lựa chọn của bạn .text-{color}và .bg-{color}các tiện ích để tạo kiểu, bạn vẫn có thể sử dụng tùy chọn này nếu muốn.

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

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-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

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

Biến

Đã thêm vào v5.2.0

Là một phần của phương pháp tiếp cận các biến CSS đang phát triển của Bootstrap, huy hiệu hiện sử dụng các biến CSS cục bộ trên .badgeđể tùy chỉnh thời gian thực nâng cao. Giá trị cho các biến CSS được đặt thông qua Sass, do đó, tùy chỉnh Sass cũng vẫn được hỗ trợ.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Biến Sass

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