官网介绍
由职业前端倾情打造，面向全层次的前后端开发者，低门槛开箱即用的前端 UI 解决方案
下载文件介绍
文件树
├─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 和 Js
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入css -->
<link rel="stylesheet" href="./layui/css/layui.css">
<!-- 映入 Js -->
<script src="./layui/layui.js"></script>
</head>
两种模块化用法
模块化用法（一般用于开发环境）
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入css -->
<link rel="stylesheet" href="./layui/css/layui.css">
<!-- 模块化的用法 导入的 Js -->
<script src="./layui/layui.js"></script>
<!-- 模块化的用法 -->
<script>
layui.use(['layer',"form"],function () {
// 使用哪一个模块的功能 就导入哪一个
var layer = layui.layer;
layer.alert("大数据男孩")
})
</script>
</head>
全模块用法（一般用于线上环境）
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入css -->
<link rel="stylesheet" href="./layui/css/layui.css">
<!-- 全模块化的用法 导入的 Js -->
<script src="./layui/layui.all.js"></script>
<!-- 全模块化的用法 -->
<script>
// 直接使用
layer.alert("大数据男孩")
</script>
</head>
上一篇
LayUI 图标使用
LayUI 图标使用
版权声明：《 LayUI 入门使用 》为明妃原创文章，转载请注明出处！
最后编辑:2020-4-8 12:04:13