在 GitHub 上檢視

徽章

我們的徽章文件和範例，一個小型計數和標籤元件。

範例

徽章會縮放以符合其父元素的大小，使用相對字體大小和em單位。

範例標題 新

範例標題 新

範例標題 新

範例標題 新

範例標題 新
範例標題 新
<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>

請注意，取決於徽章的使用方式，它們可能會讓螢幕閱讀器和類似輔助技術的使用者感到困惑。雖然徽章的樣式提供了視覺提示，說明其用途，但這些使用者只會看到徽章的內容。根據特定情況，這些徽章可能看起來像句子、連結或按鈕末尾的隨機附加字詞或數字。

除非內容很清楚（例如「通知」範例，其中了解「4」是通知數量），請考慮在視覺上隱藏的附加文字中包含額外的內容。

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

情境變異

新增以下任何一個修改器類別，以變更徽章的外觀。

主要 次要 成功 危險 警告 資訊 淺色 深色 
<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>
傳達輔助技術的意義

僅使用顏色來增加意義只會提供視覺指示，不會傳達給輔助技術的使用者，例如螢幕朗讀程式。請確保由顏色表示的資訊從內容本身（例如可見文字）中顯而易見，或透過其他方式包含，例如使用 .sr-only 類別隱藏的其他文字。

藥丸徽章

使用 .badge-pill 修飾類別來讓徽章更圓（具有較大的 border-radius 和額外的水平 padding）。如果您錯過了 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>

在 <a> 元素上使用情境 .badge-* 類別可以快速提供具有滑鼠移入和焦點狀態的可操作徽章。

主要 次要 成功 危險 警告 資訊 淺色 深色 
<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>