查看主题内容
不期待突如其来的好运，只希望所有的努力终有回报。
哪里有阴影，哪里就有光。
徽章（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>
请先登录后发表评论！
