欢迎来访 CSWL官方博客 http://bbs.cswl.top/ 本站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请点击[ 这里]进行反馈处理！
38 0 0
  2. 综合分享
  3. Bootstrap_徽章

Bootstrap_徽章

颜诗雅 管理员 赞助商 V
2025-04-09 346

徽章（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>
 
markup

上下文徽章使用任意上下文类（.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>
 
markup

胶囊徽章

使用.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>
 
markup

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

<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>
 
markup

 

赞赏
参与人数1 元宝+5 理由
陈哥 + 5 与人为善、
下载声明
每次下载将扣除 1个元宝，VIP会员免费下载，元宝可通过 /发布主题/签到/回帖/获得！
拥有真气  ： 点｜排行
拥有元宝  ： 个｜兑换
拥有灵石  ：  0枚｜充值
关闭
本贴链接：http://bbs.cswl.top/thread-396.htm
温馨提示：转载本站资源请备注以上链接谢谢配合！
签名：这个人很懒，什么都没留下！
收藏的用户（0） X
正在加载信息~
相关帖子
最新回复 (38)
  • 啊九 (UID:10084) Lv.8 渡劫
    2025-04-17
    39楼

    签名：开开心心每一天！
    0
  • 仙女绛雪 (UID:10125) Lv.1 练气
    2025-04-09
    38楼

    一个人思虑太多，就会失去做人的乐趣。

    签名：CSWl官方博客！
    0
  • 小熊可爱の (UID:10124) Lv.1 练气
    2025-04-09
    37楼

    一个人知道自己为什么而活，就可以忍受任何一种生活。

    签名：CSWl官方博客！
    0

请先登录后发表评论！

登录 注册
返回
版块热门
请先登录后发表评论！
38