Layui 表单美化教程：快速提升表单颜值

///'使用layui美化表单的步骤如下：//n//n1. 引入layui的相关样式和脚本文件。//n//nhtml//n<link rel=/'stylesheet/' href=/'https://cdn.staticfile.org/layui/2.5.6/css/layui.css/'>//n<script src=/'https://cdn.staticfile.org/layui/2.5.6/layui.js/'></script>//n//n//n2. 在表单的外层div上添加layui的class，例如layui-form。//n//nhtml//n<div class=/'layui-form table-list/'>//n <!-- 表单内容 -->//n</div>//n//n//n3. 修改表格的HTML结构，使用layui提供的表格样式。//n//nhtml//n<table class=/'layui-table/' lay-size=/'sm/'>//n <colgroup>//n <col width=/'40/'>//n <col width=/'100/'>//n <col width=/'110/'>//n <col width=/'120/'>//n <col width=/'150/'>//n <col width=/'150/'>//n <col width=/'120/'>//n </colgroup>//n <thead>//n <tr>//n <th>ID</th>//n <th>结果</th>//n <th>物品名称</th>//n <th>丢失地点</th>//n <th>丢失时间</th>//n <th>标题</th>//n <th>操作</th>//n </tr>//n </thead>//n <tbody>//n <!-- 表格内容 -->//n </tbody>//n</table>//n//n//n4. 使用layui的表格样式对表格内容进行美化。//n//nhtml//n<c:forEach items=/'${list}/' var=/'bean/'>//n <tr>//n <td>${bean.id}</td>//n <td><c:if test=/'${bean.state == 0}/'>寻找中</c:if><c:if test=/'${bean.state == 1}/'>已找到</c:if></td>//n <td>${bean.name}</td>//n <td>${bean.address}</td>//n <td><fmt:formatDate value=/'${bean.happentime}/' pattern=/'yyyy-MM-dd/'/></td>//n <td><a href=/'../goods!view?id=${bean.id}/' target=/'_blank/'>${bean.title}</a></td>//n <td><a href=/'method!goodsedit?id=${bean.id}/'>修改</a> | <a href=/'method!goodsdelete?id=${bean.id}/' onclick=/'return confirm('确定删除')/'>删除</a></td>//n </tr>//n</c:forEach>//n//n//n5. 使用layui的表单组件对表单元素进行美化。//n//nhtml//n<!-- 示例：美化下拉列表 -->//n<td>//n <select class=/'layui-select/'>//n <option value=/'0/'>寻找中</option>//n <option value=/'1/'>已找到</option>//n </select>//n</td>//n//n<!-- 示例：美化文本输入框 -->//n<td>//n <input type=/'text/' class=/'layui-input/'>//n</td>//n//n<!-- 示例：美化按钮 -->//n<td>//n <button class=/'layui-btn layui-btn-sm/'>修改</button>//n <button class=/'layui-btn layui-btn-sm layui-btn-danger/'>删除</button>//n</td>//n//n//n6. 初始化layui组件。//n//nhtml//n<script>//n layui.use('form', function(){//n var form = layui.form;//n form.render();//n });//n</script>//n//n//n以上是使用layui美化表单的基本步骤，根据具体需求可以进一步进行样式和功能的定制。//n//n/