徽章

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

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

                    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 - 用心與你溝通

                    亚洲图色