1. WIKI教程
2. 学习Bootstrap
3. Bootstrap - Badges

Bootstrap - Badges

本章将讨论Bootstrap徽章。 徽章与标签类似; 主要区别在于角落更圆润。

徽章主要用于突出显示新的或未读的项目。 要使用徽章，只需在链接，Bootstrap导航等中添加《span class = "badge"》 。

以下示例演示了这一点 -

<a href = "#">Mailbox <span class = "badge">50</span></a>

新页面打开

当没有新的或未读的项目时，如果内部不存在任何内容，则徽章将通过CSS的:empty选择器简单地折叠。

主动导航状态

您可以将徽章置于活动状态的药丸和列表导航中。 您可以通过将《span class = "badge"》放置到活动链接来实现此目的，如以下示例所示 -

<h4>Example for Active State in Pill </h4>
<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home <span class ="badge">42</span></a></li>
   <li><a href = "#">Profile</a></li>
   <li><a href = "#">Messages <span class = "badge">3</span></a></li>
</ul>
<br>
<h4>Example for Active State in navigations</h4>
<ul class = "nav nav-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 = "#">Profile</a></li>
   <li>
      <a href = "#">
         <span class = "badge pull-right">3</span>
         Messages
      </a>
   </li>
</ul>

新页面打开