layui
LayUIlayui（谐音：类<formaction="">
</form>UI)<formaction="">
</form>是一套开源的Web<formaction="">
</form>UI解决方案，采用自身经典的模块化规范，并遵循原生HTML/CSS/JS<formaction="">
</form>的开发方式，常适合网页界面的快速开发。layui<formaction="">
</form>区别于那些基于MVVM<formaction="">
</form>底层的前端框架，它更多是面向后端开发者，无需涉足前端各种工具，只需面对浏览器本身，让一切所需要的元素与交互。
LayUI的特点
1：layui属于轻量级框架，简单美观，适用于后端开发模式，它在服务端页面上有非常好的效果
2：layuu是提供给后端开发人员的ui框架，基于DOM驱动
LayUI
基本使用
1.下载layui
官网：https://layuion.com/
2.安装、引入依赖
例子：
<!DOCTYPE<formaction="">
</form>html>
<html>
<head>
<link rel="stylesheet" href="layui/css/layui.css"/>
<meta<formaction="">
</form>charset="utf-8"<formaction="">
</form>/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<title></title>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>type="text/css"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
</head>
<body>
<link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form>
</body>
</html>需要声明使用的模块和回调函数，参照官方文档，选择自己想要的效果即可。
比如：
<formaction="">
</form>页面元素
布局
1.固定宽度--两边有空白常用
<link rel="stylesheet" href="layui/css/layui.css"/>
固定宽度
<link rel="stylesheet" href="layui/css/layui.css"/>
2.完整宽度--占据宽度的100%
<link rel="stylesheet" href="layui/css/layui.css"/>
完整宽度
<link rel="stylesheet" href="layui/css/layui.css"/>
栅格系统
[*]采用layui-row来定义行
<link rel="stylesheet" href="layui/css/layui.css"/>
[*]采用layui-col-md*这样的预设类来定义一组列（column）且放在行（row）内，其中
[*]变量md代表的是不同屏幕下的标记
[*]边浪*代表的是该列所占用的12等分（如6/12）可选值为1-12
[*]如果多个列的“等分数值”总和数等于12，刚好满行排布。如果大于12，若雨的列将自动另起一行
[*]列可以同时出现最多四中不同的组合，分别是xs（超小屏幕，如手机），sm（小屏幕，平板），md（桌面中等屏幕），lg（桌面大型屏幕）
[*]可对列追加类似的layui-col-space5，layui-col-md-offerset3这样的预设类来定义列的间距和偏移
[*]可以在类（column）元素中放入你自己的任意元素来填充内容
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
内容的5/12
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
内容的7/12
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
内容的4/12
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
内容的4/12
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
响应式规则
css媒体查询（Media<formaction="">
</form>Queries）的强力支持，从而针对不同尺寸的屏幕进行相应的适配处理。
类型超小屏幕手机（=768px)中等屏幕（桌面>=992px)大型屏幕（桌面>=1200px.layui-container的值auto750px970px1170px标记xssmmdlg列对应类*为1-12的等分数值layui-col-xs*layui-col-sm*layui-col-md*layui-col-lg*总列数12121212相应行为始终an设定的比例水平排列在当前屏幕下水平排列，如果屏幕的大小低于临界值则堆叠排列在当前屏幕下水平排列，如果屏幕的代销低于临界值则堆叠排列在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>响应式规则
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>列边距：
通过“列边距”的预设类，来设定之间的间距。且一行中最左的列不会出现左边距，最右边的列不会出现右边距。列边距在保证排版美观的同时，还可以进一步保持分列的宽度精细程度。我们结合网页常用的边距，预设了12中不同的尺寸的边距。
/*<formaction="">
</form>支持列之间为1px-30px的区间的所有双数间距，以及1px，5px，15px，25px的单数间隔<formaction="">
</form>*/
layui-col-space1
layui-col-space2
layui-col-space4
layui-col-space5
layui-col-space6
..... <link rel="stylesheet" href="layui/css/layui.css"/>
4
<link rel="stylesheet" href="layui/css/layui.css"/>
4
<link rel="stylesheet" href="layui/css/layui.css"/>
4
注：
1.layui-col-space，设置后起不到作用因为设置的是padding也就是说向内缩，所以设置背景色padding也是会填上颜色，看起来好像没有间距一样，可以再里面在加一个div，来达到目的。
2.间距一般不高于30px，如果超过30，建议使用列偏移
列偏移
对列最佳类似layui-col-md-offset*<formaction="">
</form>的预设类，从而让列向右偏移。其中*代表的是偏移占据的列数，可选中为1-12
如：layui-col-md-offset3，即和代表在“中型桌面屏幕下，让该列向右偏移3个列表宽度
<link rel="stylesheet" href="layui/css/layui.css"/>
4
<link rel="stylesheet" href="layui/css/layui.css"/>
4
注：
列偏移可针对不同屏幕的标准进行设定，在当前设定屏幕下最有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。
列嵌套
可以对栅格进行无穷层次的嵌套。在列元素(layui-col-md*)中插入行元素（layui-row），即可完成嵌套。
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
内部5
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
内部5
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
内部5
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
基本元素
按钮
向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其他按钮风格。
主题
名称组合原始默认百搭暖色警告禁用中间是空心：
名称组合主色百搭暖色警告深色尺寸：
尺寸组合大型默认小型迷你尺寸组合大型百搭正常暖色小型警告迷你禁用流体自适应
<button<formaction="">
</form>type="button"<formaction="">
</form>>流体按钮（最大化适应）</button>圆角
主题组合原始默认百搭暖色警告禁用尺寸组合大型百搭小型警告迷你禁用图标
<button<formaction="">
</form>type="button"<formaction="">
</form>><formaction="">
</form><formaction="">
</form><i<formaction="">
</form>></i><formaction="">
</form>按钮</button><formaction="">
</form><button<formaction="">
</form>type="button"<formaction="">
</form>><formaction="">
</form><formaction="">
</form><i<formaction="">
</form>></i></button>默认按钮<formaction="">
</form>样式<formaction="">
</form>大小<formaction="">
</form>圆角<formaction="">
</form>流动自适应
**i<formaction="">
</form><formaction="">
</form>图标<formaction="">
</form>样式<formaction="">
</form>**
导航
导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，面包屑结构简单、支持自定义分隔符
依赖加载的模块：element
实现的步骤：
引入的资源：
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
[*]class=“layui-nav”
[*]class=“layui-nav-item”--class=“layui-nav-item<formaction="">
</form>layui-this”选中
[*]<formaction="">
</form>二级菜单
例子：
<ul<formaction="">
</form><formaction="">
</form>lay-filter="">
<link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form><formaction="">
</form><li<formaction="">
</form>><a<formaction="">
</form>target="_blank"<formaction="">
</form>href="https://www.cnblogs.com/">最新活动</a></li>
<link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form><formaction="">
</form><li<formaction="">
</form>><a<formaction="">
</form>target="_blank"<formaction="">
</form>href="https://www.cnblogs.com/">产品</a></li>
<link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form><formaction="">
</form><li<formaction="">
</form>><a<formaction="">
</form>target="_blank"<formaction="">
</form>href="https://www.cnblogs.com/">大数据</a></li>
<link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form><formaction="">
</form><li<formaction="">
</form>>
<link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><a<formaction="">
</form>target="_blank"<formaction="">
</form>href="https://www.cnblogs.com/javascript:;">解决方案</a>
<link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><dl<formaction="">
</form>><formaction="">
</form>
<link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><dd><a<formaction="">
</form>target="_blank"<formaction="">
</form>href="https://www.cnblogs.com/">移动模块</a></dd>
<link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><dd><a<formaction="">
</form>target="_blank"<formaction="">
</form>href="https://www.cnblogs.com/">后台模版</a></dd>
<link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><dd><a<formaction="">
</form>target="_blank"<formaction="">
</form>href="https://www.cnblogs.com/">电商平台</a></dd>
<link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form></dl>
<link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form><formaction="">
</form></li>
<link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form><formaction="">
</form><li<formaction="">
</form>><a<formaction="">
</form>target="_blank"<formaction="">
</form>href="https://www.cnblogs.com/">社区</a></li>
</ul>垂直样式+侧边
背景颜色
样式往后加：layui-bg-orange
徽章
直接对应往后加
面包屑
<formaction="">
</form><formaction="">
</form>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><a<formaction="">
</form>target="_blank"<formaction="">
</form>href="https://www.cnblogs.com/">首页</a><formaction="">
</form><formaction="">
</form>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><a<formaction="">
</form>target="_blank"<formaction="">
</form>href="https://www.cnblogs.com/">国际新闻</a><formaction="">
</form>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><a<formaction="">
</form>target="_blank"<formaction="">
</form>href="https://www.cnblogs.com/">亚太地区</a><formaction="">
</form><formaction="">
</form>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><a><cite>正文</cite></a>
[*]选中
[*]通过设置属性<formaction="">
</form>lay-separator="-"<formaction="">
</form>来自定义分隔符
选项卡
引入资源:
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
[*]
<formaction="">
</form><formaction="">
</form><ul<formaction="">
</form>>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><li<formaction="">
</form>>网站设置</li>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><li>用户管理</li>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><li>权限分配</li>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><li>商品管理</li>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><li>订单管理</li>
<formaction="">
</form><formaction="">
</form></ul>
<formaction="">
</form><formaction="">
</form>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>内容1
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>内容2
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>内容3
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>内容4
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>内容5
<formaction="">
</form><formaction="">
</form>风格
默认风格：
[*]layui-tab
简洁风格追加样式：
[*]layui-tab-brief
卡片风格追加样式：
[*]layui-tab-card
带删除
对父层容器设置属性<formaction="">
</form>lay-allowClose="true"<formaction="">
</form>来允许Tab选项卡被删除
表格
<table<formaction="">
</form><formaction="">
</form>lay-even>
<formaction="">
</form><formaction="">
</form><colgroup>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><col<formaction="">
</form>width="150">
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><col<formaction="">
</form>width="200">
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><col>
<formaction="">
</form><formaction="">
</form></colgroup>
<formaction="">
</form><formaction="">
</form><thead>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><tr>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><th>昵称</th>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><th>加入时间</th>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><th>签名</th>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form></tr><formaction="">
</form>
<formaction="">
</form><formaction="">
</form></thead>
<formaction="">
</form><formaction="">
</form><tbody>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><tr>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><td>贤心</td>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><td>2016-11-29</td>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><td>人生就像是一场修行</td>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form></tr>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><tr>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><td>许闲心</td>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><td>2016-11-28</td>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form></tr>
<formaction="">
</form><formaction="">
</form></tbody>
</table>
[*]添加属性<formaction="">
</form>lay-even<formaction="">
</form><formaction="">
</form>隔行换色
风格
静态表格支持以下基础属性，可定义不同风格/尺寸的表格样式：
属性名属性值备注lay-even无用于开启<formaction="">
</form>隔行<formaction="">
</form>背景，可与其它属性一起使用lay-skin="属性值"line<formaction="">
</form>（行边框风格）<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>row<formaction="">
</form>（列边框风格）<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>nob<formaction="">
</form>（无边框风格）若使用默认风格不设置该属性即可lay-size="属性值"sm<formaction="">
</form>（小尺寸）<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>lg<formaction="">
</form>（大尺寸）若使用默认尺寸不设置该属性即可表单
常用属性
[*]required<formaction="">
</form>浏览器固定的必填字段
[*]lay-verify="required"<formaction="">
</form>需要验证的类型（required<formaction="">
</form>表示为必填字段）
[*]class=“layui-input”<formaction="">
</form>提供的通用样式
文本框：
[*]placeholder<formaction="">
</form>当文本框为空时默认显示的文本信息
[*]autocomplete<formaction="">
</form>表单元素是否自动填充，当浏览器中缓存有相同name值是会自动填充
引入依赖
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
[*]form<formaction="">
</form>模块
1.给定form容器
class=“layui-form”
<formaction="">
</form>2.基本的行区块结构，它提供了相应是的支持，可以换成其他结构，但必学要在外层容器中定义class=“layui-form”，form模块才能正常工作
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>标签区域 <link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form> <link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form> <link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form> <link rel="stylesheet" href="layui/css/layui.css"/>
<link<formaction="">
</form>rel="stylesheet"<formaction="">
</form>href="layui/css/layui.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
[*]<formaction="">
</form><formaction="">
</form>一整行
[*]<formaction="">
</form>行内
输入框
<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>
[*]required：注册浏览器所规定的必填字段
[*]lay-verify：注册form模块需要验证的类型
[*]：layui.css提供的通用CSS类
下拉框
<formaction="">
</form><formaction="">
</form>请选择一个城市<formaction="">
</form><formaction="">
</form>北京<formaction="">
</form><formaction="">
</form>上海<formaction="">
</form><formaction="">
</form>杭州<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>
[*]通过selected=“selected”设置默认选项
[*]disabled属性设置禁用
[*]通过option设置分组
[*]设置lay-search属性开启搜索功能
<formaction="">
</form>请选择 <link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form>你工作的第一个城市？ <link rel="stylesheet" href="layui/css/layui.css"/>
<formaction="">
</form>你的工号？ 你最喜欢的老师？ <formaction="">
</form>复选框
默认风格：<formaction="">
</form><formaction="">
</form><formaction="">
</form>原始风格：<formaction="">
</form><formaction="">
</form>
[*]属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
[*]属性checked可设定默认选中
[*]属性lay-skin可设置复选框的风格
[*]设置value="1"可自定义值，否则选中时返回的就是默认的on
开关
其实就是checkbox复选框的“变种”，通过设定<formaction="">
</form>lay-skin="switch"<formaction="">
</form>形成了开关风格
[*]属性checked可设定默认开
[*]属性disabled开启禁用
[*]属性lay-text可自定义开关两种状态的文本<formaction="">
</form><formaction="">
</form>（打开的值|关闭的值）
[*]设置value="1"可自定义值，否则选中时返回的就是默认的on
单选框
[*]属性title可自定义文本
[*]属性disabled开启禁用
[*]设置value="xxx"可自定义值，否则选中时返回的就是默认的on
文本域
组装行内表单
div<formaction="">
</form>><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>范围<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>-<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>密码<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>
[*]：定义外层行内
[*]：定义内层行内
忽略美化渲染
<formaction="">
</form><formaction="">
</form>…
[*]lay-ignore
方框效果
通过追加<formaction="">
</form>layui-form-pane<formaction="">
</form>的class，来设定表单的方框风格。内部结构不变。
<formaction="">
</form><formaction="">
</form>内部结构都一样，值得注意的是<formaction="">
</form>复选框/开关/单选框<formaction="">
</form>这些组合在该风格下需要额外添加<formaction="">
</form>pane属性（否则会看起来比较别扭），如：<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>单选框<formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form><formaction="">
</form>弹出层
引入依赖：
<link rel="stylesheet" href="layui/css/layui.css"/>
模块化：
[*]layer
layer<formaction="">
</form>作为<formaction="">
</form>Layui<formaction="">
</form>的代表性组件<formaction="">
</form>，比<formaction="">
</form>Layui<formaction="">
</form>要出现的早，作为<formaction="">
</form>Layui<formaction="">
</form>最早的源动力，layer<formaction="">
</form>的使用之广泛甚至一度超过了<formaction="">
</form>Layui<formaction="">
</form>本身。<formaction="">
</form>layer<formaction="">
</form>拥有众多的自定义功能，也是许多开发者的网页弹出层的首选交互方案，在各类场景都能发挥重要作用。
场景用前准备1.<formaction="">
</form>作为独立组件使用如果你只是单独想使用<formaction="">
</form>layer，你可以去<formaction="">
</form>layer<formaction="">
</form>独立版本官网下载组件包。你需要在你的页面引入jQuery1.8<formaction="">
</form>以上的任意版本，并引入layer.js。2.<formaction="">
</form>作为<formaction="">
</form>layui<formaction="">
</form>组件使用如果你使用的是<formaction="">
</form>layui，那么你直接在官网下载<formaction="">
</form>layui<formaction="">
</form>框架即可，无需引入<formaction="">
</form>jQuery<formaction="">
</form>和<formaction="">
</form>layer.js，但需要引入layui.css和layui.js
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]