layui

1.环境搭建
（1）在官网下载 （2）将layui导入到项目中，放在web文件夹下
（3）在jsp页面中导入layui依赖

2.页面元素
（1）布局
响应式栅格布局，每行12等分
layui-container 居中显示，有固定尺寸； layui-fluid占满行宽
layui-col-md2 ：列占两份 layui-col-md-offset2:空余两分；
（2） 图标
< i class=“layui-icon 具体的图标样式 ” style=“ ”> < /i >
（3）按钮
< a class=" layui-btn " >标准按钮
< a class="layui-btn 主题 样式 " >
圆角按钮

苹果版下载

按钮组：

（4）表单
layui-form-item : 标记form表单的一个组件
layui-form-label : 组件中的标题
layui-input-block : 让label和输入框处于同一行
required ： lay-veriy:required（必须的）
class=“layui-input”：layui.css提供的通用CSS类

（5）数据表格
elem： 指定原始table容器的选择器或DOM ,
cols: 设置表头
toolbar： true为开启表格头部工具栏

分页;
page:{limit:1//每页显示1条
,limits:[1,2,3] //可选每页条数
,first: ‘首页’ //首页显示文字，默认显示页号
,last: ‘尾页’
,prev: ‘←’ //上一页显示内容，默认显示 > <
,next: ‘’
,layout:[‘prev’, ‘page’, ‘next’,‘count’,‘limit’,‘skip’,‘refresh’]
//自定义分页布局
},

（6）导航栏
class=“layui-nav” 水平导航条
class=“layui-nav layui-nav-tree” 垂直导航条

3.内置模块
（1）layer
导入layer：
// 导入 layer模块
layui.use([“layer”],function(){
var layer = layui.layer;
layer.msg(“hello world!!”);
layer.msg(“确定吗？”,{btn:[“确定！”,“放弃！”],
yes:function(i){layer.close(i);layer.msg(“yes!!!”)},
btn2:function(i){layer.close(i);layer.msg(“no!!!”)}}
);
});

弹窗方式：弹窗 msg()、alert()、confirm()
日期框： layDate