layUI-基础说明
21年开始接触layui，但是很遗憾也在这一年10月13日官网下线了。
不过作为一款开源模块化的前端UI框架，还是非常值得学习的，特别是对于我这种习惯后端的人。下面是我自己学习后的笔记总结。当然，她目前还是有许多的镜像网站的：Layui - 经典开源模块化前端 UI 框架（官方文档镜像站）
1.开始使用
首先作为一款轻量级框架，我这里还是使用最简单的下载引入的方式，直接完整地放置到项目目录中。
然后，在HTML中直接引入。
<link rel="stylesheet" href="LayUI/css/layui.css">
<script src="LayUI/layui.js"></script>
最后，根据需求做模块化加载就可以了。
layui.use(['layer', 'laydate'], function(){
var layer = layui.layer
,laydate = layui.laydate;
//do something
});
//引用所有模块（layui 2.6 开始支持）
layui.use(function(){
var layer = layui.layer
,laydate = layui.laydate
,table = layui.table;
//…
//do something
});
2.定义模块
方法：layui.define([mods], callback)
首先，编写定义的模块，这里举例是单独建立一个demo.js
/** demo.js **/
layui.define(function(exports){
//do something
exports('demo', {
msg: 'Hello Demo'
});
});
接着，设定扩展模块的目录。
//config的设置是全局的
layui.config({
base: '/res/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名
,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});
然后就可以在其它页面通过加载内置模块的方式使用了。
3.页面元素
（1）公共基础类
| 类名（class） | 说明 |
| 布局 / 容器 | |
| layui-main | 用于设置一个宽度为 1140px 的水平居中块（无响应式） |
| layui-inline | 用于将标签设为内联块状元素 |
| layui-box | 用于排除一些UI框架（如Bootstrap）强制将全部元素设为box-sizing: border-box所引发的尺寸偏差 |
| layui-clear | 用于消除浮动（一般不怎么常用，因为layui几乎没用到浮动） |
| layui-btn-container | 用于定义按钮的父容器。（layui 2.2.5 新增） |
| layui-btn-fluid | 用于定义流体按钮。即宽度最大化适应。（layui 2.2.5 新增） |
| 辅助 | |
| layui-icon | 用于图标 |
| layui-elip | 用于单行文本溢出省略 |
| layui-unselect | 用于屏蔽选中 |
| layui-disabled | 用于设置元素不可点击状态 |
| layui-circle | 用于设置元素为圆形 |
| layui-show | 用于显示块状元素 |
| layui-hide | 用于隐藏元素 |
| 文本 | |
| layui-text | 定义一段文本区域（如文章），该区域内的特殊标签（如a、li、em等）将会进行相应处理 |
| layui-word-aux | 灰色标注性文字，左右会有间隔 |
| 背景色 | |
| layui-bg-red | 用于设置元素赤色背景 |
| layui-bg-orange | 用于设置元素橙色背景 |
| layui-bg-green | 用于设置元素墨绿色背景（主色调） |
| layui-bg-cyan | 用于设置元素藏青色背景 |
| layui-bg-blue | 用于设置元素蓝色背景 |
| layui-bg-black | 用于设置元素经典黑色背景 |
| layui-bg-gray | 用于设置元素经典灰色背景 |
| 字体大小及颜色 | |
（2）命名规范、结构、公共属性
Class命名：layui，连接符：-，如：class="layui-form"
结构：需求确保结构被支持，不被支持会使得功能失效。
公共属性：
| 属性 | 描述 |
| lay-skin=" " | 定义相同元素的不同风格，如checkbox的开关风格 |
| lay-filter=" " | 事件过滤器。你可能会在很多地方看到他，他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器 |
| lay-submit | 定义一个触发表单提交的button，不用填写值 |