View on GitHub

標籤 (Badges)

標籤的文檔與範例，我們的小型及標籤型元件。

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

立即上課去

On this page

範例

標籤透過相對字體大小和 em 單位來縮放以符合直屬父元素的大小。在 v5 版本中的標籤連結不再擁有 focus 或 hover 樣式。

Headings

Example heading New

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

Buttons

標籤可以作為連結或按鈕的一部分，用於計數器。

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">4</span>
</button>

根據使用方式，標籤可能會讓螢幕閱讀器及相關輔助技術的用戶感到困惑。雖然標籤的樣式提供了有關其用途的視覺提示，但這些用戶只會看到標籤的內容。根據特殊情況，這些標籤會看起來像在句子、連結、按鈕中的後方隨機加入的詞或數字。

除非內文是清楚的 (如 “通知” 範例，“4” 會被理解成通知的數量)，否則請考慮附加一些視覺上隱藏的解釋文字。

定位

使用通用類別調整 .badge 並將它放在連結或按鈕的角落。

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

你也可以使用更多通用類別取代 .badge。

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

背景顏色

使用背景通用類別來快速修改標籤的外觀。請注意當使用 Bootstrap 預設的 .bg-light 時，你會需要一個適當的文字色彩，例如 .text-dark。這是因為背景通用類別只有 background-color 的設定。

Primary Secondary Success Danger Warning Info Light Dark

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

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

膠囊標籤

使用 .rounded-pill 通用類別可以透過 border-radius 使標籤增加圓角。

Primary Secondary Success Danger Warning Info Light Dark

<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

Variables

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