Bootstrap5 徽章（Badges）

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了烏拉特后免費(fèi)建站歡迎大家使用！

徽章（Badges）主要用于突出顯示新的或未讀的項(xiàng)。如需使用徽章，只需要將 .badge 類加上帶有指定意義的顏色類 (如 .bg-secondary) 添加到 元素上即可。 徽章可以根據(jù)父元素的大小的變化而變化:

實(shí)例

<
h1
>
測(cè)試標(biāo)題
<
span

class
=
"
badge bg-secondary
"
>
New
span
>
h1
>

<
h2
>
測(cè)試標(biāo)題
<
span

class
=
"
badge bg-secondary
"
>
New
span
>
h2
>

<
h3
>
測(cè)試標(biāo)題
<
span

class
=
"
badge bg-secondary
"
>
New
span
>
h3
>

<
h4
>
測(cè)試標(biāo)題
<
span

class
=
"
badge bg-secondary
"
>
New
span
>
h4
>

<
h5
>
測(cè)試標(biāo)題
<
span

class
=
"
badge bg-secondary
"
>
New
span
>
h5
>

<
h6
>
測(cè)試標(biāo)題
<
span

class
=
"
badge bg-secondary
"
>
New
span
>
h6
>

嘗試一下 ?

各種顏色類型的徽章

以下列出了所有顏色類型的徽章:

實(shí)例

<
span

class
=
"
badge bg-primary
"
>
主要
span
>

<
span

class
=
"
badge bg-secondary
"
>
次要
span
>

<
span

class
=
"
badge bg-success
"
>
成功
span
>

<
span

class
=
"
badge bg-danger
"
>
危險(xiǎn)
span
>

<
span

class
=
"
badge bg-warning
"
>
警告
span
>

<
span

class
=
"
badge bg-info
"
>
信息
span
>

<
span

class
=
"
badge bg-light
"
>
淺色
span
>

<
span

class
=
"
badge bg-dark
"
>
深色
span
>

嘗試一下 ?

藥丸形狀徽章

使用 .rounded-pill 類來設(shè)置藥丸形狀徽章:

實(shí)例

<
span

class
=
"
badge rounded-pill bg-default
"
>
默認(rèn)
span
>

<
span

class
=
"
badge rounded-pill bg-primary
"
>
主要
span
>

<
span

class
=
"
badge rounded-pill bg-success
"
>
成功
span
>

<
span

class
=
"
badge rounded-pill bg-info
"
>
信息
span
>

<
span

class
=
"
badge rounded-pill bg-warning
"
>
警告
span
>

<
span

class
=
"
badge rounded-pill bg-danger
"
>
危險(xiǎn)
span
>

嘗試一下 ?

徽章插入到元素內(nèi)

以下實(shí)例將徽章嵌入到按鈕內(nèi)：

實(shí)例

<
button

type
=
"
button
"

class
=
"
btn btn-primary
"
>
Messages
<
span

class
=
"
badge bg-light
"
>
4
span
>

button
>

嘗試一下 ?

本文名稱：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5徽章（Badges）
URL網(wǎng)址：http://m.fisionsoft.com.cn/article/ccoijcg.html