LayUI入门

目录

一、LayUI简介

二、LayUI如何入门

三、如何扩展一个layui(自定义模块)    

四、案例：登录界面

---

一、LayUI简介

1、什么是LayUI

LayUI是一套开源的WebUI解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。该框架主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，极大减少了后端人员的开发成本。

官方网站：https://www.layui.com/（已下线）
参考地址：http://layui.org.cn/demo/index.html（已下线，非官网）

2、LayUI和EasyUI与BootSrap对比

  easyui=jquery+html4（用来做后台的管理界面）

easyui 是非开源的，出生早，功能相对完善一些，很多功能都能是比较健全的

  bootstrap=jquery+html5 

和layui一样都属于Ui渲染框架，优势更体现于前端响应式，同时满足PC端和移动端效果，如果前后端分离，交互时选择layui会更合适，比较氪金

  layui 

开源的ui渲染框架，更符合现在的审美，更偏向与后端开发人员使用，在服务端页面上有非常好的效果，适合做后端框架

二、LayUI如何入门

1、下载文件并引用文件

首先在官方网站中将LayUI下载到本地，并将其完整的放入到你的项目中

如图所示，我将LayUI放到了WebContent目录下的静态资源服务器Static中

 2、引入js和css

我们需要将相对路径修改为绝对路径，以防止其报404

3、案例

<!-- 引入 layui.css -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css">
 
<