徽章

徽章-Bootstrap 5和Material Design 2.0组件

徽章,少量标签和标签组成部分的文档和示例。


基本例子

Example heading New


          <h2>Example heading <span class="badge bg-primary">New</span></h2>
        

尺码

通过使用相对字体大小,徽章缩放以匹配直接父元素的大小 和 em 单位。从v5开始,徽章不再具有链接的焦点或悬停样式。

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

          <h1>Example heading <span class="badge bg-primary">New</span></h1>
          <h2>Example heading <span class="badge bg-primary">New</span></h2>
          <h3>Example heading <span class="badge bg-primary">New</span></h3>
          <h4>Example heading <span class="badge bg-primary">New</span></h4>
          <h5>Example heading <span class="badge bg-primary">New</span></h5>
          <h6>Example heading <span class="badge bg-primary">New</span></h6>
        

纽扣

徽章可以用作链接或按钮的一部分,以提供计数器。


          <button type="button" class="btn btn-primary">
            Notifications<span class="badge bg-danger ms-2">8</span>
          </button>
        

请注意,根据使用方式的不同,徽章可能会使屏幕阅读器的用户感到困惑 和类似的辅助技术。徽章的样式提供了视觉提示 根据他们的目的,这些用户将仅获得徽章内容。取决于 在特定情况下,这些徽章可能看起来像是随机附加的单词或数字, 句子,链接或按钮的结尾。

除非上下文清楚(如“通知”示例所示,否则应理解为 “ 4”是通知的数量),请考虑在视觉上包括其他上下文 隐藏的其他文字。


          <button type="button" class="btn btn-primary">
            Profile <span class="badge bg-danger ms-2">9</span>
            <span class="visually-hidden">unread messages</span>
          </button>
        

色彩

使用我们的后台实用程序类可以快速更改徽章的外观。请注意 当使用Bootstrap的默认 .bg-light 时,您可能需要使用文本颜色 实用程序,例如 .text-dark ,以进行正确的样式设置。这是因为后台实用程序 除了 background-color 以外,请勿设置任何其他内容。

Primary Secondary Success Danger Warning Info Light Dark

          <span class="badge bg-primary">Primary</span>
          <span class="badge bg-secondary">Secondary</span>
          <span class="badge bg-success">Success</span>
          <span class="badge bg-danger">Danger</span>
          <span class="badge bg-warning text-dark">Warning</span>
          <span class="badge bg-info">Info</span>
          <span class="badge bg-light text-dark">Light</span>
          <span class="badge bg-dark">Dark</span>
        

向辅助技术传达含义:
使用颜色添加含义仅提供视觉指示,不会传达给 辅助技术的用户-例如屏幕阅读器。确保信息表示为 颜色可以从内容本身(例如可见文字)中显而易见,也可以包含在内 通过其他方式,例如用 。视觉上隐藏 类.


药丸

使用 .rounded-pill 实用工具类使徽章更圆,并使用更大的 border-radius

Primary Secondary Success Danger Warning Info Light Dark

          <span class="badge rounded-pill bg-primary">Primary</span>
          <span class="badge rounded-pill bg-secondary">Secondary</span>
          <span class="badge rounded-pill bg-success">Success</span>
          <span class="badge rounded-pill bg-danger">Danger</span>
          <span class="badge rounded-pill bg-warning text-dark">Warning</span>
          <span class="badge rounded-pill bg-info">Info</span>
          <span class="badge rounded-pill bg-light text-dark">Light</span>
          <span class="badge rounded-pill bg-dark">Dark</span>
        

图标通知

您可以使用我们的图标 .badge-notification 类可创建类似Facebook的通知。



1

999+

          <a href="">
            <i class="fas fa-envelope fa-lg"></i>
            <span class="badge bg-danger badge-dot"></span>
          </a>

          <a href="">
            <i class="fas fa-envelope fa-lg"></i>
            <span class="badge rounded-pill badge-notification bg-danger">1</span>
          </a>

          <a href="">
            <i class="fas fa-envelope fa-lg"></i>
            <span class="badge rounded-pill badge-notification bg-danger">999+</span>
          </a>