Bootstrap 徽章



  • 定义和使用

    徽章用于将附加信息添加到任何内容;在<span>元素中将 .badge 类与上下文类(例如.badge-secondary)一起使用,以创建矩形标记。
    请注意,徽章会缩放以匹配父元素的大小(如果有):
    <div class="container">
       <h1>标题内容 <span class="badge badge-secondary">New</span></h1>
       <h2>标题内容 <span class="badge badge-secondary">New</span></h2>
       <h3>标题内容 <span class="badge badge-secondary">New</span></h3>
       <h4>标题内容 <span class="badge badge-secondary">New</span></h4>
       <h5>标题内容 <span class="badge badge-secondary">New</span></h5>
       <h6>标题内容 <span class="badge badge-secondary">New</span></h6>
    </div>
    
    输出结果如下:
    标题内容 New
    标题内容 New
    标题内容 New
    标题内容 New
    标题内容 New
    标题内容 New
  • 徽章颜色

    使用类(.badge- *)来更改徽章的颜色:
    <div class="container">
       <span class="badge badge-primary">Primary</span>
       <span class="badge badge-secondary">Secondary</span>
       <span class="badge badge-success">Success</span>
       <span class="badge badge-danger">Danger</span>
       <span class="badge badge-warning">Warning</span>
       <span class="badge badge-info">Info</span>
       <span class="badge badge-light">Light</span>
       <span class="badge badge-dark">Dark</span>
    </div>
    
    输出结果如下:
    Primary Secondary Success Danger Warning Info Light Dark
  • 圆丸形徽章

    使用 .badge-pill 类设置徽章成丸形状:
    <div class="container">
       <span class="badge badge-pill badge-primary">Primary</span>
       <span class="badge badge-pill badge-secondary">Secondary</span>
       <span class="badge badge-pill badge-success">Success</span>
       <span class="badge badge-pill badge-danger">Danger</span>
       <span class="badge badge-pill badge-warning">Warning</span>
       <span class="badge badge-pill badge-info">Info</span>
       <span class="badge badge-pill badge-light">Light</span>
       <span class="badge badge-pill badge-dark">Dark</span>
    </div>
    
    输出结果如下:
    Primary Secondary Success Danger Warning Info Light Dark
  • 元素内的徽章

    在按钮内使用徽章的示例:
    <div class="container">
     <button type="button" class="btn btn-primary">
       消息 <span class="badge badge-light">4</span>
     </button>
    </div>
    
    输出结果如下: