標籤 (Badge)

標籤的文檔與範例,包含小號及元件。

六角學院 六角學院

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

立即上課去

範例

套用相應的字體大小和 em 單位使標籤繼承父元素的尺寸。

Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<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>

標籤可以作為連結或按鈕的計數器。

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

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

除非內文是清楚的 (如 “通知” 範例,使用隱藏的文字內容說明用途),請考慮將附加的文字內容在視覺上隱藏。

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

情境變化

加入以下的 Class 來修改標籤的外觀。

Primary Secondary Success Danger Warning Info Light Dark
<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>

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 .sr-only class.

膠囊標籤

使用 .badge-pill 可以使標籤更圓潤(具有較大的邊框半徑和附加的水平 padding)。 如果你錯過了 v3 的標籤,這是有用的。

Primary Secondary Success Danger Warning Info Light Dark
<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>

連結

使用情境色彩 .badge-*<a> 元素上提供可操作的標籤 hover 和 focus 狀態。

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