前端LayUI框架快速上手详解(一)

✍目录总览

在这里插入图片描述

🔥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文件 --><linkrel="stylesheet"type="text/css"href="layui-v2.5.6/layui/css/layui.css"/><!-- LayUI的核心JS文件（采用模块化引入） --><scriptsrc="layui-v2.5.6/layui/layui.js"type="text/javascript"charset="utf-8"></script>

这是一个基本的入门页面

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1"><title>开始使用 layui</title><!-- LayUI的核心CSS文件 --><linkrel="stylesheet"href="./layui/css/layui.css"></head><body><!-- 你的 HTML 代码 --><!-- LayUI的核心JS文件 --><scriptsrc="./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" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。
固定宽度的两侧有留白效果

<divclass="layui-container"style="background-color: pink;height: 300px;">
        固定宽度（两侧有留白效果）
</div>

2.1.2、完整宽度

可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid"的容器中，那么宽度将不会固定，而是 100% 适应
完整宽度占据屏幕宽度的100%

<divclass="layui-fluid"style="background-color: cyan;height: 300px;">
         完整宽度(占据屏幕宽度的100%)
</div>

在这里插入图片描述

2.2、栅格系统

我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

2.2.1、栅格布局规则

采用 class="layui-row" 来定义行，如：

<divclass="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，否则会自动换行
 --><!-- 布局容器 --><divclass="layui-container"><!-- 定义行 --><divclass="layui-row"><!-- 定义列  --><divclass="layui-col-md5"style="background-color: deepskyblue;">
            内容5/12
        </div><divclass="layui-col-md7"style="background-color: bisque;">
            内容7/12
        </div></div><!-- 定义行 --><divclass="layui-row"><!-- 定义列  --><divclass="layui-col-md4"style="background-color: powderblue;">
            内容4/12
        </div><divclass="layui-col-md4"style="background-color: mediumaquamarine;">
            内容4/12
        </div><divclass="layui-col-md6"style="background-color: grey;">
            内容6/12
        </div></div></div>

在这里插入图片描述

2.2.2、响应式规则

简单来说，就是会针对四类不同尺寸的屏幕，进行响应式适配处理。

<!--
                4. 响应式规则
                栅格会自动根据屏幕的分辨率选择对应的样式效果。
--><body><h3>平板、桌面端的不同表现：</h3><divclass="layui-row"><!-- 小屏幕占6列，中屏幕占4列 --><divclass="layui-col-sm6 layui-col-md4"style="background-color: thistle">
            平板≥768px：6/12 | 桌面端≥992px：4/12
        </div></div><divclass="layui-row"><!-- 小屏幕占4列，中屏幕占6列 --><divclass="layui-col-sm4 layui-col-md6"style="background-color: mediumaquamarine;">
            平板≥768px：4/12 | 桌面端≥992px：6/12
        </div></div><divclass="layui-row"><!-- 小屏幕占12列，中屏幕占8列 --><divclass="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><divclass="layui-row layui-col-space20"><divclass="layui-col-md4"><!-- 给具体的内容设置背景颜色 --><divstyle="background-color: hotpink">4</div></div><divclass="layui-col-md4"><divstyle="background-color: indianred">4</div></div><divclass="layui-col-md4"><divstyle="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><divclass="layui-row"><divclass="layui-col-md4"><divstyle="background-color: red">4</div></div><!--向右移动4列--><divclass="layui-col-md4 layui-col-md-offset4"><divstyle="background-color: skyblue">
               向右移动4列
           </div></div></div></body>

2.2.5、列嵌套

列之间可以无限嵌套列

<divclass="layui-row"><!-- 大的盒子占6列 --><divclass="layui-col-md6"><divstyle="background-color: red"><divclass="layui-row"><!-- 嵌套列 --><divclass="layui-col-md3"style="background-color: burlywood;">
                    内部列
                </div><divclass="layui-col-md5"style="background-color: indianred;">
                    内部列
                </div><divclass="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><divclass="layui-container"><!-- 基础按钮 --><buttontype="button"class="layui-btn">一个标准的按钮</button><ahref="http://www.layui.com"class="layui-btn">一个可跳转的按钮</a><divclass="layui-btn">一个按钮</div><hr><!-- 不同主题的按钮 --><buttonclass="layui-btn">默认按钮</button><buttonclass="layui-btn layui-btn-primary">原始按钮</button><buttonclass="layui-btn layui-btn-normal">百搭按钮</button><buttonclass="layui-btn layui-btn-warm">暖色按钮</button><buttonclass="layui-btn layui-btn-danger">警告按钮</button><buttonclass="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><divclass="layui-container"><!-- 不同尺寸的按钮 --><buttonclass="layui-btn layui-btn-primary layui-btn-lg">大型原始按钮</button><buttonclass="layui-btn">默认按钮</button><buttonclass="layui-btn layui-btn-sm layui-btn-danger">小型警告按钮</button><buttonclass="layui-btn layui-btn-xs">迷你按钮</button><buttontype="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"

