layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。
下载地址 : https://www.layui.com/
目录结构
├─css //css目录
│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件：
//引入文件
./layui/css/layui.css
./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js引入文件后,使用模块需加载模块,这是模块化开发,非模块就不说了,官网也不建议,https://www.layui.com/doc/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
//加载css
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<!-- 你的HTML代码 -->
//加载css
<script src="../layui/layui.js"></script>
<script>
//一般直接写在一个js文件中,加载模块
layui.use(['layer', 'form'], function(){
//重命名模块
var layer = layui.layer
,form = layui.form;
//使用模块
layer.msg('Hello World');
});
</script>
</body>
</html>模块用法推荐你遵循 layui 的模块规范建立一个入口文件，并通过 layui.() 方式来加载该入口文件，如下所示：
<script>
layui.config({
base: '/res/js/modules/' //你存放新模块的目录，注意，不是layui的模块目录
}).use('index'); //加载入口
</script> 上述的 index 即为你 /res/js/modules/ 目录下的 index.js，它的内容应该如下：
/**
项目JS主入口
以依赖layui的layer和form模块为例
**/
layui.define(['layer', 'form'], function(exports){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
exports('index', {}); //注意，这里是模块输出的核心，模块名必须和use时的模块名一致
}); layui提供的一些全局配置
layui.config({
dir: '/res/layui/' //layui.js 所在路径（注意，如果是script单独引入layui.js，无需设定该参数。），一般情况下可以无视
,version: false //一般用于更新模块缓存，默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值，如：201610
,debug: false //用于开启调试模式，默认false，如果设为true，则JS模块的节点会保留在页面
,base: '' //设定扩展的Layui模块的所在目录，一般用于外部模块扩展
});动态加载CSS 方法：layui.link(href)
href即为css路径。注意：该方法并非是你使用Layui所必须的，它一般只是用于动态加载你的外部CSS文件。
Layui的模块加载采用核心的 layui.use(mods, callback)方法，当你的JS 需要用到Layui模块的时候，我们更推荐你采用预先加载，因为这样可以避免到处写layui.use的麻烦。你应该在最外层如此定义：
/*
Demo1.js
使用Layui的form和upload模块
*/
layui.use(['form', 'upload'], function(){ //如果只加载一个模块，可以不填数组。如：layui.use('form')
var form = layui.form //获取form模块
,upload = layui.upload; //获取upload模块
//监听提交按钮
form.on('submit(test)', function(data){
console.log(data);
});
//实例化一个上传控件
upload({
url: '上传接口url'
,success: function(data){
console.log(data);
}
})
});layui 的模块接口会绑定在 layui 对象下 layui.laypage //获得laypage模块
除了使用她提供的模块,还可以自定义模块
方法：layui.define([mods], callback)
通过该方法可定义一个 Layui模块。参数mods是可选的，用于声明该模块所依赖的模块。callback即为模块加载完毕的回调函数，它返回一个exports参数，用于输出该模块的接口。
//这样算是内部定义模块吧
layui.define(function(exports){
//do something
exports('demo', function(){
alert('Hello World!');
});
});
//调用模块
layui.demo();exports是一个函数，它接受两个参数，第一个参数为模块名，第二个参数为模块接口，当你声明了上述的一个模块后，你就可以在外部使用了，demo就会注册到layui对象下，即可通过 layui.demo() 去执行该模块的接口。
第一步：确认模块名，假设为：mymod，然后新建一个mymod.js 文件放入项目任意目录下（注意：不用放入layui目录）
第二步：编写test.js 如下：
/**
扩展一个test模块
**/
layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define('layer', callback);
var obj = {
hello: function(str){
alert('Hello '+ (str||'mymod'));
}
};
//输出test接口
exports('mymod', obj);
}); 第三步：设定扩展模块所在的目录，然后就可以在别的JS文件中使用了
//config的设置是全局的
layui.config({
base: '/res/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名
,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});
//你也可以忽略 base 设定的根目录，直接在 extend 指定路径（主要：该功能为 layui 2.2.0 新增）
layui.extend({
mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径，即不跟随 base 路径
})
//使用拓展模块
layui.use(['mymod', 'mod1'], function(){
var mymod = layui.mymod
,mod1 = layui.mod1
,mod2 = layui.mod2;
mymod.hello('World!'); //弹出 Hello World!
});以上是一些基础配置,和模块操作
关于模块的核心，就是 layui.js 的两个底层方法：一个用于定义模块的 layui.define()，一个加载模块的 layui.use()。
在使用时,导入js后,直接可以使用样式,如下下载body中,出现一个笑脸图标
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>有些则是需要加载模块使用的如 表单
依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能
具体内容查看官网 https://www.layui.com/doc/