頁面元素規范與說明
* * * * *
Layui提倡返璞歸真，遵循于原生態的元素書寫規則，所以通常而言，你仍然是在寫基本的HTML和CSS代碼，不同的是，在HTML結構上及CSS定義上需要小小遵循一定的規范。
CSS內置公共基礎類
類名（class） 說明
布局
layui-main 用于設置一個寬度為 1140px 的水平居中塊（無響應式）
layui-inline 用于將標簽設為內聯塊狀元素
layui-box 用于排除一些UI框架（如Bootstrap）強制將全部元素設為box-sizing: border-box所引發的尺寸偏差
layui-clear 用于消除浮動（一般不怎么常用，因為layui幾乎沒用到浮動）
輔助
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 用于設置元素經典灰色背景
其它的類一般都是某個元素或模塊所特有，因此不作為我們所定義的公共類。
CSS命名規范
class命名前綴：layui，連接符：-，如：class="layui-form"
命名格式一般分為兩種：一：layui-模塊名-狀態或類型，二：layui-狀態或類型。因為有些類并非是某個模塊所特有，他們通常會是一些公共類。如：一（定義按鈕的原始風格）：class="layui-btn layui-btn-primary"、二（定義內聯塊狀元素）：class="layui-inline"
大致記住這些簡單的規則，會讓你在填充HTML的時候顯得更加得心應手。另外，如果你是開發Layui拓展（模塊），你最好也要遵循于類似的規則，并且請勿占用Layui已經命名好的類，假設你是在幫Layui開發一個markdown編輯器，你的css書寫規則應該如下：
CSSlayui.code
.layui-markdown{border: 1px solid #e2e2e2;}
.layui-markdown-tools{}
.layui-markdown-text{}
HTML規范：結構
Layui在解析HTML元素時，必須充分確保其結構是被支持的。以Tab選項卡為例：
HTMLlayui.code
<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的時候，你應該細讀各個元素模塊的相關文檔（如果你不是拿來主義）
HTML規范：常用公共屬性
很多時候，元素的基本交互行為，都是由模塊自動開啟。但不同的區域可能需要觸發不同的動作，這就需要你設定我們所支持的自定義屬性來作為區分。如下面的 lay-submit、lay-filter即為公共屬性（即以 lay- 作為前綴的自定義屬性）：
codelayui.code
`<button class="layui-btn" lay-submit lay-filter="login">登入</button>`
目前我們的公共屬性如下所示（即普遍運用于所有元素上的屬性）
屬性 描述
lay-skin=" " 定義相同元素的不同風格，如checkbox的開關風格
lay-filter=" " 事件過濾器。你可能會在很多地方看到他，他一般是用于監聽特定的自定義事件。你可以把它看作是一個ID選擇器
lay-submit 定義一個觸發表單提交的button，不用填寫值
額，好像有點少的樣子（反正你也基本不會看文檔。。(づ╥﹏╥)づ）。其它的自定義屬性基本都在各自模塊的文檔中有所介紹。
結語
其實很多時候并不想陳列條條框框（除了一些特定需要的），所以你會發現本篇的篇幅較短。（哈哈哈哈哈，其實是寫文檔寫得想吐了）
