頁面元素規范與說明

                    Layui提倡返璞歸真,遵循于原生態的元素書寫規則,所以通常而言,你仍然是在寫基本的HTML和CSS代碼,不同的是,在HTML結構上及CSS定義上需要小小遵循一定的規范。

                    類名(class) 說明
                    布局 / 容器
                    layui-main 用于設置一個寬度為 1140px 的水平居中塊(無響應式)
                    layui-inline 用于將標簽設為內聯塊狀元素
                    layui-box 用于排除一些UI框架(如Bootstrap)強制將全部元素設為box-sizing: border-box所引發的尺寸偏差
                    layui-clear 用于消除浮動(一般不怎么常用,因為layui幾乎沒用到浮動)
                    layui-btn-container 用于定義按鈕的父容器。(layui 2.2.5 新增)
                    layui-btn-fluid 用于定義流體按鈕。即寬度最大化適應。(layui 2.2.5 新增)
                    輔助
                    layui-icon 用于圖標
                    layui-elip 用于單行文本溢出省略
                    layui-unselect 用于屏蔽選中
                    layui-disabled 用于設置元素不可點擊狀態
                    layui-circle 用于設置元素為圓形
                    layui-show 用于顯示塊狀元素
                    layui-hide 用于隱藏元素
                    文本
                    layui-text 定義一段文本區域(如文章),該區域內的特殊標簽(如a、li、em等)將會進行相應處理
                    layui-word-aux 灰色標注性文字,左右會有間隔
                    背景色
                    layui-bg-red 用于設置元素赤色背景
                    layui-bg-orange 用于設置元素橙色背景
                    layui-bg-green 用于設置元素墨綠色背景(主色調)
                    layui-bg-cyan 用于設置元素藏青色背景
                    layui-bg-blue 用于設置元素藍色背景
                    layui-bg-black 用于設置元素經典黑色背景
                    layui-bg-gray 用于設置元素經典灰色背景

                    其它的類一般都是某個元素或模塊所特有,因此不作為我們所定義的公共類。

                    class命名前綴:layui,連接符:-,如:class="layui-form"

                    命名格式一般分為兩種:一:layui-模塊名-狀態或類型,二:layui-狀態或類型。因為有些類并非是某個模塊所特有,他們通常會是一些公共類。如:一(定義按鈕的原始風格):class="layui-btn layui-btn-primary"、二(定義內聯塊狀元素):class="layui-inline"

                    大致記住這些簡單的規則,會讓你在填充HTML的時候顯得更加得心應手。另外,如果你是開發Layui拓展(模塊),你最好也要遵循于類似的規則,并且請勿占用Layui已經命名好的類,假設你是在幫Layui開發一個markdown編輯器,你的css書寫規則應該如下:

                    .layui-markdown{border: 1px solid #e2e2e2;}
                    .layui-markdown-tools{}
                    .layui-markdown-text{}
                          

                    Layui在解析HTML元素時,必須充分確保其結構是被支持的。以Tab選項卡為例:

                    <div class="layui-tab">
                      <ul class="layui-tab-title">
                        <li class="layui-this">標題一</li>
                        <li>標題二</li>
                        <li>標題三</li>
                      </ul>
                      <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">內容1</div>
                        <div class="layui-tab-item">內容2</div>
                        <div class="layui-tab-item">內容3</div>
                      </div>
                    </div>
                          

                    你如果改變了結構,極有可能會導致Tab功能失效。所以在嵌套HTML的時候,你應該細讀各個元素模塊的相關文檔(如果你不是拿來主義)

                    很多時候,元素的基本交互行為,都是由模塊自動開啟。但不同的區域可能需要觸發不同的動作,這就需要你設定我們所支持的自定義屬性來作為區分。如下面的 lay-submitlay-filter即為公共屬性(即以 lay- 作為前綴的自定義屬性):

                    <button class="layui-btn" lay-submit lay-filter="login">登入</button>      
                          

                    目前我們的公共屬性如下所示(即普遍運用于所有元素上的屬性)

                    屬性 描述
                    lay-skin=" " 定義相同元素的不同風格,如checkbox的開關風格
                    lay-filter=" " 事件過濾器。你可能會在很多地方看到他,他一般是用于監聽特定的自定義事件。你可以把它看作是一個ID選擇器
                    lay-submit 定義一個觸發表單提交的button,不用填寫值

                    額,好像有點少的樣子(反正你也基本不會看文檔。。(づ╥﹏╥)づ)。其它的自定義屬性基本都在各自模塊的文檔中有所介紹。

                    其實很多時候并不想陳列條條框框(除了一些特定需要的),所以你會發現本篇的篇幅較短。(哈哈哈哈哈,其實是寫文檔寫得想吐了)

                    layui - 用心與你溝通

                    亚洲图色