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>