1、定義css
layui，是一款採用自身模塊規範編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，跟其餘UI框架比較（好比bootstrap、easyui、findui、topui等等），門檻極低，拿來即用。html
一、與其餘UI對比前端
1.1 layui與easyui
easyui是功能強大可是有不少的組件使用功能是十分強大的，而layui是2016年纔出來的前端框架，如今才更新到2.x版本還有不少的功能沒有完善，也還存在一些不穩定的狀況，可是layui界面簡約美觀，並且容易上手並且有不少組件在layui的社區裏均可以找到，layui的彈出層layer也是layui與別的框架區別。npm
layui 示例bootstrap
easyui 示例前端框架
1.2 layui與bootstrap對比
layui是國人開發的一套框架，2016年出來的，如今已更新到2.X版本了。比較新，輕量級，樣式簡單好看。服務器
bootstrap 相對來講是比較成熟的一個框架，如今已經更新到4.X版本。是一個很成熟的框架，這個大部分人通常都用過。框架
bootstrap 示例編輯器
2、layui的元素由如下組成：模塊化
佈局（柵格、後臺佈局）、顏色、字體圖標、動畫、按鈕、表單、導航條、麪包屑、選項卡、進度條、面板、靜態表格、徽章、時間線、輔助元素等。
3、模塊
layui 提供了豐富的內置模塊，他們皆可經過模塊化的方式按需加載，其中包括：layer、layDate、layPage、laytpl、table、form、upload、element、tree、layeditor、rate、carousel、flow、util、code等。
4、兼容性
Chrome / Firefox / Safari /Internet Explorer 8.0+。
5、使用場景
layui可做爲 PC網頁端後臺系統與前臺界面的速成開發方案。
6、得到 layui（這裏介紹官網首頁下載，還能夠經過Git 倉庫下載、npm 安裝）
能夠在 官網首頁 下載到 layui 的最新版，它通過了自動化構建，更適合用於生產環境。目錄結構以下：
codelayui.code
1. ├─css //css目錄
2. │ │─modules //模塊css目錄（通常若是模塊相對較大，咱們會單獨提取，好比下面三個：）
3. │ │ ├─laydate
4. │ │ ├─layer
5. │ │ └─layim
6. │ └─layui.css //核心樣式文件
7. ├─font //字體圖標目錄
8. ├─images //圖片資源目錄（目前只有layim和編輯器用到的GIF表情）
9. │─lay //模塊核心目錄
10. │ └─modules //各模塊組件
11. │─layui.js //基礎核心庫
12. └─layui.all.js //包含layui.js和全部模塊的合併文件
13.
7、快速上手 得到 layui 後，將其完整地部署到你的項目目錄（或靜態資源服務器），你只須要引入下述兩個文件：
codelayui.code
1. ./layui/css/layui.css
2. ./layui/layui.js //提示：若是是採用非模塊化方式（最下面有講解），此處可換成：./layui/layui.all.js
3.
沒錯，不用去管其它任何文件。由於他們（好比各模塊）都是在最終使用的時候纔會自動加載。這是一個基本的入門頁面：
codelayui.code
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6. <title>開始使用layui</title>
7. <link rel="stylesheet" href="../layui/css/layui.css">
8. </head>
9. <body>
10.
11. <!-- 你的HTML代碼 -->
12.
13. <script src="../layui/layui.js"></script>
14. <script>
15. //通常直接寫在一個js文件中
16. layui.use(['layer', 'form'], function(){
17. var layer = layui.layer
18. ,form = layui.form;
19.
20. layer.msg('Hello World');
21. });
22. </script>
23. </body>
24. </html>
25.
若是你想採用非模塊化方式（即全部模塊一次性加載，儘管咱們並不推薦你這麼作），你也能夠按照下面的方式使用：
codelayui.code
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6. <title>非模塊化方式使用layui</title>
7. <link rel="stylesheet" href="../layui/css/layui.css">
8. </head>
9. <body>
10.
11. <!-- 你的HTML代碼 -->
12.
13. <script src="../layui/layui.all.js"></script>
14. <script>
15. //因爲模塊都一次性加載，所以不用執行 layui.use() 來加載對應模塊，直接使用便可：
16. ;!function(){
17. var layer = layui.layer
18. ,form = layui.form;
19.
20. layer.msg('Hello World');
21. }();
22. </script>
23. </body>
24. </html>
25.
7、吳小朋部分layui示例：
一、登陸（layui默認登陸模板）
二、樹形結構列表以及添加子菜單操做
三、編輯角色功能
四、編輯用戶功能
五、列表展現（添加、編輯、刪除）
六、上傳圖片、富文本編輯功能
七、tab頁切換功能
原文出處：https://www.cnblogs.com/wupeng6/p/11419665.html