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.jsTitle -
使用
CDN，在线引用layuiTitle
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）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理；
-
关于栅格布局响应式规则
栅格布局案例：
根据屏幕的宽度自动适配每行显示的元素个数
注意事项，在移动设备中务必需要为html页面头部添加如下定义：
-
列间距
通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，取值范围
layui-col-space1 ~ layui-col-space30,分辨表示每一列之间的间距为具体数值（行间距无关） -
列偏移
对列追加 类似 layui-col-md-offset** 的预设类，从而让列向右偏移。其中 *** 号代表的是偏移占据的列数，可选中为 1 - 12。 如：layui-col-md-offset3*，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度
-
列嵌套
理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md**）中插入一个行元素（layui-row*），即可完成嵌套。
4.3. 常用样式
4.3.1. 图标（字体图标）
iconfont,对于网页中的一些小图片需求，layui中提供了字体图标，即使用文字描述的图片效果；可以通过对文字大小，颜色控制图片的显示效果。
通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可显示出你想要的图标，
4.3.2. 动画
动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。
layui中提供的动画效果非常有限，并且只提供了动画基本实现，如果需要对动画手动控制，则可以使用
css3的原生属性，例如，设置动画的持续时长：animation-duration:10s;
4.3.3. 按钮
向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格
-
用法
一个可跳转的按钮
-
主题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"
示例代码：
-
主题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"
示例代码：
-
大小
尺寸 组合 大型 class="layui-btn layui-btn-lg" 默认 class="layui-btn" 小型 class="layui-btn layui-btn-sm" 迷你 class="layui-btn layui-btn-xs"
示例代码：
-
主题大小组合
尺寸 组合 大型百搭 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即可实现流体按钮，流体按钮会使得按钮占满父容器宽度
-
圆角按钮
主题 组合 原始 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"
-
带图标的按钮
-
按钮组
将按钮包裹在
class="layui-btn-group"的容器中即可实现按钮组
-
按钮容器
尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器,只需将所有按钮包裹在
class="layui-btn-container"即可轻松实现....
4.3.4. 导航与面包屑
导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。
依赖加载模块：
element
4.3.4.1. 导航
-
水平导航
添加class名称：
lay-this来指定激活项 -
导航主题
通过对导航追加CSS背景类，让导航呈现不同的主题色
//如定义一个墨绿背景色的导航
-
…
水平导航支持的其它背景主题有：
layui-bg-cyan*（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）垂直导航支持的其它背景主题有：layui-bg-cyan（藏青） -
垂直导航
水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：
垂直导航需要追加class：
layui-nav-tree侧边导航需要追加class：layui-nav-tree layui-nav-side导航项添加类名称
layui-nav-itemed表示为默认展开项 -
侧边栏导航
-
导航可选属性/类
属性名 可选值 说明 lay-shrink 空值（默认） 不收缩兄弟菜单子菜单all 收缩全部兄弟菜单子菜单 展开子菜单时，是否收缩兄弟节点已展开的子菜单 （注：layui 2.2.6 开始新增） 如： - …
lay-unselect 无需填值 点击指定导航菜单时，不会出现选中效果（注：layui 2.2.0 开始新增） 如： - 刷新
lay-bar disabled 禁用滑块跟随功能 在导航菜单主容器中配置，如： CSS 类 layui-nav-child-c 子菜单居中对齐layui-nav-child-r 子菜单向右对齐 直接在子菜单标签配置即可，如： code- …
4.3.4.2. 面包屑（路径导航）
-
基础样式
-
自定义分隔符
通过在导航元素上设置
lay-separator属性值来设置分隔符
4.3.5. 表格
layUI对于表格的支持提供了两种方案：静态表格和数据表格，这里主要讲解呈现基础表格（静态），后续课程补充讲解数据表格，详见table模块
-
综合案例
英雄能力排行榜 id 姓名 称号 类型 难度系数 105 廉颇 正义爆轰 坦克 5 106 小乔 恋之微风 法师 4 107 赵云 苍天翔龙 战士 5
4.3.6. 表单
用户信息表