前端框架如何使用（前端LayUI框架快速上手详解(一)）
导读：✍目录总览 🔥LayUI 🔥前端框架LayUI详解 地址 🔥前端LayUI框架快速上手详解(一 https://blog.csdn.net/Augenstern_QXL/articl...
✍目录总览
🔥LayUI
🔥前端框架LayUI详解 地址 🔥前端LayUI框架快速上手详解(一) https://blog.csdn.net/Augenstern_QXL/article/details/119748962 🔥前端LayUI框架快速上手详解(二) https://blog.csdn.net/Augenstern_QXL/article/details/119749461 最新版本v2.6.8 官方文档讲解较细致 ，但同时也较繁琐 ，本篇旨在记录常用样式的用法与注意点. 配套视频讲解地址:B站直达1 、LayUI
和 Bootstrap 有些相似 ，但该框架有个极大的好处就是定义了很多前后端交互的样式接口 ，如分页表格 ，只需在前端配置好接口 ，后端则按照定义好的接口规则返回数据 ，即可完成页面的展示 ，极大减少了后端人员的开发成本 。
1.1 、下载与使用
官网：https://www.layui.com/
点击立即下载即可
下载完成后解压 ，我们看以下其目录结构 ，并将其完整的拷贝到我们自己的项目下 。
使用时我们只需引入下述两个文件即可使用 <!-- LayUI的核心CSS文件 --> <link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/> <!-- LayUI的核心JS文件（采用模块化引入） --> <script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script> 这是一个基本的入门页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>开始使用 layui</title> <!-- LayUI的核心CSS文件 --> <link rel="stylesheet" href="./layui/css/layui.css"> </head> <body> <!-- 你的 HTML 代码 --> <!-- LayUI的核心JS文件 --> <script src="./layui/layui.js"></script> <script> layui.use([layer, form], function(){ var layer = layui.layer, form = layui.form; layer.msg(Hello World); }); </script> </body> </html>2 、布局
2.1 、布局容器
2.1.1 、固定宽度
将栅格放入一个带有 class="layui-container" 的特定的容器中 ，以便在小屏幕以上的设备中固定宽度 ，让列可控 。 固定宽度的两侧有留白效果 <div class="layui-container" style="background-color: pink;height: 300px;"> 固定宽度（两侧有留白效果） </div>2.1.2 、完整宽度
可以不固定容器宽度 。将栅格或其它元素放入一个带有 class="layui-fluid"的容器中 ，那么宽度将不会固定 ，而是 100% 适应 完整宽度占据屏幕宽度的100% <div class="layui-fluid" style="background-color: cyan;height: 300px;"> 完整宽度(占据屏幕宽度的100%) </div>2.2 、栅格系统
我们将容器进行了 12 等分 ，预设了 4*12 种 CSS 排列类 ，它们在移动设备 、平板 、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用 。
2.2.1 、栅格布局规则
采用 class="layui-row" 来定义行 ，如： <div class="layui-row"></div> 采用类似 layui-col-md* 这样的预设类来定义一组列(column) ，且放在行(row)中 变量 md 代表的是不同屏幕下的标记 变量 * 代表的是该列所占用的12等分数（如6/12） ，可选值为 1 - 12 如果多个列的“等分数值 ”总和等于12 ，则刚好满行排列 。如果大于12 ，多余的列将自动另起一行 。 列可以同时出现最多四种不同的组合 ，分别是：xs（超小屏幕 ，如手机） 、sm（小屏幕 ，如平板） 、md（桌面中等屏幕） 、lg（桌面大型屏幕） ，以呈现更加动态灵活的布局 。 可对列追加类似 layui-col-space5 、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移 。 可以在列（column）元素中放入你自己的任意元素填充内容 ，完成布局！示例：
<!-- 栅格系统 列组合 1. 定义行 .layui-row 2. 定义列 .layui-col-md* md 表示不同屏幕的标识（xs 、sm 、md 、lg） * 表示列的数量 3. 每一行被均分为12列 ，列的总数不能超过12 ，否则会自动换行 --> <!-- 布局容器 --> <div class="layui-container"> <!-- 定义行 --> <div class="layui-row"> <!-- 定义列 --> <div class="layui-col-md5" style="background-color: deepskyblue;"> 内容5/12 </div> <div class="layui-col-md7" style="background-color: bisque;"> 内容7/12 </div> </div> <!-- 定义行 --> <div class="layui-row"> <!-- 定义列 --> <div class="layui-col-md4" style="background-color: powderblue;"> 内容4/12 </div> <div class="layui-col-md4" style="background-color: mediumaquamarine;"> 内容4/12 </div> <div class="layui-col-md6" style="background-color: grey;"> 内容6/12 </div> </div> </div>2.2.2 、响应式规则
简单来说 ，就是会针对四类不同尺寸的屏幕 ，进行响应式适配处理 。 <!-- 4. 响应式规则 栅格会自动根据屏幕的分辨率选择对应的样式效果 。 --> <body> <h3>平板 、桌面端的不同表现：</h3> <div class="layui-row"> <!-- 小屏幕占6列 ，中屏幕占4列 --> <div class="layui-col-sm6 layui-col-md4" style="background-color: thistle"> 平板≥768px：6/12 | 桌面端≥992px：4/12 </div> </div> <div class="layui-row"> <!-- 小屏幕占4列 ，中屏幕占6列 --> <div class="layui-col-sm4 layui-col-md6" style="background-color: mediumaquamarine;"> 平板≥768px：4/12 | 桌面端≥992px：6/12 </div> </div> <div class="layui-row"> <!-- 小屏幕占12列 ，中屏幕占8列 --> <div class="layui-col-sm12 layui-col-md8" style="background-color: coral"> 平板≥768px：12/12 | 桌面端≥992px：8/12 </div> </div> </body>我们将屏幕尺寸切换为小屏幕平板尺寸
2.2.3 、列间距
设定列之间的间距
且一行中最左的列不会出现左边距 ，最右的列不会出现右边距
列间距在保证排版美观的同时 ，还可以进一步保证分列的宽度精细程度 。
给容器添加class="layui-col-space*"
* 支持1px-30px区间的所有双数间隔 ，以及 1px 、5px 、15px 、25px 的单数间隔 <!-- 列边距 .layui-col-space* --> <h3>列边距</h3> <div class="layui-row layui-col-space20"> <div class="layui-col-md4"> <!-- 给具体的内容设置背景颜色 --> <div style="background-color: hotpink">4</div> </div> <div class="layui-col-md4"> <div style="background-color: indianred">4</div> </div> <div class="layui-col-md4"> <div style="background-color: powderblue">4</div> </div> </div>注意：
layui-col-space 设置后不起作用主要是因为设置的是 padding ，也就是说向内缩 ，所以设置背景色 padding 也是会添上颜色 ，看起来好像没有间距一样 。可以在里面加一个 div 来达到目的
如果需要的间距高于30px（一般不常见） ，我们需要采用列偏移
2.2.4 、列偏移
对列追加类似 layui-col-md-offset* 的预设类 ，从而让列向右偏移 其中 * 号代表的是偏移占据的列数 ，可选中为 1 - 12 如 layui-col-md-offset3 ，即代表在 中型桌面屏幕下 ，让该列向右偏移3个列宽度 。 <body> <h3>列偏移</h3> <div class="layui-row"> <div class="layui-col-md4"> <div style="background-color: red">4</div> </div> <!--向右移动4列--> <div class="layui-col-md4 layui-col-md-offset4"> <div style="background-color: skyblue"> 向右移动4列 </div> </div> </div> </body>2.2.5 、列嵌套
列之间可以无限嵌套列 <div class="layui-row"> <!-- 大的盒子占6列 --> <div class="layui-col-md6"> <div style="background-color: red"> <div class="layui-row"> <!-- 嵌套列 --> <div class="layui-col-md3" style="background-color: burlywood;"> 内部列 </div> <div class="layui-col-md5" style="background-color: indianred;"> 内部列 </div> <div class="layui-col-md2" style="background-color: mediumaquamarine;"> 内部列 </div> </div> </div> </div> </div>3 、按钮
3.1 、按钮风格
向任意 HTML 元素设定 class="layui-btn" ，建立一个基础按钮 。 通过追加样式为 class="layui-btn-{type}" 来定义其他按钮风格 名称 组合 原始 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" <body> <div class="layui-container"> <!-- 基础按钮 --> <button type="button" class="layui-btn">一个标准的按钮</button> <a href="http://www.layui.com" 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> </div></body>3.2 、按钮尺寸
尺寸 组合 大型 class="layui-btn layui-btn-lg" 默认 class="layui-btn" 小型 class="layui-btn layui-btn-sm" 迷你 class="layui-btn layui-btn-xs" 流体按钮(最大化适应) class="layui-btn layui-btn-fluid" <body> <div class="layui-container"> <!-- 不同尺寸的按钮 --> <button class="layui-btn layui-btn-primary layui-btn-lg">大型原始按钮</button> <button class="layui-btn">默认按钮</button> <button class="layui-btn layui-btn-sm layui-btn-danger">小型警告按钮</button> <button class="layui-btn layui-btn-xs">迷你按钮</button> <button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button> </div></body>3.3 、圆角按钮
主题 组合 原始 class="layui-btn layui-btn-radius layui-btn-primary"s 默认 class="layui-btn layui-btn-radius" 百搭 class="layui-btn layui-btn-radius layui-btn-normal" 暖色 class="layui-btn layui-btn-radius layui-btn-warm" 警告 class="layui-btn layui-btn-radius layui-btn-danger" 禁用 class="layui-btn layui-btn-radius layui-btn-disabled" <div class="layui-container"> <!-- layui-btn-radius 圆角按钮 --> <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></div>3.4 、图标按钮
3.4.1 、图标
对 i 标签 设定 class="layui-icon" 然后对元素加上图标对应的 font-class 内置图标一览表：https://www.layui.com/doc/element/icon.html <i class="layui-icon layui-icon-face-smile"></i>3.4.2 、图标按钮
<body> <div class="layui-container"> <!-- 图标按钮 --> <button type="button" class="layui-btn"> <i class="layui-icon"></i> 添加 </button> <button type="button" class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon">ဂ</i> 刷新 </button> <button type="button" class="layui-btn layui-btn-sm layui-btn-warm"> <i class="layui-icon layui-icon-heart"></i> 关注 </button> </div></body>4 、导航
导航一般应用于头部和侧边 ，是整个网页画龙点晴般的存在
依赖加载模块：element
实现步骤：
引入的资源 <link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/><script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script> 依赖加载模块 <script type="text/javascript"> // 导航 依赖element模块,否则无法进行功能性操作 layui.use(element,function(){ var element = layui.element; }); </script>4.1 、水平导航
给一个无序列表 ul 添加 class="layui-nav" 给 li 添加 class="layui-nav-ithm" 表示的是导航的子项 给 li 添加 class="layui-this" 表示当前被选中的项 给 li 里面容器添加 class="layui-nav-child" 表示的是二级菜单 <body> <!-- 水平导航 layui-nav layui-nav-item 表示的是导航的子项 layui-this 表示当前被选中的项 layui-nav-child 表示的是二级菜单 --> <!-- 水平导航 layui-nav --> <ul class="layui-nav"> <li class="layui-nav-item"><a href="">最新活动</a></li> <li class="layui-nav-item layui-this"><a href="">产品</a></li> <li class="layui-nav-item"><a href="">大数据</a></li> <li class="layui-nav-item"> <a href="">解决方案</a> <!--二级菜单--> <dl class="layui-nav-child"> <dd><a href="">移动模块</a></dd> <dd><a href="">后台模块</a></dd> <dd><a href="">电商平台</a></dd> </dl> </li> </ul> <script type="text/javascript"> // 导航 依赖element模块 layui.use(element, function() { var element = layui.element; }); </script> </body>4.2.1 、图片与徽章
除了一般的文字导航 ，我们还内置了图片和徽章的支持 ，如：
<body> <!-- 水平导航 layui-nav layui-nav-item 表示的是导航的子项 layui-this 表示当前被选中的项 layui-nav-child 表示的是二级菜单 --> <!-- 水平导航 --> <ul class="layui-nav"> <!-- 导航的子项 --> <li class="layui-nav-item"> <a href="">控制台<span class="layui-badge">9</span></a> </li> <!-- 导航的子项 --> <li class="layui-nav-item"> <a href="">个人中心<span class="layui-badge-dot"></span></a> </li> <!-- 导航的子项 --> <li class="layui-nav-item"> <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a> <dl class="layui-nav-child"> <dd><a href="#">修改信息</a></dd> <dd><a href="#">安全管理</a></dd> <dd><a href="#">退出</a></dd> </dl> </li> </ul> <script type="text/javascript"> // 导航 依赖element模块 layui.use(element, function() { var element = layui.element; }); </script> </body>4.2 、导航主题
通过对导航追加CSS背景类 ，让导航呈现不同的主题色
给无序列表 ul 添加 class="layui-nav layui-bg-green" 可设置墨绿色背景的导航 水平导航支持其他的背景主题有：layui-bg-cyan(藏青) 、layui-bg-molv(墨绿) 、layui-bg-blue(艳蓝) 垂直导航支持的其他背景颜色有：layui-bg-cyan (藏青) <body> <!-- 墨绿 --> <ul class="layui-nav layui-bg-green"> <li class="layui-nav-item"><a href="">最新活动</a></li> <li class="layui-nav-item layui-this"><a href="">产品</a></li> <li class="layui-nav-item"><a href="">大数据</a></li> <li class="layui-nav-item"> <a href="">解决方案</a> <!--二级菜单--> <dl class="layui-nav-child"> <dd><a href="">移动模块</a></dd> <dd><a href="">后台模块</a></dd> <dd><a href="">电商平台</a></dd> </dl> </li> </ul> <hr> <!-- 藏青 --> <ul class="layui-nav layui-bg-cyan"> <li class="layui-nav-item"><a href="">最新活动</a></li> <li class="layui-nav-item layui-this"><a href="">产品</a></li> <li class="layui-nav-item"><a href="">大数据</a></li> <li class="layui-nav-item"> <a href="">解决方案</a> <!--二级菜单--> <dl class="layui-nav-child"> <dd><a href="">移动模块</a></dd> <dd><a href="">后台模块</a></dd> <dd><a href="">电商平台</a></dd> </dl> </li> </ul> <!-- 艳蓝 --> <hr> <ul class="layui-nav layui-bg-blue"> <li class="layui-nav-item"><a href="">最新活动</a></li> <li class="layui-nav-item layui-this"><a href="">产品</a></li> <li class="layui-nav-item"><a href="">大数据</a></li> <li class="layui-nav-item"> <a href="">解决方案</a> <!--二级菜单--> <dl class="layui-nav-child"> <dd><a href="">移动模块</a></dd> <dd><a href="">后台模块</a></dd> <dd><a href="">电商平台</a></dd> </dl> </li> </ul> <script type="text/javascript"> // 导航 依赖element模块 layui.use(element, function() { var element = layui.element; }); </script> </body>4.3 、垂直导航
给无序列表 ul 添加 class="layui-nav layui-nav-tree" 给 li 添加 class="layui-nav-item layui-nav-itemed" 表示此子项目是默认展开的 <!-- 垂直导航 layui-nav layui-nav-tree --> <ul class="layui-nav layui-nav-tree"> <li class="layui-nav-item layui-nav-itemed"> <a href="#">默认展开</a> <dl class="layui-nav-child"> <dd><a href="#">选项1</a></dd> <dd><a href="#">选项2</a></dd> <dd><a href="">跳转</a></dd> </dl> </li> <li class="layui-nav-item layui-nav-itemed"> <a href="#">解决方案</a> <dl class="layui-nav-child"> <dd><a href="">移动模块</a></dd> <dd><a href="">后台模版</a></dd> <dd><a href="">电商平台</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">产品</a></li> <li class="layui-nav-item"><a href="">大数据</a></li> </ul>4.4 、侧边导航
给无序列表 ul 添加 class="layui-nav layui-nav-tree layui-nav-side"
设定layui-this来指向当前页面分类 。
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --><ul class="layui-nav layui-nav-tree layui-nav-side"> <li class="layui-nav-item layui-nav-itemed"> <a href="#">默认展开</a> <dl class="layui-nav-child"> <dd><a href="#">选项1</a></dd> <dd><a href="#">选项2</a></dd> <dd><a href="">跳转</a></dd> </dl> </li> <li class="layui-nav-item layui-nav-itemed"> <a href="#">解决方案</a> <dl class="layui-nav-child"> <dd><a href="">移动模块</a></dd> <dd><a href="">后台模版</a></dd> <dd><a href="">电商平台</a></dd> </dl> </li> <li class="layui-nav-item layui-this"><a href="">产品</a></li> <li class="layui-nav-item"><a href="">大数据</a></li></ul>4.5 、总结
水平 、垂直 、侧边三个导航的 HTML 结构是完全一样的 ，不同的是
水平导航：class="layui-nav"
垂直导航需要追加：class="layui-nav-tree"
侧边导航需要追加：class="layui-nav-tree layui-nav-side"
4.6 、面包屑导航
给 span 标签 添加 layui-breadcrumb <span class="layui-breadcrumb"> <a href="">首页</a> <a href="">国际新闻</a> <a href="">亚太地区</a> <a><cite>正文</cite></a> </span> 我们还可以通过设置属性 lay-separator="-" 来自定义分隔符 <div class="layui-container"> <!-- 面包屑式导航 --> <span class="layui-breadcrumb"> <a href="">首页</a> <a href="">国际新闻</a> <a href="">亚太地区</a> <a><cite>正文</cite></a> </span> <hr> <!-- 设置属性 lay-separator="" 来自定义分隔符 --> <span class="layui-breadcrumb" lay-separator="-"> <a href="">首页</a> <a href="">国际新闻</a> <a href="">亚太地区</a> <a><cite>正文</cite></a> </span> <hr> <span class="layui-breadcrumb" lay-separator="|"> <a href="">娱乐</a> <a href="">八卦</a> <a href="">体育</a> <a href="">搞笑</a> <a href="">视频</a> <a href="">游戏</a> <a href="">综艺</a> </span> </div>5 、选项卡
导航菜单可应用于头部和侧边 ，Tab选项卡提供多套风格 ，支持响应式 ，支持删除选项卡等功能 。
依赖加载模块：element
实现步骤：
引入的资源 <link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/><script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script> 依赖加载模块 <script type="text/javascript"> // 注意：选项卡 依赖 element 模块 ，否则无法进行功能性操作 layui.use(element, function(){ var element = layui.element; }); </script>5.1 、选项卡风格
默认风格给容器添加 ：class="layui-tab" 简洁风格给容器追加：class="layui-tab-brief" 卡片风格给容器需要追加：class=layui-tab-card <body> <!-- 默认风格 .layui-tab--> <div class="layui-tab"> <!-- 设置选项卡标题 .layui-tab-title --> <ul class="layui-tab-title"> <li>网站设置</li> <li>用户管理</li> <li class="layui-this">权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <!-- 设置选项卡的内容 .layui-tab-content --> <div class="layui-tab-content"> <div class="layui-tab-item">内容1</div> <div class="layui-tab-item">内容2</div> <!-- 默认显示此内容 --> <div class="layui-tab-item layui-show">内容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> <script type="text/javascript"> // 导航 依赖element模块 layui.use(element, function() { var element = layui.element; }); </script> </body>默认风格：class="layui-tab"
简洁风格需要追加：class="layui-tab-brief"
卡片风格需要追加：class="layui-tab-card"
6 、表格
6.1 、常规用法
给 table 标签增加 class="layui-table"
在colgroup 标签中定义表格列的宽度
<col width="数值"> 表示相应列所占的宽度thead 标签表示表格的头部区域
tr 标签用于定义表格中的行(行头) th 标签用于定义表格中的表头(列头) <!-- 表格 class="layui-table" 常用属性 lay-even 如果设置了该属性 ，则可以显示隔行换色的效果 lay-skin 设置表格边框风格 line （行边框风格） row （列边框风格） nob （无边框风格） lay-size 设置表格的尺寸 sm （小尺寸） lg （大尺寸） --> <!-- 基础表格 .layui-table --> <table class="layui-table"> <colgroup> <!-- 第一列宽 150px 第二列宽300px 第三列宽自适应100% --> <col width="150"> <col width="300"> <col> </colgroup> <!-- thead 标签表示表格的头部区域,其内部必须拥有 tr 标签, tr标签一般位于第一行 --> <thead> <!-- tr用于定义表格中的行,必须嵌套在 table 中 --> <tr> <!-- th 用于定义表格中的表头,必须嵌套在 tr 中 --> <th>昵称</th> <th>加入时间</th> <th>签名</th> </tr> </thead> <tbody> <tr> <td>贤心</td> <td>2016-11-29</td> <td>人生就像是一场修行</td> </tr> <tr> <td>许闲心</td> <td>2016-11-28</td> <td>于千万人之中遇见你所遇见的人 ，于千万年之中 ，时间的无涯的荒野里…</td> </tr> </tbody> </table>6.2 、基础属性
静态表格支持以下基础属性 ，可定义不同风格/尺寸的表格样式：
属性名 属性值 备注 lay-even 无 用于开启隔行背景 ，可与其他属性一起使用 lay-skin=“属性值 ” line(行边框风格)
row(列边框风格)
nob(无边框风格) 若使用默认风格不设置该属性即可 lay-size=“属性值 ” sm(小尺寸)
lg(大尺寸) 若使用默认尺寸不设置该属性即可将我们所需要的基础属性写在 table 标签上即可：如（一个带有隔行背景 ，且行边框风格的大尺寸表格）：
<table lay-even lay-skin="line" lay-size="lg"> </table>7 、表单
依赖加载模块：form实现步骤：
引入的资源 <link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/> <script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script> 依赖加载模块 <!-- 加载模块 --> <script type="text/javascript"> // 加载form模块 layui.use("form",function(){ var form = layui.form; }); </script> 在一个容器中设定 class="layui-form" 来标识一个表单元素块 <form class="layui-form" action=""> </form> 基本的行区块结构 ，它提供了响应式的支持 。 给 div 添加 class="layui-form-item" 代表 ”行“ 给 label 添加 class="layui-form-label" 代表 ”区“ 给 div 添加 class="layui-input-inline" 代表 ”块“ <body> <!-- 在一个容器中设定 class="layui-form" 来标识一个表单元素块 --> <form action="" class="layui-form"> <!-- 基本的行区块结构 ，它提供了响应式的支持 。--> <div class="layui-form-item"> <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> <div class="layui-form-item"> <label class="layui-form-label">密码框区域</label> <div class="layui-input-inline"> <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </form> <script type="text/javascript"> // 表单 依赖form模块 layui.use(form, function() { var form = layui.form; }); </script> </body>7.0 、表单的常用属性
常用属性 描述 required 浏览器固定的必填字段 lay-verify 需要验证的类型(值为 required 的话表示必填项) class="layui-input" 提供的通用的样式 class="layui-input-block" 占据全部宽度 class="layui-input-inline" 占据部分宽度 placeholder 当文本框为空时 ，默认显示的文本信息 autocomplete 表单元素是否自动填充(当浏览器中缓存中存在相同name属性的值时 ，会填充)7.1 、输入框
<!-- 输入框 --><input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" /> required：注册浏览器所规定的必填字段 lay-verify="required" ：注册 form 模块需要验证的类型 class="layui-input"：layui.css 提供的通用 CSS 类7.2 、下拉选择框
通过 selected 属性设置默认选中项 通过 disabled 属性开启禁用 ，可以设置 select 和 option 标签(表示禁用下拉框和禁用下拉选项) 通过 optgroup 标签给 select 分组 通过设置 lay-search 属性开启搜索匹配功能 <body> <div class="layui-container"> <form action="" class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">城市</label> <div class="layui-input-inline"> <!-- 下拉选择框 1. 通过selected属性设置默认选中项 2. 通过disabled属性开启禁用 ，可以设置select和option标签（禁用下拉框和禁用下拉选项） 3. 可以通过 optgroup 标签给select分组 4. 通过设置lay-search属性开启搜索匹配功能 --> <select name="city" lay-verify="required"> <option value="">请选择一个城市</option> <option value="010">北京</option> <option value="021" selected>上海</option> <option value="0571" disabled>杭州</option> </select> </div> </div> </form> </div> <script type="text/javascript"> // 表单,依赖 form 模块 layui.创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！