github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
一套开源的 Web UI 组件库。采用自身极简的模块化规范，并遵循原生 HTML/CSS/JS 的开发模式，极易上手，开箱即用。非常适合网页界面的快速构建。
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2281 Commits
4 Branches
130 Tags
42 MiB
 
 
Tree: 130533e967
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '130533e967'
${ noResults }
layui/docs/badge/index.md

2.5 KiB
Raw Blame History

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>

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