LayUI框架

最新推荐文章于 2025-06-01 09:01:01 发布

原创最新推荐文章于 2025-06-01 09:01:01 发布 · 1.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#layui

前端专栏收录该内容

3 篇文章

订阅专栏

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="text/css" href="layui/css/layui.css"/>
		<!-- 引入layui核心js文件  采用模块化引入 -->
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--固定宽度  两侧留白
			完整宽度 占据屏幕百分百
		 -->
		<!-- <div class="layui-container" style="background-color: navajowhite; height: 300px;">
		 	固定宽度
		 </div> -->
		 
		 <div class="layui-fluid " style="background-color: cyan;">
		 	完整宽度
		 </div>
	</body>
</html>

三、栅格系统

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>栅格系统</title>
		<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>
		<!-- 
		 栅格系统1.定义行 layui-row
				2.定义列  layui-col-md-*   md  sm  xs lg
		 
		 
		 -->
		<div class="layui-container">
			<!-- 定义行 -->
			<div class="layui-row">
				<!-- 定义列 -->
				<div class="layui-col-md5" style="background-color: deepskyblue;">
					内容的十二分之五
				</div>
				<div class="layui-col-md7 " style="background-color: saddlebrown;">
					内容的十二分之七
				</div>
			</div>
			
			<!-- 定义行 -->
			<div class="layui-row" >
				<!-- 定义列 -->
				<div class="layui-col-md4" style="background-color: darkkhaki;">
					内容的十二分之四
				</div>
				<div class="layui-col-md7" style="background-color: #01AAED;">
					内容的十二分之七
				</div>
			</div>
		</div>
	</body>
</html>

按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按钮</title>
		<link rel="stylesheet" type="text/css" href="css/layui.css"/>
		<!-- 引入layui核心js文件  采用模块化引入 -->
		<script src="layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button" class="layui-btn">一个标准的按钮</button>
		<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
		<div class="layui-btn">一个按钮</div>
		
		<hr >
		<div class="layui-btn layui-btn-primary">原始</div>
		<div class="layui-btn">默认</div>
		<div class="layui-btn layui-btn-normal">百搭</div>
		<div class="layui-btn layui-btn-warm">暖色</div>
		<div class="layui-btn layui-btn-danger">警告</div>
		<div class="layui-btn layui-btn-disabled">禁用</div>
		
		
		<hr >
					
					<!-- 大型	class="layui-btn layui-btn-lg"
			默认	class="layui-btn"
			小型	class="layui-btn layui-btn-sm"
			迷你	class="layui-btn layui-btn-xs" -->
			<div class="layui-btn layui-btn-lg">大型</div>
			<div class="layui-btn">默认</div>
			<div class="layui-btn layui-btn-sm">小型</div>
			<div class="layui-btn layui-btn-xs"> 迷你</div>
			
			<hr >
			<!-- 
			 主题	组合
			 原始	class="layui-btn layui-btn-radius layui-btn-primary"
			 默认	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-btn layui-btn-radius layui-btn-primary">原始</div>
			<div class="layui-btn layui-btn-radius">默认</div>
			<div class="layui-btn layui-btn-radius layui-btn-normal">百搭</div>
			<div class="layui-btn layui-btn-radius layui-btn-warm">暖色</div>
			<div class="layui-btn layui-btn-radius layui-btn-danger">警告</div>
			<div class="layui-btn layui-btn-radius layui-btn-disabled">禁用</div>
			
			<hr >
			<!-- 图标 -->
			<button type="button" class="layui-btn">
			  <i class="layui-icon">&#xe608;</i> 添加
			</button>
			 
			<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
			  <i class="layui-icon">&#x1002;</i>刷新
			</button>
			
			<button type="button" class="layui-btn layui-btn-sm layui-btn-warm">
			  <i class="layui-icon layui-icon-heart"></i>关注
			</button>
			
	</body>
</html>