前端框架LayUI学习笔记.docxVIP

前端框架LayUI

学习笔记

LayUI

1.主要内容

2.LayUI的安装及使?

2.1.LayUI的介绍

layui（谐?：类UI)是?款采??身模块规范编写的前端UI框架，遵循原?HTML/CSS/JS的书写与组织形式，?槛极低，拿来即?。

由国?开发，16年出?的框架，其主要提供了很多好看、?便的样式，并且基本拿来即?，和Bootstrap有些相似，但该框架有个极?的好处就是定义了很多前后端交互的样式接?，如分?表格，只需在前端配置好接?，后端则按照定义好的接?规则返回数据，即可完成??的展示，极?减少了后端?员的开发成本。

官?\h：

官??档\h：/doc/

2.2.LayUI的特点

（1）layui属于轻量级框架，简单美观。适?于开发后端模式，它在服务端??上有?常好的效果。

（2）layui是提供给后端开发?员的ui框架，基于DOM驱动。

2.3.下载与使?

1.在\h官???下载到layui的最新版。?录结构如下：

├─css//css?录

││─modules//模块css?录（?般如果模块相对较?，我们会单独提取，?如下?三个：）││├─laydate

││├─layer││└─layim

│└─layui.css//核?样式?件├─font//字体图标?录

├─images//图?资源?录（?前只有layim和编辑器?到的GIF表情）│─lay//模块核??录

│└─modules//各模块组件│─layui.js//基础核?库

└─layui.all.js//包含layui.js和所有模块的合并?件

2.获得layui后，将其完整地部署（拷?到项?中）到你的项??录，你只需要引?下述两个?件：

./layui/css/layui.css

./layui/layui.js//提示：如果是采??模块化?式，此处可换成：./layui/layui.all.js

3.基本的????

!DOCTYPEhtml

html

head

metacharset=utf-8

metaname=viewportcontent=width=device-width,initial-scale=1,maximum-

scale=1title开始使?layui/title

linkrel=stylesheethref=layui/css/layui.css

/head

body

!--你的HTML代码--

scriptsrc=layui/layui.js/script

script

//模块和回调函数

//?般直接写在?个js?件中

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

varlayer=layui.layer

,form=layui.form;

layer.msg(HelloWorld);

});

/script

/body

/html

4.还需要声明需要使?的模块和回调函数。参照官??档，选择??想要的效果就?。

?如：

script

//注意：导航依赖element模块，否则?法进?功能性操作layui.use(element,function(){

varelement=layui.element;

//…

});

/script

3.??元素

3.1.布局

3.1.1.布局容器

.固定宽度

将栅格放??个带有class=layui-container的特定的容器中，以便在?屏幕以上的设备中固定宽度，让列可控。

divclass=layui-container

divclass=layui-row

……

/div

/div

.完整宽度

可以不固定容器宽度。将栅格或其它元素放??个带有class=layui-?uid的容器中，那么宽度将不会固定，?是100%适应

divclass=layui-fluid

……

/div

3.1.2.栅格系统

为了丰富??布局，简化HTML/CSS代码的耦合，并提升多终端的适配能?，layui引进了?套具备响应式能?的栅格系统。将容器进?了12等分，预设了4*12种CSS排列类，它们在移动设备、平板、桌?中/?尺?四种不同的屏幕下发挥着各?的作?。

.栅格布局规则

1.采?layui-row来定义?，如：

divclass=layui-row/div

2.采?类似layui-col-md*这样的