Bootstrap 徽章（Badges）

本章将講解 Bootstrap 徽章（Badges）。徽章與标簽相似，主要的差別在于徽章的邊角更加圓滑。

徽章（Badges）主要用于突出顯示新的或未讀的項。如需使用徽章，隻需要把 <b>&lt;span class="badge"&gt;</b> 添加到連結、Bootstrap 導航等這些元素上即可。

下面的執行個體示範了這點：

展示未讀郵件：

&lt;a href="#"&gt;Mailbox &lt;span class="badge"&gt;50&lt;/span&gt;&lt;/a&gt;

結果如下所示：

當沒有新的或未讀的項時，通過 CSS 的 <b> :empty</b> 選擇器，徽章會折疊起來，表示裡邊沒有内容。

展示未讀消息：

&lt;div class="container"&gt;

&lt;h2&gt;徽章&lt;/h2&gt;

&lt;p&gt;.badge 類指定未讀消息的數量:&lt;/p&gt;

&lt;p&gt;&lt;a href="#"&gt;收件箱 &lt;span class="badge"&gt;21&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;

&lt;/div&gt;

您可以在激活狀态的膠囊式導航和清單導航中放置徽章。通過使用 <b>&lt;span class="badge"&gt;</b> 來激活連結，如下面的執行個體所示：

&lt;h4&gt;膠囊式導航中的激活狀态&lt;/h4&gt;

&lt;ul class="nav nav-pills"&gt;

&lt;li class="active"&gt;

&lt;a href="#"&gt;首頁

&lt;span class="badge"&gt;42&lt;/span&gt;

&lt;/a&gt;

&lt;/li&gt;

&lt;li&gt;

&lt;a href="#"&gt;簡介&lt;/a&gt;

&lt;a href="#"&gt;消息

&lt;span class="badge"&gt;3&lt;/span&gt;

&lt;/ul&gt;

&lt;br&gt;

&lt;h4&gt;清單導航中的激活狀态&lt;/h4&gt;

&lt;ul class="nav nav-pills nav-stacked" style="max-width: 260px;"&gt;

&lt;a href="#"&gt;

&lt;span class="badge pull-right"&gt;42&lt;/span&gt;首頁&lt;/a&gt;

&lt;span class="badge pull-right"&gt;3&lt;/span&gt;消息