徽章Badge

可添加至任何行元素内,自定义添加背景色,更多颜色属性请至属性中查询

徽章 Badge - 图1

  1. <span class="badge">9</span>
  2. <span class="badge bg-red">Hot</span>
  3. <span class="badge bg-green">New</span>
  4. <span class="badge bg-orange">orange</span>
  5. <span class="badge bg-blue">blue</span>
  6. <span class="badge bg-lime">lime</span>
  7. <span class="badge bg-navy">navy</span>
  8. <span class="badge bg-pink">pink</span>

徽章 Badge - 图2

  1. <a href="#" class="badge">9</a>
  2. <a href="#" class="badge bg-red">Hot</a>
  3. <a href="#" class="badge bg-green">New</a>
  4. <a href="#" class="badge bg-orange">orange</a>
  5. <a href="#" class="badge bg-blue">blue</a>
  6. <a href="#" class="badge bg-lime">lime</a>
  7. <a href="#" class="badge bg-navy">navy</a>
  8. <a href="#" class="badge bg-pink">pink</a>

继承Inherit

添加class="inherit"使其继承父级元素的字体大小

徽章 Badge - 图3

  1. <h1>h1. heading <span class="badge inherit">New</span></h1>

自定义风格Custom Style

可以使用自定义风格工具快速创建CSS

徽章 Badge - 图4

  1. <span class="badge mystyle">span</span>
  2. <a href="#" class="badge mystyle">Link</a>