1.layui简介
采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。贤心大佬专门给后端开发写的框架
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文件,然后加载你要使用的各个模块
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function() {
var layer = layui.layer,
form = layui.form;
});
</script>
3>一个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layui的hello</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<script src="../layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function() {
var layer = layui.layer,
form = layui.form;
layer.msg('Hello 杨宇莹');
});
</script>
</body>
</html>
2.栅格布局:layui-container、layui-row、layui-col-md*
将容器进行了 12 等分,预设了 4*12 种 CSS 排列类,在移动设备(xs)、平板(sm)、桌面中(md)/大尺寸(lg)四种不同的屏幕下发挥着各自的作用
1>将栅格放入一个带有 class="layui-container" 的特定的容器中,以便在小屏幕以上的设备中固定宽度,让列可控;当然,你还可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中,那么宽度将不会固定,而是 100% 适应
<div class="layui-container">
常规布局(以中型屏幕桌面为例),额外加了一个平板屏幕下的布局
<div class="layui-row">
<div class="layui-col-md9 layui-col-sm6 a1">//a1、a2是自定义的style,只定义了背景颜色
你的内容 md9/12
</div>
<div class="layui-col-md3 layui-col-sm6 a2">
你的内容 md3/12
</div>
</div>
</div>
2>列间距:layui-col-space*(*代表着列间距的数组:px)
通过“列间距”的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距。
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
1/3
</div>
<div class="layui-col-md4">
1/3
</div>
<div class="layui-col-md4">
1/3
</div>
</div>
3>列偏移:layui-col-md-offset*
列向右偏移。其中 * 号代表的是偏移占据的列数,可选中为 1 - 12。
<div class="layui-row">
<div class="layui-col-md4">
4/12
</div>
<div class="layui-col-md4 layui-col-md-offset4">
偏移4列,从而在最右
</div>
</div>
4>栅格嵌套
<div class="layui-container">
<div class="layui-row layui-col-space5">
<div class="layui-col-md5">
<div class="layui-row grid-demo a1">
<div class="layui-col-md3 a2">
内部列
</div>
<div class="layui-col-md9 a2">
内部列
</div>
<div class="layui-col-md12 a2">
内部列
</div>
</div>
</div>
<div class="layui-col-md7">
<div class="layui-row grid-demo grid-demo-bg1">
<div class="layui-col-md3 a2">
内部列
</div>
<div class="layui-col-md5 a2">
内部列
</div>
<div class="layui-col-md4 a2">
内部列
</div>
</div>
</div>
</div>
</div>
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
<i class="layui-icon layui-icon-face-smile"></i>
//可以定义它的大小和颜色
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
5.动画
直接对元素赋值动画特定的 class 类名即可。
其中 layui-anim 是必须的,后面跟着的即是不同的动画类
<div class="layui-anim layui-anim-up"></div>
循环动画,追加:layui-anim-loop
<div class="layui-anim layui-anim-up layui-anim-loop"></div>
6.按钮
向任意HTML元素设定class="layui-btn",建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成更多种按钮风格。
<button class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
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;//阻止表单提交
});