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

38 0 0

Bootstrap_徽章教程技术

颜诗雅管理员

发布于 2025-04-09 168 38

徽章（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 个经验，经验可通过 /发布主题/签到/回帖/获得！
拥有经验  ：点｜排行
拥有金币  ：枚｜兑换
拥有现金  ：  0｜充值

关闭

帖子版权申明

1、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请反馈给: 【站长】进行删除处理！
2、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
3、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向【站长】举报！
4、本站资源大多存储在云盘，如发现链接失效可以点这里进行反馈我们会第一时间更新。

本贴地址：http://m.xiyuanw.cn/thread-396.htm