baoying/www/static/layuiAdmin/dist/views/component/badge/index.html

<title>徽章</title>

<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>组件</cite></a>
    <a><cite>徽章</cite></a>
  </div>
</div>

<style>
/* 这段样式只是用于演示 */

</style>

<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">小徽章大家族</div>
        <div class="layui-card-body">
          
          <br>小圆点：
          
          <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>
          
          <br><br>常规弧形徽章：
          
          <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>
          
          <br><br>边框徽章：
          
          <span class="layui-badge-rim">6</span>
          <span class="layui-badge-rim">Hot</span>
          
          <br><br>
        
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">与其它元素的搭配</div>
        <div class="layui-card-body">
          
          <br>
          
          <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>
           
          <br><br>
           
          <ul class="layui-nav style=" text-align:="" right;"=""> &lt;-- 小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单 --&gt;
            <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>
          <br>
           
          <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
              <li class="layui-this">网站设置</li>
              <li>用户管理<span class="layui-badge-dot"></span></li>
              <li>最新邮件<span class="layui-badge">99+</span></li>
            </ul>
            <div class="layui-tab-content"></div>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</div>

<script>
layui.use(['admin'], function(){
  var $ = layui.$
  ,admin = layui.admin
  ,element = layui.element
  ,router = layui.router();

  element.render();
});
</script>