layui框架如何使用使用

心月IT博客 10-10

默认

摘要：layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML CSS JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

既然 layui 这么好，该怎么用呢？

layui框架官网

1、下载框架

首先我们得在layui官网下载框架（lauyi官网：https://www.php.cn/layui/）

然后解压，把 lauyi（里面包含了font、css、image及lay等内容）文件夹及里面的所有文件一起拷贝到你的项目中，你愿意放哪就放哪，只要引用里面的文件时能找到。

2、layui 框架的使用

引用css、js文件，在需要使用layui框架的页面引入layui的css和js，将下面两行代码加入页面的head内，注意css和js文件的路径

<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>

layui框架使用引入文件

两个核心文件引入后我们就可以使用layui相关的css和js功能了：

<!DOCTYPE html>
<html>
<head>
	<title>layui 框架使用</title>
	<link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
	<script type="text/javascript" src="/layui/layui.js"></script>
</head>
<body>
	<script type="text/javascript">
		
		layui.use(['layer', 'form'], function(){
		  var layer = layui.layer
		  ,form = layui.form;
                    //在页面中显示提示信息
		  layer.msg('Hello World');

		});
	</script>
</body>
</html>

标签：框架 layui