layui/docs/badge/index.md

title	toc
徽章 badge	true

徽章

徽章 badge 通常作为修饰用途而存在，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。

普通徽章

  <span class="layui-badge">6</span>
<span class="layui-badge">99</span>
<span class="layui-badge">61728</span>
<span class="layui-badge">赤</span>
<span class="layui-badge layui-bg-orange">橙</span>
<span class="layui-badge layui-bg-green">绿</span>
<span class="layui-badge layui-bg-cyan">青</span>
<span class="layui-badge layui-bg-blue">蓝</span>
<span class="layui-badge layui-bg-black">深</span>
<span class="layui-badge layui-bg-gray">浅</span>
 
<hr class="ws-space-16">
 
边框徽章：
<span class="layui-badge-rim">6</span>
<span class="layui-badge-rim">Hot</span>
  

小圆点

  <span class="layui-badge-dot"></span>
<span class="layui-badge-dot layui-bg-orange"></span>
<span class="layui-badge-dot layui-bg-green"></span>
<span class="layui-badge-dot layui-bg-cyan"></span>
<span class="layui-badge-dot layui-bg-blue"></span>
<span class="layui-badge-dot layui-bg-black"></span>
<span class="layui-badge-dot layui-bg-gray"></span>
  

徽章的搭配

  <button class="layui-btn">
  按钮甲
  <span class="layui-badge layui-bg-gray">1</span>
</button>
<button class="layui-btn">
  按钮乙
  <span class="layui-badge-dot layui-bg-orange"></span>
</button>
 
<hr class="ws-space-16">
 
<ul class="layui-nav" style="text-align: right;">
  <li class="layui-nav-item">
    <a href="">菜单甲<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="">菜单乙<span class="layui-badge-dot"></span></a>
  </li>
</ul>
 
<hr class="ws-space-16">
  
<div class="layui-tab layui-tab-brief">
  <ul class="layui-tab-title">
    <li class="layui-this">标签1</li>
    <li>标签2<span class="layui-badge-dot"></span></li>
    <li>标签3<span class="layui-badge">99+</span></li>
  </ul>
  <div class="layui-tab-content"></div>
</div>
  

徽章还可以自由佩戴在其他更多元素中，此处不做逐一列举。