欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端layui框架快速入门

程序员文章站 2022-04-07 20:57:07
...

layui使用

先下载框架

layui-v2.5.6.zip：框架下载地址
**git下载地址:**https://github.com/sentsin/layui.git

解压后的目录

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

使用

获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件：

./layui/css/layui.css
./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

我的下载解压位置在
E:/git下载/
也就是代码中必须插入文件位置：

<link rel="stylesheet" href="E:/git下载/layui/src/css/layui.css">
<script src="E:/git下载/layui/src/layui.js"></script>

整体代码就是

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用layui</title>
  <link rel="stylesheet" href="E:/git下载/layui/src/css/layui.css">
</head>
<body>
 
<!-- 你的HTML代码 -->
 
<script src="E:/git下载/layui/src/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});
</script> 
</body>
</html>

layui还提供了大量的组件，可以直接填充进HTML代码内！

相关标签： java html github visual studio code git js

上一篇： Python实现图片对比

下一篇： [JAVA] EL表达式乱码问题

推荐阅读