<divclass="layui-container"><!-- layui-btn-radius 圆角按钮 --><buttonclass="layui-btn layui-btn-radius">默认圆角按钮</button><buttonclass="layui-btn layui-btn-primary layui-btn-radius">原始圆角按钮</button><buttonclass="layui-btn layui-btn-normal layui-btn-radius">百搭圆角按钮</button><buttonclass="layui-btn layui-btn-warm layui-btn-radius">暖色圆角按钮</button><buttonclass="layui-btn layui-btn-danger layui-btn-radius">警告圆角按钮</button><buttonclass="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

<iclass="layui-icon layui-icon-face-smile"></i>

3.4.2、图标按钮

<body><divclass="layui-container"><!-- 图标按钮 --><buttontype="button"class="layui-btn"><iclass="layui-icon">&#xe608;</i> 添加        </button><buttontype="button"class="layui-btn layui-btn-sm layui-btn-primary"><iclass="layui-icon">&#x1002;</i> 刷新        </button><buttontype="button"class="layui-btn layui-btn-sm layui-btn-warm"><iclass="layui-icon layui-icon-heart"></i> 关注        </button></div></body>

在这里插入图片描述

4、导航

导航一般应用于头部和侧边，是整个网页画龙点晴般的存在
依赖加载模块：element

实现步骤：

引入的资源

<linkrel="stylesheet"type="text/css"href="layui-v2.5.6/layui/css/layui.css"/><scriptsrc="layui-v2.5.6/layui/layui.js"type="text/javascript"charset="utf-8"></script>

依赖加载模块

