Bootstrap_徽章-综合分享-CSWL官方博客

Bootstrap_徽章

颜诗雅（UID:1002）管理员

赞助商

发布于 2025-04-09 597 116

徽章（Badges)用于向内容添加附加信息

在<span> 元素中使用.badge 类和上下文类（如.bg-secondary）来创建矩形徽章。徽章会缩放以匹配父元素的大小（如果有）

<div class="container mt-3">
	<h2>徽章</h2>
	<h1>Example heading <span class="badge bg-secondary">New</span></h1>
	<h2>Example heading <span class="badge bg-secondary">New</span></h2>
	<h3>Example heading <span class="badge bg-secondary">New</span></h3>
	<h4>Example heading <span class="badge bg-secondary">New</span></h4>
	<h5>Example heading <span class="badge bg-secondary">New</span></h5>
	<h6>Example heading <span class="badge bg-secondary">New</span></h6>
</div>

上下文徽章使用任意上下文类（.bg-*）来更改徽章的颜色

"container mt-3">
	<h2>上下文徽章</h2>
	<span class="badge bg-primary">主要</span>
	<span class="badge bg-secondary">次要</span>
	<span class="badge bg-success">成功</span>
	<span class="badge bg-danger">危险</span>
	<span class="badge bg-warning">警告</span>
	<span class="badge bg-info">信息</span>
	<span class="badge bg-light">浅色</span>
	<span class="badge bg-dark">主要</span>

胶囊徽章

使用.rounded-pill 类使徽章更圆润

<div class="container mt-3">
	<h2>胶囊徽章</h2>
	<span class="badge rounded-pill bg-primary">主要</span>
	<span class="badge rounded-pill bg-secondary">次要</span>
	<span class="badge rounded-pill bg-success">成功</span>
	<span class="badge rounded-pill bg-danger">危险</span>
	<span class="badge rounded-pill bg-warning">警告</span>
	<span class="badge rounded-pill bg-info">信息</span>
	<span class="badge rounded-pill bg-light">浅色</span>
	<span class="badge rounded-pill bg-dark">主要</span>
</div>

元素内的徽章在按钮内使用徽章

<div class="container mt-3">
	<h2>按钮内的徽章</h2>
	<button type="button" class="btn btn-primary">消息
		<span class="badge bg-danger">4</span>
	</button>
	<button type="button" class="btn btn-danger">通知
		<span class="badge bg-dark">7</span>
	</button>
</div>

赞赏

参与人数1	元宝+5	理由
陈哥	+ 5	与人为善、

下载声明

每次下载将扣除 1个元宝，VIP会员免费下载，元宝可通过 /发布主题/签到/回帖/获得！
拥有真气  ：点｜排行
拥有元宝  ：个｜兑换
拥有灵石  ：  0枚｜充值

关闭

温馨提示:转载本站资源,请备注本站链接,谢谢配合！

签名：这个人很懒，什么都没留下！

相关帖子

最新回复 (116)

香彩色的云 (UID:10147) Lv.1 练气
2025-07-10

117楼

人生如果错了方向，停止就是进步。

签名：CSWl官方博客！

0
雪舞飘零果酱 (UID:10139) Lv.1 练气
2025-07-10

116楼

一个人越聪明、越善良，他看到别人身上的美德越多；而人越愚蠢、越恶毒，他看到别人身上的缺点也越多。

签名：CSWl官方博客！

0
藯蓝づ (UID:10098) Lv.1 练气
2025-07-10

115楼

只有亲情才能装下三个人，友情不行，爱情更不行。

签名：CSWl官方博客！

0

请先登录后发表评论！

登录注册