1、下載layui（國產框架layui）
（1）目錄結果
css：css目錄
font ：字體圖標目錄
images ：圖片資源目錄（目前只有layim和編輯器用到的GIF表情）
lay ：模塊核心目錄
layui.js ：基礎核心庫
layui.all.js ：包含layui.js和所有模塊的合並文件
（2）介紹
國產框架、發布於2016年，與BootStrap類似
2、入門程序
（1）hello layui入門程序
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>layui</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <script src="layui/layui.js"></script> <script> layui.use(['layer', 'form'], function () { layer.msg('Hello Layui'); }); </script> </body> </html>
測試效果：
3、柵格系統
（1）測試代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>layui</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <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> </body> </html>
（2）測試結果
桌面：
移動設備：
平板：
4、顏色
（1）背景色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>layui</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <div> <p class="layui-bg-red"> 君不見黃河之水天上來，奔流到海不復回。 君不見高堂明鏡悲白發，朝如青絲暮成雪。 人生得意須盡歡，莫使金樽空對月。 天生我材必有用，千金散盡還復來。 烹羊宰牛且為樂，會須一飲三百杯。 岑夫子，丹丘生，將進酒，杯莫停。 與君歌一曲，請君為我傾耳聽。 鍾鼓饌玉不足貴，但願長醉不復醒。 古來聖賢皆寂寞，惟有飲者留其名。 陳王昔時宴平樂，斗酒十千恣歡謔。 主人何為言少錢，徑須沽取對君酌。 五花馬，千金裘， 呼兒將出換美酒，與爾同銷萬古愁。 </p> </div> </body> </html>
（2）內置的七種背景色
- 赤色：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"
5、字體圖標
（1）編碼的方式
<i class="layui-icon" style="font-size: 30px; color: #1E9FFF;"></i>
（2）class方式
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
其它字體圖標：
6、動畫
<body> <div class="layui-anim layui-anim-up" style="background-color: red; width: 100px;height: 100px ; border-radius: 50%"></div> <div class="layui-anim layui-anim-up layui-anim-loop" style="background-color: red; width: 100px;height: 100px ; border-radius: 50%"></div> </body>
7、按鈕
（1）選定圖標主題
<div class="layui-btn-group"> <button type="button" class="layui-btn">增加</button> <button type="button" class="layui-btn">編輯</button> <button type="button" class="layui-btn">刪除</button> </div>
（2）圖標
<div class="layui-btn-group"> <button type="button" class="layui-btn layui-btn-sm"> <i class="layui-icon"></i> </button> <button type="button" class="layui-btn layui-btn-sm"> <i class="layui-icon"></i> </button> <button type="button" class="layui-btn layui-btn-sm"> <i class="layui-icon"></i> </button> <button type="button" class="layui-btn layui-btn-sm"> <i class="layui-icon"></i> </button> </div>
（3）圖標
<div class="layui-btn-group"> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon"></i> </button> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon"></i> </button> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon"></i> </button> </div>
