layui基础总结及学习规划

1. UI框架概述

在之前所有的网页结构和样式都需要手动编写，特别是如果需要制作漂亮的页面效果，需要大量的样式代码(CSS)，为了保持网站页面风格的统一，这些样式会需要反复使用；由于这种需求的存在，目前一个个人组织或者企业单位开发出了一些界面的UI解决方案，能够使得我们在编写页面时，将这些已经处理好的css样式用到项目中（拿来即用）；目前的主流UI解决方案有以下：

PC端
- bootstrap
- elementUI
- layui
- UIKit
- ant design
移动端
- vant
- flutter

UI框架和JS框架，后端框架区别？

UI框架：用于快速构建漂亮美观的网页（CSS框架）

JS框架：用于进行前端后端交互，数据绑定，数据驱动dom等（vue,react,anglar...）

后台框架：基于服务端语言构建的组件技术（项目的半成品）

2. LayUI概述

项目地址:Layui - 经典开源模块化前端 UI 组件库

layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM (AngulrJS，VueJS，ReactJS)底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

3. LayUI引入

3.1. 引入方式

目录结构(v2.6.8)：

├─css //css目录│  │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）│  │  ├─laydate│  │  └─layer│  └─layui.css //核心样式文件├─font  //字体图标目录└─layui.js //核心库

从v2.6.8版本开始，layui将原来的lay/modules各个模块全部合并到layui.js中

layui包含以下常用方式：

直接将下载的压缩文件解压缩到目标项目中，在项目中引入layui.css和layui.js

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--    引入layui样式文件(本地项目中资源)--><link rel="stylesheet" href="./asserts/layui-v2.6.8/layui/css/layui.css"></head><body>
<!--引入layui.js(本地项目中资源)--><script src="./asserts/layui-v2.6.8/layui/layui.js"></script></body>
</html>

使用CDN，在线引用layui

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- 引入 layui.css --><link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"></head><body>
<!-- 引入 layui.js --><script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script></body>
</html>

4. 页面元素

4.1. 基本样式(公共class)

布局/容器

类名（class）	说明
layui-main	用于设置一个宽度为 1140px 的水平居中块（无响应式）
layui-inline	用于将标签设为内联块状元素
layui-box	用于排除一些UI框架（如Bootstrap）强制将全部元素设为box-sizing: border-box所引发的尺寸偏差
layui-clear	用于消除浮动（一般不怎么常用，因为layui几乎没用到浮动）
layui-btn-container	用于定义按钮的父容器。（layui 2.2.5 新增）
layui-btn-fluid	用于定义流体按钮。即宽度最大化适应。（layui 2.2.5 新增）

辅助

类名（class）	说明
layui-icon	用于图标
layui-elip	用于单行文本溢出省略
layui-unselect	用于屏蔽选中
layui-disabled	用于设置元素不可点击状态
layui-circle	用于设置元素为圆形
layui-show	用于显示块状元素
layui-hide	用于隐藏元素

文本

类名（class）	说明
layui-text	定义一段文本区域（如文章），该区域内的特殊标签（如a、li、em等）将会进行相应处理
layui-word-aux	灰色标注性文字，左右会有间隔

背景色

类名（class）	说明
layui-bg-red	用于设置元素赤色背景
layui-bg-orange	用于设置元素橙色背景
layui-bg-green	用于设置元素墨绿色背景（主色调）
layui-bg-cyan	用于设置元素藏青色背景
layui-bg-blue	用于设置元素蓝色背景
layui-bg-black	用于设置元素经典黑色背景
layui-bg-gray	用于设置元素经典灰色背景

layui-font-12 （12px 的字体）
layui-font-14 （14px 的字体）
layui-font-16 （16px 的字体）
layui-font-18 （18px 的字体）
layui-font-20 （20px 的字体）

字体颜色

layui-font-red （红色字体）
layui-font-orange （橙色字体）
layui-font-green （绿色字体）
layui-font-cyan （青色字体）
layui-font-blue （蓝色字体）
layui-font-black （黑色字体）
layui-font-gray （灰色字体）

4.2. 布局

4.2.1. 布局容器

在使用栅格之前一般都需要对页面的容器范围划定，使用layui-container和layui-fluid两个类划分栅格范围

layui-container:设置一个居中显示的布局容器，左右会根据屏幕设备留白，内部内容根据栅格配置自动布局
layui-fluid:设置占满屏幕100%宽的容器，内部的元素根据栅格设置自动布局

4.2.2. 栅格系统

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

栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理；

关于栅格布局响应式规则

栅格布局案例：

<!--创建容器：容器中的内容一共划分为12等分-->
<div class="layui-container"><div class="layui-row   layui-col-space30"><div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div><div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div><div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div><div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div><div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div><div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div><div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div><div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div><div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div><div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div></div>

</div>

根据屏幕的宽度自动适配每行显示的元素个数

注意事项，在移动设备中务必需要为html页面头部添加如下定义：
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

列间距

通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，取值范围layui-col-space1 ~ layui-col-space30,分辨表示每一列之间的间距为具体数值（行间距无关）

列偏移

对列追加类似 layui-col-md-offset** 的预设类，从而让列向右偏移。其中 *** 号代表的是偏移占据的列数，可选中为 1 - 12。如：layui-col-md-offset3*，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度

<div class="layui-container"><div class="item layui-col-md4"></div><div class="item layui-col-md4"></div><div class="item layui-col-md4"></div><div class="item layui-col-md4 layui-col-md-offset2"></div><div class="item layui-col-md4"></div><div class="item layui-col-md4 layui-col-md-offset4"></div>
</div>

列嵌套

理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md**）中插入一个行元素（layui-row*），即可完成嵌套。

<div class="layui-container"><div class="layui-row  layui-col-space30"><div class="left layui-col-md6"><img src="./img/05.jpg" alt=""></div><div class="right layui-col-md6"><div class="layui-row  layui-col-space30"><div class="layui-col-md6"><img src="./img/05.jpg" alt=""></div><div class="layui-col-md6"><img src="./img/05.jpg" alt=""></div></div><div class="layui-row  layui-col-space30"><div class="layui-col-md6"><img src="./img/05.jpg" alt=""></div><div class="layui-col-md6"><img src="./img/05.jpg" alt=""></div></div></div></div>
</div>

4.3. 常用样式

4.3.1. 图标（字体图标）

iconfont,对于网页中的一些小图片需求，layui中提供了字体图标，即使用文字描述的图片效果；可以通过对文字大小，颜色控制图片的显示效果。

通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可显示出你想要的图标，

<span class="layui-icon layui-icon-404"></span>
<i class="layui-icon layui-icon-login-wechat"></i>
<b class="layui-icon layui-icon-face-smile"></b>
<button class="layui-btn layui-btn-normal"><span class="layui-icon layui-icon-delete"></span>删除
</button>

4.3.2. 动画

动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。

<div class="layui-anim layui-anim-rotate layui-anim-loop" style="display: inline-block"><span class="layui-icon layui-icon-face-cry" style="font-size: 200px"></span>
</div>

<div class="bg layui-anim layui-anim-rotate layui-anim-loop"><img src="./img/disc.png" width="100%" alt="">
</div>

layui中提供的动画效果非常有限，并且只提供了动画基本实现，如果需要对动画手动控制，则可以使用css3的原生属性，例如，设置动画的持续时长：
animation-duration:10s;

4.3.3. 按钮

向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格

用法

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>

主题1（实心按钮）

名称	组合
原始	class="layui-btn layui-btn-primary"
默认	class="layui-btn"
百搭	class="layui-btn layui-btn-normal"
暖色	class="layui-btn layui-btn-warm"
警告	class="layui-btn layui-btn-danger"
禁用	class="layui-btn layui-btn-disabled"

示例代码：

<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-primary">原始按钮</button>
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">警告按钮</button>
<button class="layui-btn layui-btn-danger">危险按钮</button>
<button class="layui-btn layui-btn-disabled">禁用按钮</button>

主题2（空心按钮）

名称	组合
主色	class="layui-btn layui-btn-primary layui-border-green"
百搭	class="layui-btn layui-btn-primary layui-border-blue"
暖色	class="layui-btn layui-btn-primary layui-border-orange"
警告	class="layui-btn layui-btn-primary layui-border-red"
深色	class="layui-btn layui-btn-primary layui-border-black"

示例代码：

<button class="layui-btn layui-btn-primary layui-border-green">绿色按钮</button>
<button class="layui-btn layui-btn-primary layui-border-blue">蓝色按钮</button>
<button class="layui-btn layui-btn-primary layui-border-orange">橙色按钮</button>
<button class="layui-btn layui-btn-primary layui-border-red">红色按钮</button>
<button class="layui-btn layui-btn-primary layui-border-cyan">蓝绿按钮</button>
<button class="layui-btn layui-btn-primary layui-border-black">黑色按钮</button>

