in English
徽章
徽章的文檔和示例,我們的小數量和標籤組件。
在本頁面
例子
徽章通過使用相對字體大小和em
單位來縮放以匹配直接父元素的大小。從 v5 開始,徽章不再具有鏈接的焦點或懸停樣式。
標題
示例標題新的
示例標題新的
示例標題新的
示例標題新的
示例標題新的
示例標題新的
<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>
鈕扣
徽章可用作鏈接或按鈕的一部分以提供計數器。
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>
請注意,根據使用方式,徽章可能會讓屏幕閱讀器和類似輔助技術的用戶感到困惑。雖然徽章的樣式提供了關於其用途的視覺提示,但這些用戶只會看到徽章的內容。根據具體情況,這些標記可能看起來像是句子、鏈接或按鈕末尾的隨機附加詞或數字。
除非上下文是明確的(如“通知”示例,其中“4”是通知的數量),請考慮在視覺隱藏的附加文本中包含附加上下文。
定位
使用實用程序修改 a.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 的 default 時.bg-light
,您可能需要一個文本顏色實用程序,例如.text-dark
正確的樣式。這是因為後台實用程序只設置background-color
.
基本的
中學
成功
危險
警告
信息
光
黑暗的
<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>
向輔助技術傳達意義
使用顏色來添加含義僅提供視覺指示,不會傳達給輔助技術的用戶 - 例如屏幕閱讀器。確保由顏色表示的信息在內容本身(例如可見文本)中是顯而易見的,或者通過替代方式包含在內,例如隱藏在.visually-hidden
類中的附加文本。
藥丸徽章
使用.rounded-pill
實用程序類使徽章更圓潤,更大的border-radius
.
基本的
中學
成功
危險
警告
信息
光
黑暗的
<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>
薩斯
變量
$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;