柵格布局規則
1. 采用 layui-row 來定義行，如：<div class="layui-row"></div>
2. 采用類似 layui-col-md* 這樣的預設類來定義一組列（column），且放在行（row）內。其中：
變量md 代表的是不同屏幕下的標記（可選值見下文）
變量* 代表的是該列所占用的12等分數（如6/12），可選值為 1 - 12
如果多個列的“等分數值”總和等於12，則剛好滿行排列。如果大於12，多余的列將自動另起一行。
3. 列可以同時出現最多四種不同的組合，分別是：xs（超小屏幕，如手機）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈現更加動態靈活的布局。
4. 可對列追加類似 layui-col-space5、 layui-col-md-offset3 這樣的預設類來定義列的間距和偏移。
5. 最后，在列（column）元素中放入你自己的任意元素填充內容，完成布局！
移動設備、平板、桌面端的不同表現：
<div class="layui-container"> 常規布局（以中型屏幕桌面為例）： <div class="layui-row"> <div class="layui-col-md9"> 你的內容 9/12 </div> <div class="layui-col-md3"> 你的內容 3/12 </div> </div> 移動設備、平板、桌面端的不同表現： <div class="layui-row"> <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> 移動：6/12 | 平板：6/12 | 桌面：4/12 </div> <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> 移動：6/12 | 平板：6/12 | 桌面：4/12 </div> <div class="layui-col-xs4 layui-col-sm12 layui-col-md4"> 移動：4/12 | 平板：12/12 | 桌面：4/12 </div> <div class="layui-col-xs4 layui-col-sm7 layui-col-md8"> 移動：4/12 | 平板：7/12 | 桌面：8/12 </div> <div class="layui-col-xs4 layui-col-sm5 layui-col-md4"> 移動：4/12 | 平板：5/12 | 桌面：4/12 </div> </div> </div>
柵格的響應式能力，得益於CSS3媒體查詢（Media Queries）的強力支持，從而針對四類不同尺寸的屏幕，進行相應的適配處理
超小屏幕(手機<768px) 小屏幕(平板≥768px) 中等屏幕(桌面≥992px) 大型屏幕(桌面≥1200px)
.layui-container的值 auto 750px 970px 1170px
標記 xs sm md lg
列對應類
* 為1-12的等分數值 layui-col-xs* layui-col-sm* layui-col-md* layui-col-lg*
總列數 12
響應行為 始終按設定的比例水平排列 在當前屏幕下水平排列，如果屏幕大小低於臨界值則堆疊排列
三、響應式公共類：
類名（class） 說明
layui-show-*-block 定義不同設備下的 display: block; * 可選值有：xs、sm、md、lg
layui-show-*-inline 定義不同設備下的 display: inline; * 可選值同上
layui-show-*-inline-block 定義不同設備下的 display: inline-block; * 可選值同上
layui-hide-* 定義不同設備下的隱藏類，即： display: none; * 可選值同上
四、布局容器：
將柵格放入一個帶有 class="layui-container" 的特定的容器中，以便在小屏幕以上的設備中固定寬度，讓列可控。
<div class="layui-container"> <div class="layui-row"> …… </div> </div>
當然，你還可以不固定容器寬度。將柵格或其它元素放入一個帶有 class="layui-fluid" 的容器中，那么寬度將不會固定，而是 100% 適應
<div class="layui-fluid"> …… </div>
五、列間距：
通過“列間距”的預設類，來設定列之間的間距。且一行中最左的列不會出現左邊距，最右的列不會出現右邊距。列間距在保證排版美觀的同時，還可以進一步保證分列的寬度精細程度。我們結合網頁常用的邊距，預設了 12 種不同尺寸的邊距，分別是：
layui-col-space1 列之間間隔 1px
layui-col-space3 列之間間隔 3px
layui-col-space5 列之間間隔 5px
<div class="layui-row layui-col-space10"> <div class="layui-col-md4"> 1/3 </div> <div class="layui-col-md4"> 1/3 </div> <div class="layui-col-md4"> 1/3 </div> </div>
六、列偏移：
對列追加 類似 layui-col-md-offset* 的預設類，從而讓列向右偏移。其中 * 號代表的是偏移占據的列數，可選中為 1 - 12。
如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，讓該列向右偏移3個列寬度
<div class="layui-row"> <div class="layui-col-md4"> 4/12 </div> <div class="layui-col-md4 layui-col-md-offset4"> 偏移4列，從而在最右 </div> </div>
請注意，列偏移可針對不同屏幕的標准進行設定，比如上述的例子，只會在桌面屏幕下有效，當低於桌面屏幕的規定的臨界值，就會堆疊排列。
七、柵格嵌套：
理論上，你可以對柵格進行無窮層次的嵌套，這更加增強了柵格的表現能力。而嵌套的使用非常簡單。在列元素（layui-col-md*）中插入一個行元素（layui-row），即可完成嵌套。
<div class="layui-row layui-col-space5"> <div class="layui-col-md5"> <div class="layui-row grid-demo"> <div class="layui-col-md3"> 內部列 </div> <div class="layui-col-md9"> 內部列 </div> <div class="layui-col-md12"> 內部列 </div> </div> </div> <div class="layui-col-md7"> <div class="layui-row grid-demo grid-demo-bg1"> <div class="layui-col-md12"> 內部列 </div> <div class="layui-col-md9"> 內部列 </div> <div class="layui-col-md3"> 內部列 </div> </div> </div> </div>
八、讓IE8/9兼容柵格：
事實上IE8和IE9並不支持媒體查詢（Media Queries），但你可以使用下面的補丁完美兼容！該補丁來自於開源社區：
<!-- 讓IE8/9支持媒體查詢，從而兼容柵格 --> <!--[if lt IE 9]> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
將上述代碼放入你頁面 <body> 標簽內的任意位置
按鈕
向任意HTML元素設定class="layui-btn"，建立一個基礎按鈕。通過追加格式為layui-btn-{type}的class來定義其它按鈕風格。
內置的按鈕class可以進行任意組合，從而形成更多種按鈕風格。
<button class="layui-btn">一個標准的按鈕</button> <a href="http://www.layui.com" class="layui-btn">一個可跳轉的按鈕</a>
主題 組合
原始 class="layui-btn layui-btn-primary"
默認 class="layui-btn"
百搭 class="layui-btn layui-btn-normal"
暖色 class="layui-btn layui-btn-warm"
警告 class="layui-btn layui-btn-danger"
禁用 class="layui-btn layui-btn-disabled"
尺寸 組合
大型 class="layui-btn layui-btn-lg"
默認 class="layui-btn"
小型 class="layui-btn layui-btn-sm"
迷你 class="layui-btn layui-btn-xs"
混用 組合
大型百搭 class="layui-btn layui-btn-lg layui-btn-normal"
正常暖色 class="layui-btn layui-btn-warm"
小型警告 class="layui-btn layui-btn-sm layui-btn-danger"
迷你禁用 class="layui-btn layui-btn-xs layui-btn-disabled"
圓角
默認 class="layui-btn layui-btn-radius"
圖標
<button class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon">ဂ</i> </button>
按鈕組
將按鈕放入一個class="layui-btn-group"元素中，即可形成按鈕組，按鈕本身仍然可以隨意搭配
<div class="layui-btn-group"> <button class="layui-btn">增加</button> <button class="layui-btn">編輯</button> <button class="layui-btn">刪除</button> </div>
按鈕容器
盡管按鈕在同節點並排時會自動拉開間距，但在按鈕太多的情況，效果並不是很美好。因為你需要用到按鈕容器
<div class="layui-btn-container"> <button class="layui-btn">按鈕一</button> <button class="layui-btn">按鈕二</button> <button class="layui-btn">按鈕三</button> </div>
顏色
https://www.layui.com/doc/element/color.html
圖標
https://www.layui.com/doc/element/icon.html
表單
在一個容器中設定 class="layui-form" 來標識一個表單元素塊，通過規范好的HTML結構及CSS類，來組裝成各式各樣的表單元素，並通過內置的 form模塊 來完成各種交互。
依賴加載模塊：form （請注意：如果不加載form模塊，select、checkbox、radio等將無法顯示，並且無法使用form相關功能）
行區塊結構
下述是基本的行區塊結構，它提供了響應式的支持。但如果你不大喜歡，你可以換成你的結構，但必須要在外層容器中定義class="layui-form"，form模塊才能正常工作。
<div class="layui-form-item"> <label class="layui-form-label">標簽區域</label> <div class="layui-input-block"> 原始表單元素區域 </div> </div>
輸入框
<input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">
required：注冊瀏覽器所規定的必填字段
lay-verify：注冊form模塊需要驗證的類型
class="layui-input"：layui.css提供的通用CSS類
下拉選擇框
<select name="city" lay-verify=""> <option value="">請選擇一個城市</option> <option value="010">北京</option> <option value="021">上海</option> <option value="0571">杭州</option> </select>
帶搜索的選擇框
通過設定屬性 lay-search 來開啟搜索匹配功能
<select name="city" lay-verify="" lay-search> <option value="010">layer</option> <option value="021">form</option> <option value="0571" selected>layim</option> …… </select>
屬性selected可設定默認項
屬性disabled開啟禁用，select和option標簽都支持
復選框
默認風格：
<input type="checkbox" name="" title="寫作" checked> <input type="checkbox" name="" title="發呆"> <input type="checkbox" name="" title="禁用" disabled>
原始風格：
<input type="checkbox" name="" title="寫作" lay-skin="primary" checked> <input type="checkbox" name="" title="發呆" lay-skin="primary"> <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
屬性title可自定義文本（溫馨提示：如果只想顯示復選框，可以不用設置title）
屬性checked可設定默認選中
屬性lay-skin可設置復選框的風格
設置value="1"可自定義值，否則選中時返回的就是默認的on
組裝行內表單
class="layui-inline"：定義外層行內
class="layui-input-inline"：定義內層行內
通過追加 layui-form-pane 的class，來設定表單的方框風格。內部結構不變。我們的Fly社區用的就是這個風格。
<form class="layui-form layui-form-pane" action=""> 內部結構都一樣，值得注意的是 復選框/開關/單選框 這些組合在該風格下需要額外添加 pane屬性（否則會看起來比較別扭），如： <div class="layui-form-item" pane> <label class="layui-form-label">單選框</label> <div class="layui-input-block"> <input type="radio" name="sex" value="男" title="男"> <input type="radio" name="sex" value="女" title="女" checked> </div> </div> </form>