LayUI框架

最新推荐文章于 2025-03-29 15:51:40 发布

Codecheng2021

最新推荐文章于 2025-03-29 15:51:40 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签： layui

本文链接：https://blog.youkuaiyun.com/Zz_cheng/article/details/116357983

版权

LayUI是一个专为后端程序员打造的前端UI框架，其模块加载方式不遵循AMD，采用轻量级的自定义规范。主要内容包括：1. layui的目录结构介绍；2. 使用方法；3. 布局容器的代码示例；4. 栅格系统的代码展示；5. 按钮等组件的说明。官网提供了丰富的资源和类似BootStrap的简便使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

你可以在官网首页https://www.layui.com/doc/ 下载到 layui 的最新版，它经过了自动化构建，更适合用于生产环境

#LayUI框架
1.为后端程序员量身定做
2.layui 的模块是基于 layui.js 内部实现的异步模块加载方式，它并不遵循于AMD（没有为什么，毕竟任性呀！），而是自己定义了一套更轻量的模块规范。并且这种方式在经过了大量的实践后，成为 layui 最核心的模块加载引擎。

一、使用？

├─css //css目录
│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>LayUI的使用</title>
		<!-- 引入layui核心css文件 -->
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<!-- 引入layui核心js文件  采用模块化引入 -->
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
			<script>
			//一般直接写在一个js文件中
			layui.use(['layer', 'form'], function(){
    
			  var layer = layui.layer
			  ,form = layui.form;
			  // 弹出框
			  layer.msg('Hello World');
			});
			</script> 
			</body>
		</html>
	</body>
</html>

二、布局容器

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>布局容器</title>
		<!-- 引入layui核心css文件 -->
		<link rel="stylesheet" type

最低0.47元/天解锁文章