Bootstrap Basics Tutorial

Bootstrap Plugins

Bootstrap Badges

This chapter will explain Bootstrap Badges. Badges are similar to tags, but the main difference is that the corners of badges are smoother.

Badge(Badges) are mainly used to highlight new or unread items. To use badges, simply add <span> Add them to links, Bootstrap navigation, and other elements.

The following example demonstrates this:

Online Example

Display unread emails:

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Badge(Badges)/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<a href="#">Mailbox　<span class="badge">50</span></a>
</body>
</html>

Test to see ‹/›

The results are as follows:

When there are no new or unread items, use CSS's :empty The selector, the badge will collapse to indicate that there is no content inside.

Online Example

Display unread messages:

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
　　　　<title>Bootstrap Example　-　Tags/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Badge</h2>
　　<p>.badge class specifies the number of unread messages:</p>
　　<p><a href="#">Inbox　<span class="badge">21</span></a></p>
</div>
</body>
</html>

Test to see ‹/›

Active navigation state

You can place badges in the active pills navigation and list navigation. By using <span> To activate links, see the following example:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example　-　Active navigation state</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Active state in pills navigation</h4>
<ul class="nav　nav-pills">
	<li class="active"><a href="#">Home　<span class="badge">42</span></a></li>
	<li><a href="#">Introduction</a></li>
	<li><a href="#">Messages　<span class="badge">3</span></a></li>
</ul>
<br>
<h4>Active state in list navigation</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="#">Introduction</a></li>
	<li>
		<a href="#">
			<span class="badge pull-right">3</span>
			Message
		</a>
	</li>
</ul>
</body>
</html>

Test to see ‹/›

The results are as follows:

Bootstrap Large Screens Bootstrap Tags