跳到主要內容 跳到文件導覽
在 GitHub 上檢視

徽章

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

在此頁面上

範例

徽章會使用相對字型大小和 em 單位來縮放，以符合其直接父元素的大小。從 v5 開始，徽章不再有連結的焦點或游標樣式。

標題

範例標題 最新

範例標題 最新

範例標題 最新

範例標題 最新

範例標題 最新
範例標題 最新
html 
<h1>Example heading <span class="badge text-bg-secondary">New</span></h1>
<h2>Example heading <span class="badge text-bg-secondary">New</span></h2>
<h3>Example heading <span class="badge text-bg-secondary">New</span></h3>
<h4>Example heading <span class="badge text-bg-secondary">New</span></h4>
<h5>Example heading <span class="badge text-bg-secondary">New</span></h5>
<h6>Example heading <span class="badge text-bg-secondary">New</span></h6>

按鈕

徽章可用於連結或按鈕的一部分，以提供計數器。

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

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

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

定位

使用工具程式修改 .badge，並將其定位在連結或按鈕的角落。

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>

您也可以用幾個沒有計數的工具程式取代 .badge 類別，以取得更通用的指標。

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>

背景顏色

v5.2.0 中新增

使用 我們的 .text-bg-{color} 輔助函式，設定對比前景 color 的 background-color。以前需要手動配對您選擇的 .text-{color} 和 .bg-{color} 工具程式進行樣式設定，如果您喜歡，您仍然可以使用。

主要 次要 成功 危險 警告 資訊 淺色 深色
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>
無障礙提示：僅使用顏色來增加意義只會提供視覺指示，這不會傳達給螢幕閱讀器等輔助技術的使用者。請確保意義從內容本身（例如，具有足夠色彩對比的可見文字）中很明顯，或透過其他方式包含，例如使用 .visually-hidden 類別隱藏的附加文字。

藥丸徽章

使用 .rounded-pill 工具程式類別讓徽章更圓潤，並具有較大的 border-radius。

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

變數

v5.2.0 中新增

作為 Bootstrap 不斷演進的 CSS 變數方法的一部分，徽章現在在 .badge 上使用本機 CSS 變數，以增強即時自訂。CSS 變數的值透過 Sass 設定，因此 Sass 自訂仍受支援。

scss/_badge.scss 
--#{$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};

Sass 變數

scss/_variables.scss 
$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               var(--#{$prefix}border-radius);