<scripttype="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 --><ulclass="layui-nav"><liclass="layui-nav-item"><ahref="">最新活动</a></li><liclass="layui-nav-item layui-this"><ahref="">产品</a></li><liclass="layui-nav-item"><ahref="">大数据</a></li><liclass="layui-nav-item"><ahref="">解决方案</a><!--二级菜单--><dlclass="layui-nav-child"><dd><ahref="">移动模块</a></dd><dd><ahref="">后台模块</a></dd><dd><ahref="">电商平台</a></dd></dl></li></ul><scripttype="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 表示的是二级菜单
     --><!-- 水平导航 --><ulclass="layui-nav"><!-- 导航的子项 --><liclass="layui-nav-item"><ahref="">控制台<spanclass="layui-badge">9</span></a></li><!-- 导航的子项 --><liclass="layui-nav-item"><ahref="">个人中心<spanclass="layui-badge-dot"></span></a></li><!-- 导航的子项 --><liclass="layui-nav-item"><ahref=""><imgsrc="//t.cn/RCzsdCq"class="layui-nav-img">我</a><dlclass="layui-nav-child"><dd><ahref="#">修改信息</a></dd><dd><ahref="#">安全管理</a></dd><dd><ahref="#">退出</a></dd></dl></li></ul><scripttype="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><!-- 墨绿 --><ulclass="layui-nav layui-bg-green"><liclass="layui-nav-item"><ahref="">最新活动</a></li><liclass="layui-nav-item layui-this"><ahref="">产品</a></li><liclass="layui-nav-item"><ahref="">大数据</a></li><liclass="layui-nav-item"><ahref="">解决方案</a><!--二级菜单--><dlclass="layui-nav-child"><dd><ahref="">移动模块</a></dd><dd><ahref="">后台模块</a></dd><dd><ahref="">电商平台</a></dd></dl></li></ul><hr><!-- 藏青 --><ulclass="layui-nav layui-bg-cyan"><liclass="layui-nav-item"><ahref="">最新活动</a></li><liclass="layui-nav-item layui-this"><ahref="">产品</a></li><liclass="layui-nav-item"><ahref="">大数据</a></li><liclass="layui-nav-item"><ahref="">解决方案</a><!--二级菜单--><dlclass="layui-nav-child"><dd><ahref="">移动模块</a></dd><dd><ahref="">后台模块</a></dd><dd><ahref="">电商平台</a></dd></dl></li></ul><!-- 艳蓝 --><hr><ulclass="layui-nav layui-bg-blue"><liclass="layui-nav-item"><ahref="">最新活动</a></li><liclass="layui-nav-item layui-this"><ahref="">产品</a></li><liclass="layui-nav-item"><ahref="">大数据</a></li><liclass="layui-nav-item"><ahref="">解决方案</a><!--二级菜单--><dlclass="layui-nav-child"><dd><ahref="">移动模块</a></dd><dd><ahref="">后台模块</a></dd><dd><ahref="">电商平台</a></dd></dl></li></ul><scripttype="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  --><ulclass="layui-nav layui-nav-tree"><liclass="layui-nav-item  layui-nav-itemed"><ahref="#">默认展开</a><dlclass="layui-nav-child"><dd><ahref="#">选项1</a></dd><dd><ahref="#">选项2</a></dd><dd><ahref="">跳转</a></dd></dl></li><liclass="layui-nav-item layui-nav-itemed"><ahref="#">解决方案</a><dlclass="layui-nav-child"><dd><ahref="">移动模块</a></dd><dd><ahref="">后台模版</a></dd><dd><ahref="">电商平台</a></dd></dl></li><liclass="layui-nav-item"><ahref="">产品</a></li><liclass="layui-nav-item"><ahref="">大数据</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"> --><ulclass="layui-nav layui-nav-tree layui-nav-side"><liclass="layui-nav-item  layui-nav-itemed"><ahref="#">默认展开</a><dlclass="layui-nav-child"><dd><ahref="#">选项1</a></dd><dd><ahref="#">选项2</a></dd><dd><ahref="">跳转</a></dd></dl></li><liclass="layui-nav-item layui-nav-itemed"><ahref="#">解决方案</a><dlclass="layui-nav-child"><dd><ahref="">移动模块</a></dd><dd><ahref="">后台模版</a></dd><dd><ahref="">电商平台</a></dd></dl></li><liclass="layui-nav-item layui-this"><ahref="">产品</a></li><liclass="layui-nav-item"><ahref="">大数据</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

<spanclass="layui-breadcrumb"><ahref="">首页</a><ahref="">国际新闻</a><ahref="">亚太地区</a><a><cite>正文</cite></a></span>

我们还可以通过设置属性 lay-separator="-" 来自定义分隔符

<divclass="layui-container"><!-- 面包屑式导航 --><spanclass="layui-breadcrumb"><ahref="">首页</a><ahref="">国际新闻</a><ahref="">亚太地区</a><a><cite>正文</cite></a></span><hr><!-- 设置属性 lay-separator="" 来自定义分隔符 --><spanclass="layui-breadcrumb"lay-separator="-"><ahref="">首页</a><ahref="">国际新闻</a><ahref="">亚太地区</a><a><cite>正文</cite></a></span><hr><spanclass="layui-breadcrumb"lay-separator="|"><ahref="">娱乐</a><ahref="">八卦</a><ahref="">体育</a><ahref="">搞笑</a><ahref="">视频</a><ahref="">游戏</a><ahref="">综艺</a></span></div>

在这里插入图片描述

5、选项卡

导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。
依赖加载模块：element

实现步骤：

引入的资源

<linkrel="stylesheet"type="text/css"href="layui-v2.5.6/layui/css/layui.css"/><scriptsrc="layui-v2.5.6/layui/layui.js"type="text/javascript"charset="utf-8"></script>

依赖加载模块

