<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 徽章

      徽章是一個修飾性的元素,它們本身細小而并不顯眼,但摻雜在其它元素中就顯得尤為突出了。頁面往往因徽章的陪襯,而顯得十分和諧。
      快速使用

      不妨先來看看 徽章 這個小小的大家族吧:

      6 99 61728 6 Hot

      你可能已經敏銳地發現,除去花枝招展的七種顏色,徽章具有三種不同的風格類型:小圓點橢圓體邊框體

            
      小圓點,通過 layui-badge-dot 來定義,里面不能加文字
      <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>
       
      橢圓體,通過 layui-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>
       
      邊框體,通過 layui-badge-rim 來定義
      <span class="layui-badge-rim">6</span>
      <span class="layui-badge-rim">Hot</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>
            

      導航


      <ul class="layui-nav" style="text-align: right;"> <-- 小Tips:這里有沒有發現,設置導航靠右對齊(或居中對齊)其實非常簡單 -->
        <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>
            

      選項卡(所有風格都支持,這里以簡約風格為例)


      • 網站設置
      • 用戶管理
      • 最新郵件99+
      <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>
            


      而至于與其它更多元素的搭配,就由你自由把控吧!

      結語

      其實,在與其它元素的搭配中,你要做的,無非就是合理運用這幾點:邊距 背景色,徽章必然大顯神威!

      layui - 用心與你溝通

      亚洲图色