Bootstrap badge


This chapter will explain Bootstrap badges (Badges). Badges are similar to labels, with the main difference being that the corners of the badge are more rounded.

Badges are mainly used to highlight new or unread items. To use badges, just add <span class="badge"> to links, Bootstrap navigation, and other elements.

The following example demonstrates this:

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 徽章（Badges）</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

Run Example»

Click "Run instance" button to view the online instance

When there are no new or unread items, through the CSS :empty selector, the badge will collapse, indicating that there are no content.

Activate Navigation State

You can place badges in capsule navigation and list navigation in the activated state. Activate the link by using <span class="badge">, as shown in the following example:

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 激活导航状态</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<h4>胶囊式导航中的激活状态</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>列表导航中的激活状态</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>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Running results: