Source

徽章

徽章的文檔和示例，我們的小數量和標籤組件。

例子

徽章通過使用相對字體大小和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>

在元素上使用上下文.badge-*類可以快速提供具有懸停和焦點狀態的可操作徽章。<a>

基本的 中學 成功 危險 警告 信息 光 黑暗的 
<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>