采用自身模块规范编写的前端 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
将容器进行了 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>栅格嵌套
内部列
内部列
内部列
内部列
内部列
内部列
常用主色、场景色、极简中性色等都可以直接使用即可,下面是内置背景色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"
通过对一个内联元素(一般推荐用 i标签)设定 class="layui-icon",来定义一个图标,然后对元素加上图标对应的 font-class
//可以定义它的大小和颜色
直接对元素赋值动画特定的 class 类名即可。
其中 layui-anim 是必须的,后面跟着的即是不同的动画类
循环动画,追加:layui-anim-loop
向任意HTML元素设定class="layui-btn",建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成更多种按钮风格。
一个可跳转的按钮
在一个容器中设定 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;//阻止表单提交
});