Layui框架-图标组件&按钮组件
- Layui概述
- Layui的获取
- Layui的目录结构
- Layui的引入
Layui概述
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
Layui的获取
直接访问官网就可以下载Layui框架的最新版本
Layui官网
Layui的目录结构
在下载了Layui之后，解压打开之后，可以看到如图：
点击layui文件夹，就可以看见layui框架的全部内容
Layui的引入
1.首先在Hbuilder x（小编用的是这个，大家可以根据自己的爱好来选择）创建一个新的项目：
2.将解压后的layui整个文件夹复制到这个项目中去：
3.新建一个html文件,打开新建 的html文件，然后通过如下两行代码引入layui.css和layui.js
<link rel="stylesheet" href="./layui/css/layui.css"><script src="./layui/layui.js"></script>由于有一些人会在项目下新建一个resources文件夹，然后放入layui相关文件，所以上述路径需要根据自己放的目录进行填写
上述为第一种方式，叫做模块化式引入，之所以这么起名，是因为我们每次想要调用一些模块时都需要通过如下的方法
<!-- 引入js -->
<script src="layui/layui.js"></script>
<script type="text/javascript">
layui.use(["jquery"],function(){
//获取jquery对象
var $ = layui.jquery;
//为按钮添加事件
$("#add").click(function(){
alert($(this).html())
});
$("#delete").click(function(){
alert($(this).html())
});
});
</script>这里引入了jquery模块，layui有很多模块，在layui-v2.5.6\layui-v2.5.6\layui\lay\modules这里我们可以看到，layui有如图所示的一些模块：
这里每一个模块的使用都需要通过上述代码的形式进行引入，希望大家熟记，这也是layui作者推荐大家使用的一种方式。
官网还为我们提供了第二种引入方式（不推荐，因为一个项目很难用到所有模块，所以不需要全部引入），非模块化方式，引入代码如下
<link rel="stylesheet" href="./layui/css/layui.css"><script src="./layui/layui.all.js"></script>
//模块通过layui.all.js全部加载完毕，所以直接使用即可，不需要通过layui.use的方式。
;!function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
}();除了内置的一些模块外，layui还支持模块的拓展，具体的使用方法官网文档也给出了使用方法，各位小伙伴们可以自己去看呀，小编这里暂时用不到就不详细解释啦
以上就是layui的概述和引用方式了，做好了以上工作以后，我们就可以开始学习使用layui的一些页面元素和内置模块了
