目录
1.栅格系统
2.按钮
2.表单
3.表格
4.面板
5.时间线
6.选项卡
7.弹出层
8.数据表格
layui的优缺点以及使用layui前的准备
优点：
LayUi作为一款国产开源的前端UI，简单易上手，并且UI简洁美观。本身目标对象是不怎么懂前端的后端开发人员，也适合后端人员使用。
（1）layui属于轻量级框架，简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果。
（2）layui是提供给后端开发人员最好的ui框架，基于DOM驱动，只要不涉及到交互layui还是很不错的
缺点：
由于LayUi是个人开源的项目并且开源时间不长，因此bug会比较多，也会有一些限制。兼容性也不强，尤其是在移动端。不由于设计的初衷，LayUi只适合小型项目，即便是小项目，也经常会遇到诸多问题。官网对集成较好的技术收费。
layui官网已于2021年10月13日下架，但是我们可以在layui镜像站里来学习layui的相关知识
镜像站@Layui – 经典开源模块化前端 UI 框架 
https://www.layui.site/index.htm 使用layui需要进行layui的引入，直接点击下方地址即可进行下载使用（可根据下方图片提示）
layui引入所需文件https://pan.baidu.com/s/1_RquAr1UNlYPW-SIUANL6A?pwd=wmy1
1.栅格系统
| 1. | 采用 layui-row 来定义行，如：<div class="layui-row"></div> |
| 2. | 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：
|
| 3. | 列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。 |
| 4. | 可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。 |
| 5. | 最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！ |
示例
<body><div class="layui-container"><!-- 定义行--><div class="layui-row"><!-- 定义列 --><div class="layui-col-md5" style="background-color: #007DDB;">内容5/12</div><div class="layui-col-md7" style="background-color: #00F7DE;">内容7/12</div></div><div class="layui-row"><!-- 定义列 --><div class="layui-col-md4" style="background-color: #EB7350;">内容4/12</div><div class="layui-col-md4" style="background-color: #FFB800;">内容4/12</div><!-- 超过12会自动换行 --><div class="layui-col-md6" style="background-color: #C2C2C2;">内容6/12</div></div><div class="layui-row"><div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: pink;">移动：6/12 | 平板：6/12 | 桌面：4/12</div><div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: palegoldenrod;">移动：6/12 | 平板：6/12 | 桌面：4/12</div><div class="layui-col-xs4 layui-col-sm12 layui-col-md4" style="background-color: peru;">移动：4/12 | 平板：12/12 | 桌面：4/12</div><div class="layui-col-xs4 layui-col-sm7 layui-col-md8" style="background-color: powderblue;">移动：4/12 | 平板：7/12 | 桌面：8/12</div><div class="layui-col-xs4 layui-col-sm5 layui-col-md4" style="background-color: palegreen;">移动：4/12 | 平板：5/12 | 桌面：4/12</div></div></div></body>效果如下：
2.按钮
主题：
| 名称 | 组合 |
|---|---|
| 原始 | class="layui-btn layui-btn-primary" |
| 默认 | class="layui-btn" |
| 百搭 | class="layui-btn layui-btn-normal" |
| 暖色 | class="layui-btn layui-btn-warm" |
| 警告 | class="layui-btn layui-btn-danger" |
| 禁用 |
class="layui-btn layui-btn-disabled" |
| 主色 | class="layui-btn layui-btn-primary layui-border-green" |
| 百搭 | class="layui-btn layui-btn-primary layui-border-blue" |
| 暖色 | class="layui-btn layui-btn-primary layui-border-orange" |
| 警告 | class="layui-btn layui-btn-primary layui-border-red" |
| 深色 | class="layui-btn layui-btn-primary layui-border-black" |
2.尺寸
| 尺寸 | 组合 |
|---|---|
| 大型 | class="layui-btn layui-btn-lg" |
| 默认 | class="layui-btn" |
| 小型 | class="layui-btn layui-btn-sm" |
| 迷你 | class="layui-btn layui-btn-xs" |
更多按钮主题样式可前往layui镜像站学习
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="layui/css/layui.css"/></head><body><!-- 基础按钮 --><button type="button" class="layui-btn">一个按钮</button><a href="01.html" class="layui-btn">可跳转按钮</a><div class="layui-btn">按钮</div><hr /><!-- 不同主题按钮 --><button class="layui-btn">默认按钮</button><button class=" layui-btn layui-btn-primary">原始按钮</button><button class=" layui-btn layui-btn-normal">百搭按钮</button><button class=" layui-btn layui-btn-warm">暖色按钮</button><button class=" layui-btn layui-btn-danger">警告按钮</button><button class=" layui-btn layui-btn-disabled">禁用按钮</button><hr /><!-- 不同尺寸按钮 --><button class=" layui-btn layui-btn-primary layui-btn-lg">大按钮</button><button class=" layui-btn layui-btn-sm layui-btn-danger">小按钮</button><button class=" layui-btn layui-btn-xs">迷你按钮</button><hr /><!-- 圆角按钮 --><button class="layui-btn layui-btn-radius">默认按钮</button><button class=" layui-btn layui-btn-primary layui-btn-radius">原始按钮</button><button class=" layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button><button class=" layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button><button class=" layui-btn layui-btn-danger layui-btn-radius">警告按钮</button><button class=" layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button><hr /></body>
</html>
在浏览器实现效果：
3.表单
依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）放在代码开始位置即可
<!-- 加载模块 --><script type="text/javascript">//加载from模块layui.use("from",function(){var from = layui.from;});</script>文本框
<!-- 常用属性：required：注册浏览器所规定的必填字段 lay-verify：注册form模块需要验证的类型 required 表示必填class="layui-input"：layui.css提供的通用CSS样式layui-input-block 占据全部宽度layui-input-inline 占据部分宽度placeholder 默认文本信息autocomplete 表单元素是否自动填充(当浏览器中缓存中存在i相同name属性的值时会自动填充)通过追加 layui-form-pane 的class，来设定表单的方框风格。内部结构不变你可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格-->
<!-- 在一个容器中设定 class="layui-form " 来标识一个表单元素块 --><form class="layui-form "><!-- 文本框 --><div class="layui-from-item"><label class="layui-form-label"> 标题</label><div class="layui-input-inline"><input required type="text" name = "title" class="layui-input" /></div><hr /><label class="layui-form-label"> 标题</label><div class="layui-input-inline"><input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"> </div> </div><hr />
</form>实现效果
下拉框
<!-- 下拉框 1.selected 设置默认选择项2.disabled 开启禁用 可以设置select和option标签（禁用下拉框和禁用下拉选项）3.optgroup 给select分组4.lay-search 开启搜索匹配功能-->
<div class="layui-from-item"><label class="layui-form-label">下拉框</label><div class="layui-input-inline"><select name="city" lay-verify="required" disabled ><option value="">请选择一个城市</option><option value="010" selected="">北京</option><option value="021">上海</option><option value="0571">杭州</option></select><hr /><!-- 分组 --><select name="quiz"><option value="">请选择</option><optgroup label="城市记忆"><option value="你工作的第一个城市">你工作的第一个城市？</option></optgroup><optgroup label="学生时代"><option value="你的工号">你的工号？</option><option value="你最喜欢的老师">你最喜欢的老师？</option></optgroup></select><hr /><!-- 搜索匹配 --><select name="city" lay-verify="" lay-search><option value="">请选择</option><option value="010">layer</option><option value="021">form</option><option value="0571">layim</option></select> </div></div>实现效果
复选框
<!-- 复选框 1.title 设置自定义文本(如果不需要显示文本，则不设置title属性)2.checked 设置被选中的项3.lay-skin 设置复选框的样式效果 （lay-skin="primary"表示原始效果）4.disabled 禁用元素--><div class="layui-from-item"><label class="layui-form-label">复选框</label><div class="layui-input-inline"><input type="checkbox" name="hobby" title="炎龙" checked value="yl"/><input type="checkbox" name="hobby" title="风鹰" disabled/><input type="checkbox" name="hobby" title="地虎"/><input type="checkbox" name="hobby" title="黑犀"/><input type="checkbox" name="hobby" title="雪獒"/><!-- 原始效果 --><br /><hr /><input type="checkbox" name="hobby" title="炎龙" lay-skin="primary" /></div></div>实现效果
开关
<!-- 开关 1.lay-skin="switch" 形成一个开关风格2.lay-text="打开的值|关闭的值" 设定开关的两种状态的文本，通过"|"来分隔3.disabled 禁用开关4.checked 设置默认打开状态5.value 设置选中的值--><div class="layui-from-item"><label class="layui-form-label">开关</label><div class="layui-input-inline"><input type="checkbox" lay-skin="switch" lay-text="打开" checked disabled/><input type="checkbox" lay-skin="switch" checked lay-text="打开|关闭" /></div></div>实现效果
单选框
<!-- 单选框 1.title 设置自定义文本(如果不需要显示文本，则不设置title属性)2.checked 设置被选中的项3.disabled 禁用元素4.value 设置选中的值5.name 必须设置为一样的--><div class="layui-from-item"><label class="layui-form-label">单选框</label><div class="layui-input-inline"><input type="radio" name="sex" value="nan" title="男"><input type="radio" name="sex" value="nv" title="女" checked><input type="radio" name="sex" value="" title="中性" disabled></div> </div>实现效果
文本域
<!-- 文本域 class="layui-textarea"：layui.css提供的通用CSS类 --><div class="layui-from-item"><label class="layui-form-label">文本域</label><div class="layui-input-inline"><textarea name="remark" required lay-verify="required" placeholder="请输入个人简介"class="layui-textarea"></textarea></div></div>实现效果
组装行内表单
<!-- 组装行内表单class="layui-inline"：定义外层行内 class="layui-input-inline"：定义内层行内--><div class="layui-from-item"><div class="layui-inline"><label class="layui-form-label">范围</label><div class="layui-input-inline"><input type="text" placeholder="￥" class="layui-input"/></div><!-- <div class="layui-form-mid">-</div> --><div class="layui-input-inline"><input type="text" placeholder="￥" class="layui-input"/></div><div class="layui-inline"><label class="layui-form-label">密码</label><div class="layui-input-inline"><input type="password" placeholder="请输入密码" class="layui-input"/></div></div> </div>实现效果
4.表格
<!--表格class="layui-table"属性lay-even 用于开启隔行背景，可与其它属性一起使用（隔行换色）lay-skin="属性值" 边框风格line （行边框风格） row （列边框风格） nob （无边框风格） 若使用默认风格不设置该属性即可lay-size="属性值" 边框尺寸sm （小尺寸） lg （大尺寸） 若使用默认尺寸不设置该属性即可--><table class="layui-table"><colgroup><col width="150"></clo><col width="20"><col width="20"></colgroup><thead><tr><th>昵称</th><th>注册时间</th><th>签名</th></tr> </thead><tbody><tr><td>小王</td><td>2022-1-1</td><td>那真是一段快意时光</td></tr><tr><td>小王</td><td>2022-1-1</td><td>那真是一段快意时光</td></tr></tbody></table><hr /><!-- 隔行换色 --><table class="layui-table" lay-even lay-skin="row" lay-size="lg"><colgroup><col width="150"><col width="200"><col></colgroup><thead><tr><th>昵称</th><th>注册时间</th><th>签名</th></tr> </thead><tbody><tr><td>小王</td><td>2022-1-1</td><td>那真是一段快意时光</td></tr><tr><td>小王</td><td>2022-1-1</td><td>那真是一段快意时光</td></tr><tr><td>小王</td><td>2022-1-1</td><td>那真是一段快意时光</td></tr><tr><td>小王</td><td>2022-1-1</td><td>那真是一段快意时光</td></tr></tbody></table>实现效果
5.面板
在使用前需要加载element模块
<script>layui.use('element', function(){var element = layui.element;});
</script> <body><!-- 面板 layui-col-md3 设置面板大小--><div class="layui-row layui-col-space15"><div class="layui-col-md3"><div class="layui-panel"><div style="padding: 30px;">一个面板</div></div> </div><div class="layui-col-md3"><div class="layui-panel"><div style="padding: 30px;">一个面板</div></div> </div></div> <hr /><!-- 折叠面板 通过对内容元素设置class为 layui-show 来选择性初始展开某一个面板，element 模块会自动呈现状态图标。折叠面板 依赖 element 模块，否则无法进行功能性操作--><div class="layui-collapse"><div class="layui-colla-item" ><h2 class="layui-colla-title">迪迦奥特曼</h2><div class="layui-colla-content layui-show">是经过3000万年前的时代复活了的超古代光之巨人，有形态变化的能力。由地球和平联合组织『TPC』的特搜队『GUTS』【胜利队】的圆·大古队员变身。<br/>身高 53米<br/>体重 4万4千吨<br/>最大飞行速度 5马赫<br/>出身地 不明<br/>首次登场年度 1996年<br/>登场作品 《迪迦奥特曼》</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">戴拿奥特曼</h2><div class="layui-colla-content layui-show">地球和平联合『TPC』的特搜队『SUPER GUTS』的飞鸟·信队员，与在火星遇见的"光"一体化变身后的身姿。和迪迦一样拥有改变形态的能力。<br/>身高 55米<br/>体重 4万5千吨<br/>最大飞行速度 8马赫<br/>出身地 不明<br/>首次登场年度 1997年<br/>登场作品 《戴拿奥特曼》</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">盖亚奥特曼</h2><div class="layui-colla-content layui-show">对应根源破灭地球防卫联合『G.U.A.R.D.』的防卫队『XIG』队员的高山我梦用从地球的大地被授予的光变身，大地的红色光之的巨人。与来自宇宙的根源的破灭招来体作战，之后又进行了升级。<br/>身高 50米<br/>体重 4万2千吨<br/>最大飞行速度 20马赫<br/>出身地 地球<br/>首次登场年度 1998年<br/>登场作品 《盖亚奥特曼》</div></div></div><!-- 开启手风琴 在折叠面板的父容器设置属性 lay-accordion 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板。--><hr /><div class="layui-collapse" lay-accordion><div class="layui-colla-item"><h2 class="layui-colla-title">迪迦奥特曼</h2><div class="layui-colla-content layui-show">是经过3000万年前的时代复活了的超古代光之巨人，有形态变化的能力。由地球和平联合组织『TPC』的特搜队『GUTS』【胜利队】的圆·大古队员变身。<br/>身高 53米<br/>体重 4万4千吨<br/>最大飞行速度 5马赫<br/>出身地 不明<br/>首次登场年度 1996年<br/>登场作品 《迪迦奥特曼》</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">戴拿奥特曼</h2><div class="layui-colla-content layui-show">地球和平联合『TPC』的特搜队『SUPER GUTS』的飞鸟·信队员，与在火星遇见的"光"一体化变身后的身姿。和迪迦一样拥有改变形态的能力。<br/>身高 55米<br/>体重 4万5千吨<br/>最大飞行速度 8马赫<br/>出身地 不明<br/>首次登场年度 1997年<br/>登场作品 《戴拿奥特曼》</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">盖亚奥特曼</h2><div class="layui-colla-content layui-show">对应根源破灭地球防卫联合『G.U.A.R.D.』的防卫队『XIG』队员的高山我梦用从地球的大地被授予的光变身，大地的红色光之的巨人。与来自宇宙的根源的破灭招来体作战，之后又进行了升级。<br/>身高 50米<br/>体重 4万2千吨<br/>最大飞行速度 20马赫<br/>出身地 地球<br/>首次登场年度 1998年<br/>登场作品 《盖亚奥特曼》</div></div></div><script>layui.use('element', function(){var element = layui.element;//一些事件触发element.on('tab(demo)', function(data){console.log(data);});});</script></body>
手风琴样式可自行测试
6.时间线
<body><!-- class="layui-timeline"通过设置该属性来设置一个时间线class="layui-timeline-item"class="layui-icon layui-timeline-axis" 时间线的样式class="layui-timeline-content layui-text" 时间线中的内容class="layui-timeline-title" 时间线标题 --><ul class="layui-timeline"><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">8月18日</h3><p>layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。<br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。<br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i></p></div></li><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">8月16日</h3><p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p><ul><li>《登高》</li><li>《茅屋为秋风所破歌》</li></ul></div></li><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">8月15日</h3><p>中国人民抗日战争胜利72周年<br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代<br>铭记、感恩<br>所有为中华民族浴血奋战的英雄将士<br>永垂不朽</p></div></li><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><div class="layui-timeline-title">过去</div></div></li></ul></body>实现效果
7.选项卡
使用前需要加载element模块
<script>layui.use('element', function(){var element = layui.element;});
</script><body><!--选项卡风格默认风格:layui-tab简洁风格需要追加:layui-tab-brief卡片风格需要追加:layui-tab-card可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除--><div class="layui-tab"><ul class="layui-tab-title"><li class="layui-this">导航</li><li>管理</li><li>分配</li><li>订单</li><li>商品</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show" >内容1</div><div class="layui-tab-item">内容2</div><div class="layui-tab-item">内容3</div><div class="layui-tab-item">内容4</div><div class="layui-tab-item">内容5</div></div></div><hr /><!-- 简洁风格 --><div class="layui-tab layui-tab-brief"><ul class="layui-tab-title"><li class="layui-this">导航</li><li>管理</li><li>分配</li><li>订单</li><li>商品</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show" >内容1</div><div class="layui-tab-item">内容2</div><div class="layui-tab-item">内容3</div><div class="layui-tab-item">内容4</div><div class="layui-tab-item">内容5</div></div></div><hr /><!-- 卡片风格 --><div class="layui-tab layui-tab-card"><ul class="layui-tab-title"><li class="layui-this">导航</li><li>管理</li><li>分配</li><li>订单</li><li>商品</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show" >内容1</div><div class="layui-tab-item">内容2</div><div class="layui-tab-item">内容3</div><div class="layui-tab-item">内容4</div><div class="layui-tab-item">内容5</div></div></div><!-- 带有删除按钮的选项卡 --><hr /><div class="layui-tab layui-tab-brief" lay-allowClose="true"><ul class="layui-tab-title"><li class="layui-this">导航</li><li>管理</li><li>分配</li><li>订单</li><li>商品</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show" >内容1</div><div class="layui-tab-item">内容2</div><div class="layui-tab-item">内容3</div><div class="layui-tab-item">内容4</div><div class="layui-tab-item">内容5</div></div></div><script>// 选项卡 依赖 element 模块 ，否则无法进行功能性操作layui.use('element',function(){var element = layui.element;});</script></body>实现效果：
8.弹出层
在这里需要加载layer模块
<script> layui.use('layer', function(){var layer = layui.layer;
</script> <body><!-- type - 基本层类型title - 标题content - 内容skin - 样式类名area - 宽高offset - 坐标icon - 图标，信息框和加载层的私有参数btn - 按钮--><script> layui.use('layer', function(){var layer = layui.layer;layer.confirm('are you ok?', {btn: ['确定', '取消', '未知'] //可以无限个按钮,btn3: function(index, layero){//按钮【按钮三】的回调}}, function(index, layero){//按钮【按钮一】的回调}, function(index){//按钮【按钮二】的回调});/* layer.open({content: 'wo giao',btn: ['1', '2', '3'],yes: function(index, layero){//按钮【1】的回调},btn2: function(index, layero){//按钮【2】的回调//return false 开启该代码可禁止点击该按钮关闭},btn3: function(index, layero){//按钮【3】的回调//return false 开启该代码可禁止点击该按钮关闭},cancel: function(){ //右上角关闭回调//return false 开启该代码可禁止点击该按钮关闭}}); *//* layer.open({content: '加载错误',yes: function(index, layero){layer.close(index); }}); */ }); </script></body>实现效果
9.数据表格
在这里需要加载table模块
<script>layui.use('table', function(){var table = layui.table;
</script><body><table id="demo"></table><hr /><!-- 方法渲染 --><!-- //准备容器，设置id属性值 --><table id="demo2"></table><!-- 自动渲染 1.带有 class="layui-table" 的 <table> 标签。 2.对标签设置属性 lay-data="" 用于配置一些基础参数 3.在 <th> 标签中设置属性lay-data=""用于配置表头信息--><!-- <table class="layui-table" lay-data="{url:'js/user.json',page:true}"><thead><tr><th lay-data="{field:'id',width:100}">ID</th><th lay-data="{field:'username'}">名字</th><th lay-data="{field:'sex',sort:true}">性别</th><th lay-data="{field:'city'}">城市</th><th lay-data="{field:'sign'}">签名</th></tr></thead></table> --><!-- 转换为静态表格 --><table lay-filter="demo"><thead><tr><th lay-data="{field:'username', width:100}">昵称</th><th lay-data="{field:'experience', width:80, sort:true}">积分</th><th lay-data="{field:'sign'}">签名</th></tr> </thead><tbody><tr><td>贤心1</td><td>66</td><td>人生就像是一场修行a</td></tr><tr><td>贤心2</td><td>88</td><td>人生就像是一场修行b</td></tr><tr><td>贤心3</td><td>33</td><td>人生就像是一场修行c</td></tr></tbody></table><script type="text/javascript">layui.use("table",function(){var table = layui.table;//加载table实例// table.render({// elem:"#demo",// url:"js/user.json",//数据接口// cols:[[// {field:'id',title:'用户编号',sort:true,width:100},// {field:'username',title:'用户姓名',width:100},// {field:'sex',title:'用户性别',sort:true,width:100},// {field:'city',title:'所在城市',width:100},// {field:'sigh',title:'用户签名'}// ]],// });// 方法渲染// table.render({// elem:"#demo2",// url:"js/user.json",//数据接口// height:315,//容器高度// page:true,//开启分页// cols:[[//设置表头// {field:'id',title:'用户编号',sort:true,width:100},// {field:'username',title:'用户姓名',width:100},// {field:'sex',title:'用户性别',sort:true,width:100},// {field:'city',title:'所在城市',width:100},// {field:'sigh',title:'用户签名'}// ]],// });// 转换静态表格var table = layui.table;//转换静态表格table.init('demo', {height: 315 //设置高度,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致//支持所有基础参数}); });</script></body>实现效果
关于表格也可以进行一些方法的渲染：
方法渲染实现效果：
以上就是一些layui的基本使用方法，更多layui实例可在layui镜像站中的文档模块进行学习
支付宝扫一扫
微信扫一扫
.png)
.png)
.png)
