前端界面框架之layui

layui前端界面框架的简介及引入

---

一、 layui简介

1.1、定义

layui是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

1.2、特色

layui 基本兼容市面上的所有浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。

1.3、官网

https://www.layui.com/

1.4、下载

进入官网后，点击立即下载按钮即可下载，最新的版本为2.5.6。

---

二、layui引入

2.1、简介

我们这里使用的是本地引入，还有其它引入方式，比如CDN静态引入等。

找到下载的压缩包，用压缩软件解压。

2.2、创建项目

笔者这里使用HBuilder X作为演示编辑器，此编辑器是国产的一个编辑器，安装过程可以去百度搜索。下面开始我们的正题。

• 打开HBuilder X编辑器，点击新建项目

• 来到以下界面后，按图示步骤操作，即可成功创建项目。

• 创建完成后的项目结构如下所示。

2.3、引入layui资源

• 找到解压后的layui-v2.5.6文件夹，笔者这里将layui-v2.5.6去除掉了，把layui文件夹作为父文件夹，如下所示。

• 在项目工程文件夹中，新建lib文件夹，用来存放引用的第三方文件。

• 将layui整个文件夹拷贝到lib目录下，如图所示。

注：css文件夹存放样式表文件， font文件夹存放字体文件， images文件夹存放图片文件， lay文件夹存放模块文件， layui.all.js和 layui.js文件是JavaScript脚本文件。后面我们使用layui的元素时将会引入layui.js文件，它是基础核心库文件，而layui.all.js 包含layui.js和所有模块文件 。

• 打开index.html文件，在head标签中用link标签引入layui的样式表文件。

注：rel属性指文件类型， type指文本格式， href指layui.css样式表文件所在的相对路径。如果链接正确，则用Alt+鼠标左键即可跳转到相应文件；反之，则检查路径是否正确。

源代码

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

• 现在我们在html页面中创建我们的第一个按钮hello,在index.html文件中添加如下所示代码。

注：button标签相信大家都熟悉，class属性指定了按钮样式-默认的layui按钮样式。hello是按钮名，我们当前未使用其它的任何样式。

源代码

<button class="layui-btn">hello</button>

• 添加完成后点击编辑器右上角的预览按钮，它会自动打开内置浏览器，如果未安装，会提示安装信息。并且这个内置浏览器支持热刷新。运行界面如下所示。

到现在为止，我们已经成功引入layui样式表文件，可以愉快地添加控件了。后面我们会介绍其它常用控件的使用。