<scripttype="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--><divclass="layui-tab"><!-- 设置选项卡标题 .layui-tab-title --><ulclass="layui-tab-title"><li>网站设置</li><li>用户管理</li><liclass="layui-this">权限分配</li><li>商品管理</li><li>订单管理</li></ul><!-- 设置选项卡的内容 .layui-tab-content --><divclass="layui-tab-content"><divclass="layui-tab-item">内容1</div><divclass="layui-tab-item">内容2</div><!-- 默认显示此内容 --><divclass="layui-tab-item layui-show">内容3</div><divclass="layui-tab-item">内容4</div><divclass="layui-tab-item">内容5</div></div></div><hr><!-- 简洁风格 --><divclass="layui-tab layui-tab-brief"><ulclass="layui-tab-title"><liclass="layui-this">网站设置</li><li>用户管理</li><li>权限分配</li><li>商品管理</li><li>订单管理</li></ul><divclass="layui-tab-content"><divclass="layui-tab-item layui-show">内容1</div><divclass="layui-tab-item">内容2</div><divclass="layui-tab-item">内容3</div><divclass="layui-tab-item">内容4</div><divclass="layui-tab-item">内容5</div></div></div><hr><!-- 卡片风格 --><divclass="layui-tab layui-tab-card"><ulclass="layui-tab-title"><liclass="layui-this">网站设置</li><li>用户管理</li><li>权限分配</li><li>商品管理</li><li>订单管理</li></ul><divclass="layui-tab-content"><divclass="layui-tab-item layui-show">内容1</div><divclass="layui-tab-item">内容2</div><divclass="layui-tab-item">内容3</div><divclass="layui-tab-item">内容4</div><divclass="layui-tab-item">内容5</div></div></div><scripttype="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 --><tableclass="layui-table"><colgroup><!-- 第一列宽 150px 第二列宽300px 第三列宽自适应100% --><colwidth="150"><colwidth="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

标签上即可：如（一个带有隔行背景，且行边框风格的大尺寸表格）：

<tablelay-evenlay-skin="line"lay-size="lg"></table>

7、表单

依赖加载模块：form

实现步骤：

引入的资源

<linkrel="stylesheet"type="text/css"href="layui-v2.5.6/layui/css/layui.css"/><scriptsrc="layui-v2.5.6/layui/layui.js"type="text/javascript"charset="utf-8"></script>

依赖加载模块

<!-- 加载模块 --><scripttype="text/javascript">// 加载form模块
    layui.use("form",function(){var form = layui.form;});</script>

在一个容器中设定 class="layui-form" 来标识一个表单元素块

<formclass="layui-form"action=""></form>

基本的行区块结构，它提供了响应式的支持。 - 给 div 添加 class="layui-form-item" 代表”行“- 给 label 添加 class="layui-form-label" 代表”区“- 给 div 添加 class="layui-input-inline" 代表”块“

<body><!-- 在一个容器中设定 class="layui-form" 来标识一个表单元素块 --><formaction=""class="layui-form"><!-- 基本的行区块结构，它提供了响应式的支持。--><divclass="layui-form-item"><labelclass="layui-form-label">标题区域</label><divclass="layui-input-inline"><!-- 输入框 --><inputtype="text"name="title"requiredlay-verify="required"placeholder="请输入标题"autocomplete="off"class="layui-input"/></div></div><divclass="layui-form-item"><labelclass="layui-form-label">密码框区域</label><divclass="layui-input-inline"><inputtype="password"name="password"requiredlay-verify="required"placeholder="请输入密码"autocomplete="off"class="layui-input"></form><scripttype="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、输入框

<!-- 输入框 --><inputtype="text"name="title"requiredlay-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><divclass="layui-container"><formaction=""class="layui-form"><divclass="layui-form-item"><labelclass="layui-form-label">城市</label><divclass="layui-input-inline"><!-- 
                            下拉选择框
                                1. 通过selected属性设置默认选中项
                                2. 通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）
                                3. 可以通过 optgroup 标签给select分组
                                4. 通过设置lay-search属性开启搜索匹配功能
                         --><selectname="city"lay-verify="required"><optionvalue="">请选择一个城市</option><optionvalue="010">北京</option><optionvalue="021"selected>上海</option><optionvalue="0571"disabled>杭州</option></select></div></div></form></div><scripttype="text/javascript">// 表单,依赖 form 模块
        layui.use('form',function(){var form = layui.form;})</script></body>

在这里插入图片描述

7.2.1、分组

可以通过 optgroup 标签给select分组

