Bootstrap3 （Label）和徽章（Badges）

最新推荐文章于 2022-05-14 19:27:45 发布

凌冰_

最新推荐文章于 2022-05-14 19:27:45 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap3

本文链接：https://blog.youkuaiyun.com/hlx20080808/article/details/87874716

Bootstrap3 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用Bootstrap框架中的Label标签和徽章(Badges)来改变网页元素的外观，包括不同样式的标签和徽章的应用场景，以及在导航菜单中结合使用的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" />
		<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="#">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>
		<!--nav-stacked创建堆叠的或垂直的基于标签的导航-->
		<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>