手册目录
Bootstrap 5教程
徽章(Badges)用于向内容添加附加信息:
在 <span> 元素中使用 .badge 类和上下文类(如 .bg-secondary)来创建矩形徽章。请注意,徽章会缩放以匹配父元素的大小(如果有):
<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>
请使用任意上下文类 (.bg-*) 来更改徽章的颜色:
<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 类使徽章更圆润:
<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>
在按钮内使用徽章的例子:
<button type="button" class="btn btn-primary"> 消息 <span class="badge bg-danger">4</span> </button>
相关视频
科技资讯
24小时阅读榜
1
2
3
4
5
6
7
8
9
10
精品课程
共5课时 | 17.4万人学习
共49课时 | 78.3万人学习
共29课时 | 62.6万人学习
共25课时 | 39.8万人学习
共43课时 | 73.9万人学习