<body><divclass="layui-container"><formaction=""class="layui-form"><divclass="layui-form-item"><labelclass="layui-form-label">城市</label><divclass="layui-input-inline"><!-- 
                            下拉选择框
                                1. 通过selected属性设置默认选中项
                                2. 通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）
                                3. 可以通过 optgroup 标签给select分组
                                4. 通过设置lay-search属性开启搜索匹配功能
                         --><!-- 分组 --><selectname="quiz"><optionvalue="">请选择</option><!-- 分组城市记忆 --><optgrouplabel="城市记忆"><optionvalue="你工作的第一个城市">你工作的第一个城市？</option></optgroup><!-- 分组学生时代 --><optgrouplabel="学生时代"><optionvalue="你的工号">你的工号？</option><optionvalue="你最喜欢的老师">你最喜欢的老师？</option></optgroup></select></div></div></form></div><scripttype="text/javascript">// 表单,依赖 form 模块
        layui.use('form',function(){var form = layui.form;})</script></body>

在这里插入图片描述

7.2.2、开启搜索匹配

通过设置 lay-search 属性开启搜索匹配功能

<body><divclass="layui-container"><formaction=""class="layui-form"><divclass="layui-form-item"><labelclass="layui-form-label">城市</label><divclass="layui-input-inline"><!-- 
                            下拉选择框
                                1. 通过selected属性设置默认选中项
                                2. 通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）
                                3. 可以通过 optgroup 标签给select分组
                                4. 通过设置lay-search属性开启搜索匹配功能
                         --><!-- 开启搜索匹配 --><selectname="city"lay-verify=""lay-search><optionvalue="">请选择</option><optionvalue="010">layer</option><optionvalue="021">form</option><optionvalue="0571">layim</option></select></div></div></form></div><scripttype="text/javascript">// 表单,依赖 form 模块
        layui.use('form',function(){var form = layui.form;})</script></body>

在这里插入图片描述

7.3、复选框

通过设置 title 属性设置自定义文本(如果不需要显示文本，则不设置 title 属性)
通过 checked 属性设置被选中的项
通过·lay-skin 属性设置复选框的样式效果(lay-skin="primary" 表示原始效果)
通过 disabled 属性禁用元素

<formaction=""class="layui-form"><divclass="layui-form-item"><labelclass="layui-form-label">爱好</label><divclass="layui-input-block"><!--
                复选框 
                    1. 通过title属性设置自定义文本（如果不需要显示文本，则不设置title属性）
                    2. 通过checked属性设置被选中的项
                    3. 通过lay-skin属性设置复选框的样式效果（lay-skin="parmary"表示原始效果）
                    4. 通过disabled属性禁用元素
            --><!-- 默认效果 --><inputtype="checkbox"name="hobby"title="唱歌"checkedvalue="sing"/><inputtype="checkbox"name="hobby"title="跳舞"value="dance"/><inputtype="checkbox"name="hobby"title="禁用"disabled/><br><!-- 原始效果 --><inputtype="checkbox"name="hobby"title="唱歌"lay-skin="primary"checkedvalue="sing"/><inputtype="checkbox"name="hobby"title="跳舞"lay-skin="primary"value="dance"/><inputtype="checkbox"name="hobby"title="禁用"lay-skin="primary"disabled/></div></div></form>

在这里插入图片描述

7.3.1、开关

将复选框，设置 lay-skin="switch" 形成开关风格
通过 lay-text="打开的值|关闭的值" 来设定开关的两种状态的文本，通过| 分隔
通过 checked 属性设置默认打开状态
通过 disabled 属性禁用开关
通过 value 属性设置选中的值

<formaction=""class="layui-form"><divclass="layui-form-item"><labelclass="layui-form-label">开关</label><divclass="layui-input-block"><!--     
                开关
                    将复选框，设置lay-skin="switch"形成开关风格
                    1. 通过lay-text="打开的值|关闭的值"来设定开关的两种状态的文本，通过"|"分隔
                    2. 通过checked设置默认打开状态
                    3. 通过disabled属性禁用开关
                    4. 通过value属性设置选中的值

             --><inputtype="checkbox"name="aa"lay-skin="switch"/><inputtype="checkbox"name="bb"lay-skin="switch"checked/><inputtype="checkbox"name="cc"lay-skin="switch"checkedlay-text="on|off"/><inputtype="checkbox"name="dd"lay-skin="switch"checkedlay-text="打开|关闭"value="打开"/><inputtype="checkbox"name="ee"lay-skin="switch"lay-text="打开|关闭"disabled/></div></div></form>

