Bootstrap 徽章（Badges）

本章將講解 Bootstrap 徽章（Badges）?；照屡c標(biāo)簽相似，主要的區(qū)別在于徽章的邊角更加圓滑。

成都地區(qū)優(yōu)秀IDC服務(wù)器托管提供商(創(chuàng)新互聯(lián)).為客戶提供專業(yè)的內(nèi)江機房主機托管,四川各地服務(wù)器托管,內(nèi)江機房主機托管、多線服務(wù)器托管.托管咨詢專線：13518219792

徽章（Badges）主要用于突出顯示新的或未讀的項。如需使用徽章，只需要把 添加到鏈接、Bootstrap 導(dǎo)航等這些元素上即可。

下面的實例演示了這點：

實例

展示未讀郵件：

<
a

href
=
"
#
"
>
Mailbox
<
span

class
=
"
badge
"
>
50
span
>
a
>

嘗試一下 ?

結(jié)果如下所示：

當(dāng)沒有新的或未讀的項時，通過 CSS 的 :empty 選擇器，徽章會折疊起來，表示里邊沒有內(nèi)容。

實例

展示未讀消息：

<
div

class
=
"
container
"
>

<
h2
>
徽章
h2
>

<
p
>
.badge 類指定未讀消息的數(shù)量:
p
>

<
p
>
<
a

href
=
"
#
"
>
收件箱
<
span

class
=
"
badge
"
>
21
span
>
a
>
p
>

div
>

嘗試一下 ?

---

激活導(dǎo)航狀態(tài)

您可以在激活狀態(tài)的膠囊式導(dǎo)航和列表導(dǎo)航中放置徽章。通過使用 來激活鏈接，如下面的實例所示：

實例

<
h4
>
膠囊式導(dǎo)航中的激活狀態(tài)
h4
>

<
ul

class
=
"
nav nav-pills
"
>

<
li

class
=
"
active
"
>

<
a

href
=
"
#
"
>
首頁
<
span

class
=
"
badge
"
>
42
span
>

a
>

li
>

<
li
>

<
a

href
=
"
#
"
>
簡介
a
>

li
>

<
li
>

<
a

href
=
"
#
"
>
消息
<
span

class
=
"
badge
"
>
3
span
>

a
>

li
>

ul
>

<
br
>

<
h4
>
列表導(dǎo)航中的激活狀態(tài)
h4
>

<
ul

class
=
"
nav nav-pills nav-stacked
"

style
=
"
max-width: 260px;
"
>

<
li

class
=
"
active
"
>

<
a

href
=
"
#
"
>

<
span

class
=
"
badge pull-right
"
>
42
span
>
首頁
a
>

li
>

<
li
>

<
a

href
=
"
#
"
>
簡介
a
>

li
>

<
li
>

<
a

href
=
"
#
"
>

<
span

class
=
"
badge pull-right
"
>
3
span
>
消息
a
>

li
>

ul
>

嘗試一下 ?

結(jié)果如下所示：

文章標(biāo)題：創(chuàng)新互聯(lián)Bootstrap教程：Bootstrap 徽章（Badges）
文章起源：http://fisionsoft.com.cn/article/dhjcjig.html