大小

尺寸	组合
大型	class="layui-btn layui-btn-lg"
默认	class="layui-btn"
小型	class="layui-btn layui-btn-sm"
迷你	class="layui-btn layui-btn-xs"

示例代码：

<button class="layui-btn layui-btn-primary layui-border-green layui-btn-lg">绿色按钮</button>
<button class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm">蓝色按钮</button>
<button class="layui-btn layui-btn-primary layui-border-orange layui-btn-xs">橙色按钮</button>

主题大小组合

尺寸	组合
大型百搭	class="layui-btn layui-btn-lg layui-btn-normal"
正常暖色	class="layui-btn layui-btn-warm"
小型警告	class="layui-btn layui-btn-sm layui-btn-danger"
迷你禁用	class="layui-btn layui-btn-xs layui-btn-disabled"

流体按钮

只需为按钮添加类名称layui-btn-fluid即可实现流体按钮，流体按钮会使得按钮占满父容器宽度
```
<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>
```

圆角按钮

主题	组合
原始	class="layui-btn layui-btn-radius layui-btn-primary"
默认	class="layui-btn layui-btn-radius"
百搭	class="layui-btn layui-btn-radius layui-btn-normal"
暖色	class="layui-btn layui-btn-radius layui-btn-warm"
警告	class="layui-btn layui-btn-radius layui-btn-danger"
禁用	class="layui-btn layui-btn-radius layui-btn-disabled"

带图标的按钮

<button class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-add-circle"></i>
</button>
<button class="layui-btn layui-btn-warm"><i class="layui-icon layui-icon-upload"></i>
</button>
<button class="layui-btn layui-btn-danger"><i class="layui-icon layui-icon-user"></i>
</button>
<button class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-password"></i>
</button>

按钮组

将按钮包裹在class="layui-btn-group"的容器中即可实现按钮组

<div class="layui-btn-group"><button class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-add-circle"></i>添加</button><button class="layui-btn layui-btn-warm"><i class="layui-icon layui-icon-upload"></i>上传</button><button class="layui-btn layui-btn-danger"><i class="layui-icon layui-icon-user"></i>用户信息</button>
</div>

按钮容器

尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器,只需将所有按钮包裹在class="layui-btn-container"即可轻松实现
```
<div class="layui-btn-container"><button class="layui-btn layui-btn-normal">按钮1</button><button class="layui-btn layui-btn-normal">按钮2</button>....
</div>
```

4.3.4. 导航与面包屑

导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。

依赖加载模块：element

4.3.4.1. 导航

水平导航

<ul class="layui-nav" lay-filter=""><li class="layui-nav-item"><a href="">最新活动</a></li><li class="layui-nav-item layui-this"><a href="">产品</a></li><li class="layui-nav-item"><a href="">大数据</a></li><li class="layui-nav-item"><a href="javascript:;">解决方案</a><dl class="layui-nav-child"> <!-- 二级菜单 --><dd><a href="">移动模块</a></dd><dd><a href="">后台模版</a></dd><dd><a href="">电商平台</a></dd></dl></li><li class="layui-nav-item"><a href="">社区</a></li>
</ul>

<script>//注意：导航 依赖 element 模块，否则无法进行功能性操作layui.use('element', function(){var element = layui.element;
//…});
</script>

添加class名称：lay-this来指定激活项

导航主题

通过对导航追加CSS背景类，让导航呈现不同的主题色
```
//如定义一个墨绿背景色的导航
<ul class="layui-nav layui-bg-green" lay-filter="">…
</ul>   
```
水平导航支持的其它背景主题有：layui-bg-cyan*（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝） 垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

垂直导航

<ul class="layui-nav layui-nav-tree" lay-filter="test"><!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --><li class="layui-nav-item layui-nav-itemed"><a href="javascript:;">默认展开</a><dl class="layui-nav-child"><dd><a href="javascript:;">选项1</a></dd><dd><a href="javascript:;">选项2</a></dd><dd><a href="">跳转</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">解决方案</a><dl class="layui-nav-child"><dd><a href="">移动模块</a></dd><dd><a href="">后台模版</a></dd><dd><a href="">电商平台</a></dd></dl></li><li class="layui-nav-item"><a href="">产品</a></li><li class="layui-nav-item"><a href="">大数据</a></li>
</ul>

水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：

垂直导航需要追加class：layui-nav-tree 侧边导航需要追加class：layui-nav-tree layui-nav-side

导航项添加类名称layui-nav-itemed表示为默认展开项

