從某種意義上來說，徽章效果和前面介紹的標(biāo)簽效果是極其的相似。也是用來做一些提示信息使用。常出現(xiàn)的是一些系統(tǒng)發(fā)出的信息，比如你登錄你的twitter后，如果你信息沒有看，系統(tǒng)會告訴你有多少信息未讀，如下圖所示：

在Bootstrap框架中，把這種效果稱作為徽章效果，使用“badge”樣式來實(shí)現(xiàn)。

對應(yīng)的文件版本：

  ?   LESS版本:源文件badges.less

  ?   Sass版本：源文件_badges.scss

  ?   編譯后版本：bootstrap.css文件第4328行～第4366行

使用方法：

使用方法，其實(shí)也沒什么太多可說的，你可以像標(biāo)簽一樣，使用span標(biāo)簽來制作，然后為他加入badge類：

<a href="#">Inbox <span class="badge">42</span></a>

運(yùn)行效果見右側(cè)結(jié)果窗口。

實(shí)現(xiàn)原理：

主要將其設(shè)置為橢圓形，并且加了一個背景色：

/*bootstrap.css文件第4328行～第4341行*/

.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #999;
border-radius: 10px;
}

同樣也使用:empty偽元素，當(dāng)沒有內(nèi)容的時候隱藏：

.badge:empty {
display: none;
}

正如開頭所說，可以將徽章與按鈕或者導(dǎo)航之類配合使用：

<div class="navbar navbar-default" role="navigation">
　<div class="navbar-header">
　       <a href="##" class="navbar-brand">慕課網(wǎng)</a>
　</div>
  <ul class="nav navbar-nav">
         <li class="active"><a href="##">網(wǎng)站首頁</a></li>
         <li><a href="##">系列教程</a></li>
         <li><a href="##">名師介紹</a></li>
         <li><a href="##">成功案例<span class="badge">23</span></a></li>
         <li><a href="##">關(guān)于我們</a></li>
  </ul>
</div>

運(yùn)行效果見右側(cè)結(jié)果窗口。

按鈕和膠囊形導(dǎo)航設(shè)置徽章：

另外，徽章在按鈕元素button和膠囊形導(dǎo)航nav-pills也可以有類似的樣式，只不過是顏色不同而以：

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
   …
  <li><a href="#">Messages<span class="badge">3</span></a></li>
</ul>
<ul class="navnav-pills nav-stacked" style="max-width: 260px;">
<li class="active">
<a href="#">
  <span class="badge pull-right">42</span>
          Home
</a>
</li>
…
<li>
<a href="#">
    <span class="badge pull-right">3</span>
          Messages
</a>
</li>
</ul>
<button class="btnbtn-primary" type="button">
      Messages <span class="badge">4</span>
</button>

運(yùn)行效果見右側(cè)結(jié)果窗口。

樣式代碼請查看bootstrap.css文件第4345行～第4366行，這20多行代碼已從原文中節(jié)取出來，放在右側(cè)代碼頂部“bootstrap.css”文件中，小伙伴們可以查看。

注意：不過和標(biāo)簽組件不一樣的是：在徽章組件中沒有提供多種顏色風(fēng)格的效果，不過你也可以通過badges.less或者_badges.scss快速自定義。此處對不做過多闡述。