Label标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签；
也可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观
徽章（Badges）。徽章与标签相似，主要的区别在于徽章的边角更加圆滑。
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可.
导入相应的文件：
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" target="_blank" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" target="_blank" rel="external nofollow" />
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body {
padding: 10px;
}
</style>
源代码：
<body>
<h3> label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观</h3>
<span class="label label-default">default</span>
<span class="label label-primary">primary</span>
<span class="label label-success">success</span>
<span class="label label-info">info</span>
<span class="label label-warning">warning</span>
<span class="label label-danger">danger</span><br /><br /><br />
<!--。徽章与标签相似，主要的区别在于徽章的边角更加圆滑。-->
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Mailbox <span class="badge">your</span></a><br /><br /><br />
<h4>胶囊式导航中的激活状态</h4>
<ul class="nav nav-pills ">
<li class="active"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >index<span class="badge">100</span></a></li>
<li ><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >login</a></li>
<li ><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >register<span class="badge">3</span></a></li>
</ul>
<h4>列表导航中的激活状态</h4>
<!--nav-stacked创建堆叠的或垂直的基于标签的导航-->
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >index<span class="badge pull-right">100</span></a></li>
<li ><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >login</a></li>
<li ><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >register<span class="badge pull-right">3</span></a></li>
</ul>
</body>