layui基础-页面元素
1.layui简介
采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。贤心大佬专门给后端开发写的框架
官网：https://www.layui.com/
1>目录结构：
├─css //css目录
│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件2>开始使用：
第一步：将下载后的layui压缩包解压，复制layui文件夹的所有内容到项目中
第二步：导入layui的css和js文件，然后加载你要使用的各个模块
3>一个例子
layui的hello
2.栅格布局：layui-container、layui-row、layui-col-md*
将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，在移动设备（xs）、平板（sm）、桌面中（md）/大尺寸（lg）四种不同的屏幕下发挥着各自的作用
1>将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控；当然，你还可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应
常规布局（以中型屏幕桌面为例），额外加了一个平板屏幕下的布局
//a1、a2是自定义的style，只定义了背景颜色
你的内容 md9/12
你的内容 md3/12
2>列间距：layui-col-space*（*代表着列间距的数组：px）
通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。
1/3
1/3
1/3
3>列偏移：layui-col-md-offset*
列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。
4/12
偏移4列，从而在最右
4>栅格嵌套
内部列
内部列
内部列
内部列
内部列
内部列
3颜色
常用主色、场景色、极简中性色等都可以直接使用即可，下面是内置背景色css类
赤色：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"
4.图标
通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标，然后对元素加上图标对应的 font-class
//可以定义它的大小和颜色
5.动画
直接对元素赋值动画特定的 class 类名即可。
其中 layui-anim 是必须的，后面跟着的即是不同的动画类
循环动画，追加：layui-anim-loop
6.按钮
向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。
一个可跳转的按钮
7.表单
在一个容器中设定 class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。
注意：必须要加载from模块（如果要加载其他模块直接在数组中添加，然后在form后再添加即可）
layui.use(['layer', 'form'], function() {
var layer = layui.layer,
form = layui.form;2>表单监听提交
//监听提交，一般是监听提交按钮（formDemo就在提交按钮上）
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));//弹出填写的数据
return false;//阻止表单提交
});