116 0 0

Bootstrap_徽章

 颜诗雅 V UID:1002 渡劫期赞助商
2025-04-09 881

徽章(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金币
  • 附件名:
    加载中...
  • 附件分类:
  • 账户经验: 0 点 [排行]
  • 账户金币: 0 个 [兑换]
  • 账户灵石: 0 枚 [充值]
  • 上传用户:  颜诗雅 时间:2025-04-09
  • 下载地址:
相关帖子
看过的人 (2)
  •  yh745234
  • geruixi
最新回复 (116)
  • 香彩色的云 UID:10147 练气期
    2025-07-10
    117

    登录后可见回帖内容

    签名:http://bbs.cswl.top/
  • 雪舞飘零果酱 UID:10139 练气期
    2025-07-10
    116

    登录后可见回帖内容

    签名:http://bbs.cswl.top/
  • 藯蓝づ UID:10098 练气期
    2025-07-10
    115

    登录后可见回帖内容

    签名:http://bbs.cswl.top/

请先登录后发表评论!

返回
每日签到
今日共4人签到
请先登录
周一
周二
周三
周四
周五
周六
周日

2025年乙巳年蛇年
13:36:00
公历日期
9月26日
农历日期
八月初五
星期
星期五
下午好
金秋时节,愿您收获满满
距离国庆节还有5天
请先登录后发表评论!