1.柵格系統與后台布局
1）柵格系統
為了豐富網頁布局，簡化 HTML/CSS 代碼的耦合，並提升多終端的適配能力，layui 在 2.0 的版本中引進了自己的一套具備響應式能力的柵格系統。我們將容器進行了 12 等分，預設了 4*12 種 CSS 排列類，它們在移動設備、平板、桌面中/大尺寸四種不同的屏幕下發揮着各自的作用。
1.柵格布局規范
| 1 | 采用 layui-row 來定義行，如：<div class="layui-row"></div> |
| 2 | 采用類似 layui-col-md* 這樣的預設類來定義一組列（column），且放在行（row）內。其中：
|
| 3 | 列可以同時出現最多四種不同的組合，分別是：xs（超小屏幕，如手機）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈現更加動態靈活的布局。 |
| 4 | 可對列追加類似 layui-col-space5、 layui-col-md-offset3 這樣的預設類來定義列的間距和偏移。 |
| 5 | 最后，在列（column）元素中放入你自己的任意元素填充內容，完成布局！ |
2.導入js和css
<link rel="stylesheet" href="../layui/css/layui.css"/> <script type="text/javascript" src="../layui/layui.js"></script>
<div class="layui-container"> 常規布局（以中型屏幕桌面為例）： <div class="layui-row"> <div class="layui-col-md9" style="background-color: red;"> 你的內容 9/12 </div> <div class="layui-col-md3" style="background-color: green;"> 你的內容 3/12 </div> </div> </div>
layui-container 使屏幕兩端留白
layui-row 使div在同一排，分成12等份
layui-col-md* *代表0~12
移動設備、平板、桌面端的不同表現： <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>
3.布局容器
柵格放入一個帶有 class="layui-container" 的特定的容器中，以便在小屏幕以上的設備中固定寬度，讓列可控。
<div class="layui-container">
<div class="layui-row">
……
</div>
</div>
當然，還可以不固定容器寬度。將柵格或其它元素放入一個帶有 class="layui-fluid" 的容器中，那么寬度將不會固定，而是 100% 適應
<div class="layui-fluid"> …… </div>
4.列間距
通過“列間距”的預設類，來設定列之間的間距。且一行中最左的列不會出現左邊距，最右的列不會出現右邊距。列間距在保證排版美觀的同時，還可以進一步保證分列的寬度精細程度。我們結合網頁常用的邊距，預設了 12 種不同尺寸的邊距。
layui-col-space* 1,3,5,8,10,12，15,18,20，22,28,30
<div class="layui-container"> 常規布局（以中型屏幕桌面為例）： <div class="layui-row layui-col-space30"> <div class="layui-col-md9" style="background-color: red;"> 你的內容 9/12 </div> <div class="layui-col-md3" style="background-color: green;"> 你的內容 3/12 </div> </div> </div>
5.列偏移
對列追加 類似 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>
2）后台布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>layout 后台大布局 - Layui</title> <link rel="stylesheet" href="../src/css/layui.css"> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo">layui 后台布局</div> <!-- 頭部區域（可配合layui已有的水平導航） --> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item"><a href="">控制台</a></li> <li class="layui-nav-item"><a href="">商品管理</a></li> <li class="layui-nav-item"><a href="">用戶</a></li> <li class="layui-nav-item"> <a href="javascript:;">其它系統</a> <dl class="layui-nav-child"> <dd><a href="">郵件管理</a></dd> <dd><a href="">消息管理</a></dd> <dd><a href="">授權管理</a></dd> </dl> </li> </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> <a href="javascript:;"> <img src="http://t.cn/RCzsdCq" class="layui-nav-img"> 賢心 </a> <dl class="layui-nav-child"> <dd><a href="">基本資料</a></dd> <dd><a href="">安全設置</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">退了</a></li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左側導航區域（可配合layui已有的垂直導航） --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:;">所有商品</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">列表一</a></dd> <dd><a href="javascript:;">列表二</a></dd> <dd><a href="javascript:;">列表三</a></dd> <dd><a href="">超鏈接</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">解決方案</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">列表一</a></dd> <dd><a href="javascript:;">列表二</a></dd> <dd><a href="">超鏈接</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">雲市場</a></li> <li class="layui-nav-item"><a href="">發布商品</a></li> </ul> </div> </div> <div class="layui-body"> <!-- 內容主體區域 --> <div style="padding: 15px;">內容主體區域</div> </div> <div class="layui-footer"> <!-- 底部固定區域 --> © layui.com - 底部固定區域 </div> </div> <script src="../src/layui.js"></script> <script> //JavaScript代碼區域 layui.use('element', function(){ var element = layui.element; }); </script> </body> </html>
2.顏色
1）內置的背景色
layui內置了七種背景色，以便你用於各種元素中，如：徽章、分割線、導航等等
赤色：class="layui-bg-red" 橙色：class="layui-bg-orange" 墨綠：class="layui-bg-green" 藏青：class="layui-bg-cyan"
藍色：class="layui-bg-blue" 雅黑：class="layui-bg-black" 銀灰：class="layui-bg-gray"
3.字體圖標
1）使用方式
通過對一個內聯元素（一般推薦用 i標簽）設定 class="layui-icon"，來定義一個圖標，然后對元素加上圖標對應的 font-class
<i class="layui-icon layui-icon-face-smile"></i>
你可以去定義它的顏色或者大小，如： <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
具體圖標代碼可參見https://www.layui.com/doc/element/icon.html
4.動畫
1）使用方式
其中 layui-anim 是必須的，后面跟着的即是不同的動畫類 <div class="layui-anim layui-anim-up"></div> 循環動畫，追加：layui-anim-loop <div class="layui-anim layui-anim-up layui-anim-loop"></div>
2）具體樣式
layui支持以下幾種動畫樣式
| 從最低部往上滑入 | layui-anim-up |
| 微微往上滑入 | layui-anim-upbit |
| 平滑放大 | layui-anim-scale |
| 彈簧式放大 | layui-anim-scaleSpring |
| 漸現 | layui-anim-fadein |
| 漸隱 | layui-anim-fadeout |
| 360度旋轉 | layui-anim-rotate |
| 循環動畫 | layui-anim-loop |
5.按鈕
1）簡單用法
指定class等於layui-btn，默認為墨綠色按鈕
<button type="button" class="layui-btn">一個標准的按鈕</button> <a href="http://www.layui.com" class="layui-btn">一個可跳轉的按鈕</a>
2）基礎樣式
1.主題
layui支持的按鈕樣式主要有以下幾組
| 原始（白色） | 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" |
2.尺寸
| 大型 | class="layui-btn layui-btn-lg" |
| 默認 | class="layui-btn" |
| 小型 | class="layui-btn layui-btn-sm" |
| 迷你 | class="layui-btn layui-btn-xs" |
<button type="button" class="layui-btn layui-btn-fluid">流體按鈕（最大化適應）</button>
3.圓角按鈕
需要使用圓角按鈕只需要在class加入layui-btn-radius
4.圖標按鈕
<button type="button" class="layui-btn"> <i class="layui-icon"></i> 添加 </button> <button type="button" class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon">ဂ</i> </button>
5.按鈕組
將按鈕放入一個class="layui-btn-group"元素中，即可形成按鈕組，按鈕本身仍然可以隨意搭配6.
6.按鈕容器
盡管按鈕在同節點並排時會自動拉開間距，但在按鈕太多的情況，效果並不是很美好。因為你需要用到按鈕容器
<div class="layui-btn-container"> <button type="button" class="layui-btn">按鈕一</button> <button type="button" class="layui-btn">按鈕二</button> <button type="button" class="layui-btn">按鈕三</button> </div>
6.表單
1）案例
在一個容器中設定 class="layui-form" 來標識一個表單元素塊，通過規范好的HTML結構及CSS類，來組裝成各式各樣的表單元素，並通過內置的 form模塊 來完成各種交互。
依賴加載模塊：form （請注意：如果不加載form模塊，select、checkbox、radio等將無法顯示，並且無法使用form相關功能）
<form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">輸入框</label> <div class="layui-input-block"> <input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密碼框</label> <div class="layui-input-inline"> <input type="password" name="password" required lay-verify="required" placeholder="請輸入密碼" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid layui-word-aux">輔助文字</div> </div> <div class="layui-form-item"> <label class="layui-form-label">選擇框</label> <div class="layui-input-block"> <select name="city" lay-verify="required"> <option value=""></option> <option value="0">北京</option> <option value="1">上海</option> <option value="2">廣州</option> <option value="3">深圳</option> <option value="4">杭州</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">復選框</label> <div class="layui-input-block"> <input type="checkbox" name="like[write]" title="寫作"> <input type="checkbox" name="like[read]" title="閱讀" checked> <input type="checkbox" name="like[dai]" title="發呆"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">開關</label> <div class="layui-input-block"> <input type="checkbox" name="switch" lay-skin="switch"> </div> </div> <div class="layui-form-item"> <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> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">文本域</label> <div class="layui-input-block"> <textarea name="desc" placeholder="請輸入內容" class="layui-textarea"></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <script> //Demo layui.use('form', function(){ var form = layui.form; //監聽提交 form.on('submit(formDemo)', function(data){ layer.msg(JSON.stringify(data.field)); return false; }); }); </script>
2）輸入框
required：注冊瀏覽器所規定的必填字段
lay-verify：注冊form模塊需要驗證的類型
class="layui-input"：layui.css提供的通用CSS類
<input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">
3）下拉選擇框
<select name="city" lay-verify=""> <option value="">請選擇一個城市</option> <option value="010">北京</option> <option value="021">上海</option> <option value="0571">杭州</option> </select>
你可以通過設定 selected 來設定默認選中項：
<select name="city" lay-verify=""> <option value="010">北京</option> <option value="021" disabled>上海（禁用效果）</option> <option value="0571" selected>杭州</option> </select>
你還可以通過 optgroup 標簽給select分組：
<select name="quiz">
<option value="">請選擇</option>
<optgroup label="城市記憶">
<option value="你工作的第一個城市">你工作的第一個城市？</option>
</optgroup>
<optgroup label="學生時代">
<option value="你的工號">你的工號？</option>
<option value="你最喜歡的老師">你最喜歡的老師？</option>
</optgroup>
</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>
4）復選框
默認風格： <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
5）開關
其實就是checkbox復選框的“變種”，通過設定 lay-skin="switch" 形成了開關風格
<input type="checkbox" name="xxx" lay-skin="switch"> <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked> <input type="checkbox" name="zzz" lay-skin="switch" lay-text="開啟|關閉"> <input type="checkbox" name="aaa" lay-skin="switch" disabled>
屬性checked可設定默認開
屬性disabled開啟禁用
屬性lay-text可自定義開關兩種狀態的文本
設置value="1"可自定義值，否則選中時返回的就是默認的on
6）單選框
<input type="radio" name="sex" value="nan" title="男"> <input type="radio" name="sex" value="nv" title="女" checked> <input type="radio" name="sex" value="" title="中性" disabled>
屬性title可自定義文本
屬性disabled開啟禁用
設置value="xxx"可自定義值，否則選中時返回的就是默認的on
7）文本域
需要指定
class="layui-textarea"
<textarea name="" required lay-verify="required" placeholder="請輸入" class="layui-textarea"></textarea>
8）組裝行內表單
class="layui-inline"：定義外層行內
class="layui-input-inline"：定義內層行內
<div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">范圍</label> <div class="layui-input-inline" style="width: 100px;"> <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid">-</div> <div class="layui-input-inline" style="width: 100px;"> <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">密碼</label> <div class="layui-input-inline" style="width: 100px;"> <input type="password" name="" autocomplete="off" class="layui-input"> </div> </div> </div>
9）表單方框風格
通過追加 layui-form-pane 的class，來設定表單的方框風格。內部結構不變。
<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>
7.導航
1）水平導航
1.案例
<ul class="layui-nav" lay-filter=""> <li class="layui-nav-item"><a href="">最新活動</a></li> <li class="layui-nav-item layui-this"><a href="">產品</a></li> <li class="layui-nav-item"><a href="">大數據</a></li> <li class="layui-nav-item"> <a href="javascript:;">解決方案</a> <dl class="layui-nav-child"> <!-- 二級菜單 --> <dd><a href="">移動模塊</a></dd> <dd><a href="">后台模版</a></dd> <dd><a href="">電商平台</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">社區</a></li> </ul> <script> //注意：導航 依賴 element 模塊，否則無法進行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); </script>
<ul class="layui-nav"> <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> <li class="layui-nav-item"> <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">修改信息</a></dd> <dd><a href="javascript:;">安全管理</a></dd> <dd><a href="javascript:;">退了</a></dd> </dl> </li> </ul>
2.導航主題
水平導航支持的其它背景主題有：layui-bg-cyan（藏青）、layui-bg-molv（墨綠）、layui-bg-blue（艷藍）
垂直導航支持的其它背景主題有：layui-bg-cyan（藏青）
//如定義一個墨綠背景色的導航 <ul class="layui-nav layui-bg-green" lay-filter=""> … </ul>
2）垂直/側邊導航
垂直導航需要追加class：layui-nav-tree
側邊導航需要追加class：layui-nav-tree layui-nav-side
<ul class="layui-nav layui-nav-tree" lay-filter="test"> <!-- 側邊導航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">默認展開</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">選項1</a></dd> <dd><a href="javascript:;">選項2</a></dd> <dd><a href="">跳轉</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">解決方案</a> <dl class="layui-nav-child"> <dd><a href="">移動模塊</a></dd> <dd><a href="">后台模版</a></dd> <dd><a href="">電商平台</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">產品</a></li> <li class="layui-nav-item"><a href="">大數據</a></li> </ul>
3）面包屑
<span class="layui-breadcrumb">
<a href="">首頁</a>
<a href="">國際新聞</a>
<a href="">亞太地區</a>
<a><cite>正文</cite></a>
</span>
可以通過設置屬性 lay-separator="-" 來自定義分隔符。如：
8.tab選項卡
1）基本案例
<div class="layui-tab"> <ul class="layui-tab-title"> <li class="layui-this">網站設置</li> <li>用戶管理</li> <li>權限分配</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 class="layui-tab-item">內容4</div> <div class="layui-tab-item">內容5</div> </div> </div> <script> //注意：選項卡 依賴 element 模塊，否則無法進行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); </script>
2）tab簡潔風格
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> <ul class="layui-tab-title"> <li class="layui-this">網站設置</li> <li>用戶管理</li> <li>權限分配</li> <li>商品管理</li> <li>訂單管理</li> </ul> <div class="layui-tab-content"></div> </div>
通過追加class：layui-tab-brief 來設定簡潔風格。
值得注意的是，如果存在 layui-tab-item 的內容區域，在切換時自動定位到對應內容。如果不存在內容區域，則不會定位到對應內容。你通常需要設置過濾器，通過 element模塊的監聽tab事件來進行切換操作。
3）帶刪除的tab
與默認相比沒有什么特別的結構，就是多了個屬性 lay-allowClose="true"
<div class="layui-tab" lay-allowClose="true"> <ul class="layui-tab-title"> <li class="layui-this">網站設置</li> <li>用戶基本管理</li> <li>權限分配</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 class="layui-tab-item">4</div> <div class="layui-tab-item">5</div> <div class="layui-tab-item">6</div> </div> </div>
9.表格
1）案例
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>昵稱</th>
<th>加入時間</th>
<th>簽名</th>
</tr>
</thead>
<tbody>
<tr>
<td>賢心</td>
<td>2016-11-29</td>
<td>人生就像是一場修行</td>
</tr>
<tr>
<td>許閑心</td>
<td>2016-11-28</td>
<td>於千萬人之中遇見你所遇見的人，於千萬年之中，時間的無涯的荒野里…</td>
</tr>
</tbody>
</table>
2）基礎屬性
只需要在table標簽上面設置就可以了
| lay-even | 無 | 用於開啟 隔行 背景，可與其它屬性一起使用 |
| lay-skin="屬性值" | line （行邊框風格） row （列邊框風格） nob （無邊框風格） |
若使用默認風格不設置該屬性即可 |
| lay-size="屬性值" | sm （小尺寸） lg （大尺寸） |
若使用默認尺寸不設置該屬性即可 |
10.字段集塊
可以用於顯示文本內容
<fieldset class="layui-elem-field"> <legend>字段集區塊 - 默認風格</legend> <div class="layui-field-box"> 內容區域 </div> </fieldset> <fieldset class="layui-elem-field layui-field-title"> <legend>字段集區塊 - 橫線風格</legend> <div class="layui-field-box"> 內容區域 </div>