侧边栏导航

导航可选属性/类

属性名	可选值	说明
lay-shrink	空值（默认）不收缩兄弟菜单子菜单all 收缩全部兄弟菜单子菜单	展开子菜单时，是否收缩兄弟节点已展开的子菜单（注：layui 2.2.6 开始新增）如：`<ul class="layui-nav layui-nav-tree" lay-shrink="all"> … </ul>`
lay-unselect	无需填值	点击指定导航菜单时，不会出现选中效果（注：layui 2.2.0 开始新增）如：`<li class="layui-nav-item" lay-unselect>刷新</li>`
lay-bar	disabled 禁用滑块跟随功能	在导航菜单主容器中配置，如：`<div class="layui-nav" lay-bar="disabled"> </div>`
CSS 类	layui-nav-child-c 子菜单居中对齐layui-nav-child-r 子菜单向右对齐	直接在子菜单标签配置即可，如：`</>code<dl class="layui-nav-child layui-nav-child-c"> …</dl>`

4.3.4.2. 面包屑（路径导航）

基础样式

<span class="layui-breadcrumb" ><a href="">首页</a><a href="">信息管理学院</a><a href="">软件工程专业</a><a href=""><cite> <i class="layui-icon layui-icon-user"></i> 2021班</cite></a>
</span>

自定义分隔符

<span class="layui-breadcrumb" lay-separator=">"><a href="">首页</a><a href="">信息管理学院</a><a href="">软件工程专业</a><a href=""><cite> <i class="layui-icon layui-icon-user"></i> 2021班</cite></a>
</span>

通过在导航元素上设置lay-separator属性值来设置分隔符

<span class="layui-breadcrumb" lay-separator="|"><a href="">娱乐</a><a href="">八卦</a><a href="">体育</a><a href="">搞笑</a><a href="">视频</a><a href="">游戏</a><a href="">综艺</a>
</span>

4.3.5. 表格

layUI对于表格的支持提供了两种方案：静态表格和数据表格，这里主要讲解呈现基础表格（静态），后续课程补充讲解数据表格，详见table模块

综合案例

<!--layui-table:使用layui的表格样式lay-skin:设置表格边框风格（row，line,nob）lay-size:设置表格单元格大小样式（lg,sm）lay-even:开启隔行换色
-->
<table class="layui-table" lay-skin="nob" lay-size="lg" lay-even><caption>英雄能力排行榜</caption><colgroup><col width="80px"><col width="120px"><col width="120px"><col width="120px"><col></colgroup><thead><tr><th>id</th><th>姓名</th><th>称号</th><th>类型</th><th>难度系数</th></tr></thead><tbody><tr><td>105</td><td>廉颇</td><td>正义爆轰</td><td>坦克</td><td>5</td></tr><tr><td>106</td><td>小乔</td><td>恋之微风</td><td>法师</td><td>4</td></tr><tr><td>107</td><td>赵云</td><td>苍天翔龙</td><td>战士</td><td>5</td></tr></tbody>
</table>

4.3.6. 表单

<div class="layui-container"><h1>用户信息表</h1><hr><div class="layui-col-md8"><form action="" class="layui-form"><div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-block"><input type="text" class="layui-input" placeholder="请输入用户名"></div></div><div class="layui-form-item"><label class="layui-form-label">密码</label><div class="layui-input-block"><input type="password" class="layui-input" placeholder="请输入密码"></div></div><div class="layui-form-item"><label class="layui-form-label">驾龄</label><div class="layui-input-inline"><input type="number" class="layui-input" placeholder="请输入驾龄"></div><div class="layui-form-mid layui-word-aux">驾龄未满10年无法注册</div></div><div class="layui-form-item"><label class="layui-form-label">性别</label><div class="layui-input-block"><input type="radio" name="sex" value="男" title="男" checked><input type="radio" name="sex" value="女" title="女"></div></div><div class="layui-form-item"><label class="layui-form-label">擅长的语言</label><div class="layui-input-block"><input type="checkbox" name="lang[cn]" title="中文" checked><input type="checkbox" name="lang[en]" title="英语"><input type="checkbox" name="lang[kr]" title="韩语"><input type="checkbox" name="lang[jp]" title="日语"><input type="checkbox" name="lang[alb]" title="阿拉伯语"></div></div><div class="layui-form-item"><label class="layui-form-label">同意协议</label><div class="layui-input-block"><input type="checkbox" name="lis" lay-skin="switch"></div></div></form></div>
</div>