打开官网https://www.layui.com/下载这个框架

官网首页 下载到 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">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <title>开始使用layui</title>

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

</head>

<body>

<!-- 你的HTML代码 -->

<script src="../layui/layui.js"></script>

<script>

//一般直接写在一个js文件中

layui.use(['layer', 'form'], function(){

  var layer = layui.layer

  ,form = layui.form;

  layer.msg('Hello World');

});

</script>

</body>

</html>
<!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="../layui/css/layui.css">

</head>

<body>

<!-- 你的HTML代码 -->

<script src="../layui/layui.all.js"></script>

<script>

//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：

;!function(){

  var layer = layui.layer

  ,form = layui.form;

  layer.msg('Hello World');

}();

</script>

</body>

</html>

　　这两个代码主要是导入的js文件不一样。一个是layui.js跟layui.all.js，主要的区别是：

layui.all.js： 采用非模块化方式  非模块化不用每次都调用layui.use([],fun...)引入对应模块，引入的JS是/layui/layui.all.js

layui.js： 自动加载    模块化必须每次都调用layui.use([],fun...)引入对应模块，引入的JS是/layui/layui.js（推荐用这种，但是就是前面写起来麻烦）

layui的基本使用的更多相关文章

  1. layui常用方法

    很好用的一个ui组件,弹出,分页等 http://layer.layui.com/ 1 带叉叉的弹窗 layer.open({ type: , title: false, //不显示标题 conten ...

  2. 开源网站.NETMVC+ Layui+SqlSugar+RestSharp

    SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...

  3. 分页组件 - layui.laypage

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 日期时间组件 - layui.laydate

    全部参数 一.核心方法:laydate(options); options是一个对象,它包含了以下key: '默认值' { elem: '#id', //需显示日期的元素选择器 event: 'cli ...

  5. 关于layui

    之前用layer用了很长时间,感觉很好用,最近看到了layui的发布很想尝试尝试. 加入了挺多的功能,比如编辑器,上传,form表单等等.

  6. 日期控件,layui

    <link rel="stylesheet" href="<%=path%>/layui/css/layui.css" type=" ...

  7. 使用的组件：Layui

    Layui 经典模块化前端框架 由职业前端倾情打造,面向所有层次的前后端程序猿,中国最容易使用的前端UI解决方案 Layui 出蛋于2016年金秋,是一款带着浓烈情怀的国产前端UI框架,她追求极简,又 ...

  8. 【开源项目SugarSite】ASP.NET MVC+ Layui+ SqlSugar+RestSharp项目讲解

    SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...

  9. 前端框架layui

    可以了解下jQuery组件layer layui开始使用Layui兼容除IE6/7以外的全部浏览器,并且绝大多数结构支持响应式 弹出层如果你使用的是Layui,那么你直接在官网下载layui框架即可, ...

  10. Layui - 示例

    示例地址 http://www.layui.com/demo/ 下载地址 http://www.layui.com/ 示例代码 <!doctype html> <html> & ...

随机推荐

  1. 凭借着这份Spring面试题，我拿到了阿里，字节跳动美团的offer！

      一般问题 1.1. 不同版本的 Spring Framework 有哪些主要功能?   1.2. 什么是 Spring Framework? Spring 是一个开源应用框架,旨在降低应用程序开发 ...

  2. Mate 40系列发布 搭载华为运动健康服务带来健康数字生活

    10月30日,HUAWEI Mate 40系列国内发布会如期而至.Mate 40系列除了拥有强悍的性能.全能记录影像和突破性的交互之外,还搭载了全新升级的HMS Core,其中,Health Kit( ...

  3. ABBYY FineReader 15 PDF文档查看功能

    PDF文档查看功能是ABBYY FineReader 15(Windows系统)OCR文字识别软件中PDF编辑器的一项基础功能,可供用户查看,搜索PDF文档,无需进入编辑模式,也可复制其中的文本,图片 ...

  4. Camtasia绿幕素材的视频合成

    随着科技和互联网的快速发展,让越来越多的人喜欢上了视频的各项制作,那么怎么让两个视频进行合成并一起播放呢?操作很简单,下面来讲解具体的操作步骤.小编选用的是Camtasia2019版本的视频编辑软件进 ...

  5. 轻松学编曲，论FL钢琴卷帘

    我们平时做视频时难免要用到音乐,市面上又有很多调音编曲软件,我们该如何选择呢?在这里笔者给大家推荐一款音乐制作软件FL Studio20,也就是业内知名度很高的水果音乐制作软件,这款音乐制作软件笔者用 ...

  6. leetcode 493

    //利用归并排序来完成,归并排序可参考前面代码,归并排序可用来完成这类逆序对之类的问题,采用分治的思想,对于归并排序的代码不需要多改动,只需要在归并之前进行一次寻找操作,找出count的数量 clas ...

  7. NOIP2015 解题报告

    Day1 T3 运输计划 二分之后做一遍树上差分,找出被所有时间超限的运输计划覆盖的花费时间最长的航道,将其改造成虫洞. LCA 用倍增求可能会被卡常,建议用 Tarjan 求.

  8. JQuery案例：购物车加减

    购物车加减 <head> <meta charset="UTF-8"> <title>加减购物车</title> <style ...

  9. 【jvm】MinorGC和FullGC

    新生代GC(Minor GC)指发生在新生代的垃圾收集动作,因为java对象大多都具备朝生夕灭的特性,所以Minor GC非常频繁,一般回收速度也比较快. 老年代GC(MajorGC/Full GC) ...

  10. 【论文解读】【半监督学习】【Google教你水论文】A Simple Semi-Supervised Learning Framework for Object Detection

    题记:最近在做LLL(Life Long Learning),接触到了SSL(Semi-Supervised Learning)正好读到了谷歌今年的论文,也是比较有点开创性的,浅显易懂,对比实验丰富, ...