本文作者:心月

layui框架如何使用使用

心月IT博客 2019-10-10
layui框架如何使用使用摘要: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>
文章版权及转载声明:

本文由 心月IT技术博客 博主整理于 2019-10-10
若转载请注明原文及出处:https://www.xinyueseo.com/webfe/383.html

分享到:
赞(
发表评论
快捷输入:

验证码

    评论列表 (有 0 条评论,人围观)参与讨论