手册
目录
徽章(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>
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.4万人学习
共29课时
62万人学习
共25课时
39.5万人学习
共43课时
71.3万人学习
共25课时
61.9万人学习
共22课时
23.1万人学习
共28课时
34.1万人学习
共89课时
125.8万人学习