7.4、单选框

通过 checked 设置默认选中项
通过 disabled 属性禁用单选框
通过 value 属性设置选中的值

<formaction=""class="layui-form"><divclass="layui-form-item"><labelclass="layui-form-label">性别</label><divclass="layui-input-block"><!-- 
                单选框
                    1. 通过checked设置默认选中项
                    2. 通过disabled属性禁用单选框
                    3. 通过value属性设置选中的值 
             --><inputtype="radio"name="sex"value="nan"title="男"><inputtype="radio"name="sex"value="nv"title="女"checked><inputtype="radio"name="sex"value=""title="中性"disabled></div></div></form>

在这里插入图片描述

7.5、文本域

给 textarea 标签添加class="layui-textarea"

<formaction=""class="layui-form"><divclass="layui-form-item"><labelclass="layui-form-label">简介</label><divclass="layui-input-inline"><!-- 
                文本域
                    class="layui-textarea"：layui.css提供的通用CSS类 
             --><textareaname=""requiredlay-verify="required"placeholder="请输入"class="layui-textarea"></textarea></div></div></form>

在这里插入图片描述

7.6、组装行内表单

行内表单：表单元素在一行显示（div 盒子也不会全部占完宽度）

给 div 设置 class="layui-inline" ：定义外层行内
给 div 设置 class="layui-input-inline" ：定义内层行内

<formaction=""class="layui-form"><divclass="layui-form-item"><!-- 定义外层行内 .layui-inline  --><divclass="layui-inline"><labelclass="layui-form-label">范围</label><!-- 定义内层行内 .layui-input-inline --><divclass="layui-input-inline"style="width: 100px;"><inputtype="text"name="price_min"placeholder="￥"autocomplete="off"class="layui-input"></div><divclass="layui-form-mid">-</div><divclass="layui-input-inline"style="width: 100px;"><inputtype="text"name="price_max"placeholder="￥"autocomplete="off"class="layui-input"></div></div><!-- 定义外层行内 --><divclass="layui-inline"><labelclass="layui-form-label">密码</label><!-- 定义内层行内 --><divclass="layui-input-inline"style="width: 100px;"><inputtype="password"name=""autocomplete="off"class="layui-input"></div></div></div></form>

在这里插入图片描述

7.7、表单方框风格

给 form 标签追加 class="layui-form-pane "，来设定表单的方框风格。
内部结构不变，值得注意的是：复选框/开关/单选框这些组合在该风格下需要额外添加 pane属性

<!-- 通过追加 layui-form-pane 的class，来设定表单的方框风格。 --><formclass="layui-form  layui-form-pane"action=""><!-- 
      内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性 
      --><divclass="layui-form-item"pane><labelclass="layui-form-label">单选框</label><divclass="layui-input-block"><inputtype="radio"name="sex"value="男"title="男"><inputtype="radio"name="sex"value="女"title="女"checked></div></div></form>

标签： javascript

本文转载自: https://blog.csdn.net/Augenstern_QXL/article/details/119748962
版权归原作者 生命是有光的 所有，如有侵权，请联系我们删除。

前端LayUI框架快速上手详解(一)

✍目录总览

🔥LayUI

1、LayUI

1.1、下载与使用

2、布局

2.1、布局容器

2.1.1、固定宽度

2.1.2、完整宽度

2.2、栅格系统

2.2.1、栅格布局规则

2.2.2、响应式规则

2.2.3、列间距

2.2.4、列偏移

2.2.5、列嵌套

3、按钮

3.1、按钮风格

3.2、按钮尺寸

3.3、圆角按钮

3.4、图标按钮

3.4.1、图标

3.4.2、图标按钮

4、导航

4.1、水平导航

4.2.1、图片与徽章

4.2、导航主题

4.3、垂直导航

4.4、侧边导航

4.5、总结

4.6、面包屑导航

5、选项卡

5.1、选项卡风格

6、表格

6.1、常规用法

6.2、基础属性

7、表单

7.0、表单的常用属性

7.1、输入框

7.2、下拉选择框

7.2.1、分组

7.2.2、开启搜索匹配

7.3、复选框

7.3.1、开关

7.4、单选框

7.5、文本域

7.6、组装行内表单

7.7、表单方框风格

发表评论

“前端LayUI框架快速上手详解(一)”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航