layui学习

朱雀 2024-03-17 12:16 43阅读 0赞

官网：[Layui镜像站-经典开源模块化前端 UI 框架(官方文档完整镜像)][Layui_-_ UI]

下载：可以在首页进行下载

[快速入门Layui | 枫桥夜泊][Layui _]

如果不知道样式在哪个模块下，引入总的核心样式文件；如果知道样式在哪个模块下，直接引入modules下具体的样式

![0a79d41425124a8c8c1c1e289cf60e00.png][]

layui是模块化框架

[DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架][DCloud - HBuilder_HBuilderX_uni-app_uniapp_5_5plus_mui_wap2app_HTML5_App]

![53f13f26459140cd8fc723ef9dd69c63.png][]

引入layui

<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>

layui.use : 使用layer模块

layui.use(['layer', 'form'], function(){
      var layer = layui.layer
      ,form = layui.form;
      
      layer.msg('Hello World');
    });

模块相关

![a5cef78bdc82494980a5a687d7e89748.png][]

布局元素

布局采用响应式框架通用的栅格系统进行布局

layui 的栅格采用业界比较常见的 12 等分规则，内置手机、平板、PC 桌面中大型屏幕的多终端适配处理，最低能支持到 ie8。layui 开放了它经典的管理系统布局方案

layui-container

固定宽度并且居中的容器

layui-fluid
    
    宽度不固定100%适应的容器

行：layui-row

行中的列：类似 *layui-col-md\**

*  变量*md* 代表的是不同屏幕下的标记（可选值见下文）
 *  变量*\** 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
 *  如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。

<div class="layui-row">
    			
    			<div class="layui-col-md3"></div>
    			
    			<div class="layui-col-md9"></div>
    		</div>

列偏移

layui-col-md-offset\* --> \* 代表当前列向右偏移多少列

[Layui_-_ UI]: https://layui.site/
[Layui _]: https://ukoko.gitee.io/2022/05/16/%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8layui/#more
[0a79d41425124a8c8c1c1e289cf60e00.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/89fbe624783846f29e9ae6ebcefa6364.png
[DCloud - HBuilder_HBuilderX_uni-app_uniapp_5_5plus_mui_wap2app_HTML5_App]: http://www.dcloud.io/
[53f13f26459140cd8fc723ef9dd69c63.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/3be5935c1986430cb865786a8fc53035.png
[a5cef78bdc82494980a5a687d7e89748.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/c09dee06ec3c4f1bb40ad7c9fc919354.png