Bootstrap badge
May 04, 2021 Bootstrap
Table of contents
Bootstrap badges
This chapter explains bootstrap badges. Badges are similar to labels, the main difference being that the corners of the badges are more sleek.
Badges are primarily used to highlight new or unread items. To use a badge, simply add the elements of the link, Bootstrap navigation, and more.
The following example demonstrates this:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 徽章（Badges）</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" ></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<a href="#">Mailbox <span class="badge">50</span></a>
</body>
</html>
The result is as follows:
When there are no new or unread items, through the CSS's :empty selector, the badge folds up to indicate that there is nothing in it.
Activate the navigation state
You can place badges in the capsule navigation and list navigation in the active state. Activate the link by using the slt;class"badge", as shown in the following example:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 激活导航状态</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" ></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" ></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>
The result is as follows:
