BootStrap--CSS组件-- 徽章(badge)

最新推荐文章于 2025-05-19 16:31:32 发布

原创最新推荐文章于 2025-05-19 16:31:32 发布 · 9.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#BootStrap #CSS组件 #徽章

BootStrap 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了BootStrap中徽章(badge)的使用，常用于显示消息通知的数量，例如最新消息或待审批消息。通过添加特定的badge样式，如badge-danger、badge-success、badge-warning和badge-info，可以实现不同颜色和效果的徽章。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发交互式系统或者信息系统时，经常要显示一些最新收到的消息、需要有多少审批的消息。
在span或者label上应用该badge样式即可

徽章使用

//使用
<a href="#" class="btn btn-default">通知<span class="badge">42</span></a>

<ul class="nav nav-pills nav-stacked" style="width:200px">
    <li><a href="#"><span class="badge pull-right">2</span>Home</a></li>
    <li><a href="#"><span class="badge pull-right">3</span>Profile</a></li>
    <li><a href="#"><span class="badge pull-right">4</span>Message</a></li>
</ul>

//源码，主要是设置具有圆角的背景椭圆框
.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #777;
  border-radius: 10px;
}