Bootstrap3 （Label）和徽章（Badges）

快来打我* 2023-10-18 14:47 38阅读 0赞

Label标签可用于计数、提示或页面上其他的标记显示。使用 class **.label** 来显示标签；

也可以使用修饰的 class **label-default、label-primary、label-success、label-info、label-warning、label-danger** 来改变标签的外观

![20190222111448764.png][]

徽章（Badges）。徽章与标签相似，主要的区别在于徽章的边角更加圆滑。

![20190222111554631.png][]

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 **<span class="badge">** 添加到链接、Bootstrap 导航等这些元素上即可.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

**导入相应的文件：**

**源代码：**

<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="#">Mailbox <span class="badge">your</span></a><br /><br /><br />
    		
    		<h4>胶囊式导航中的激活状态</h4>
    			<ul class="nav nav-pills ">
    				<li class="active"><a href="#">index<span class="badge">100</span></a></li>
    				<li ><a href="#">login</a></li>
    				<li ><a href="#">register<span class="badge">3</span></a></li>
    			</ul>
    		<h4>列表导航中的激活状态</h4>
    		
    		<ul class="nav nav-pills nav-stacked">
    				<li class="active"><a href="#">index<span class="badge pull-right">100</span></a></li>
    				<li ><a href="#">login</a></li>
    				<li ><a href="#">register<span class="badge pull-right">3</span></a></li>
    			</ul>
    	</body>

[20190222111448764.png]: https://img-blog.csdnimg.cn/20190222111448764.png
[20190222111554631.png]: https://img-blog.csdnimg.cn/20190222111554631.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190222111653110.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70