前端LayUI框架快速上手详解(一)

• 官网：https://www.layui.com/
• 点击立即下载即可
• 下载完成后解压，我们看以下其目录结构，并将其完整的拷贝到我们自己的项目下。

• 使用时我们只需引入下述两个文件即可使用

• 这是一个基本的入门页面
  开始使用 layui
  2、布局

======================================================================

2.1、布局容器

2.1.1、固定宽度

• 将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。
• 固定宽度的两侧有留白效果

固定宽度（两侧有留白效果）

2.1.2、完整宽度

• 可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid"的容器中，那么宽度将不会固定，而是 100% 适应
• 完整宽度占据屏幕宽度的100%

完整宽度(占据屏幕宽度的100%)

2.2、栅格系统

我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

2.2.1、栅格布局规则

• 采用 class="layui-row" 来定义行，如：

• 采用类似 layui-col-md* 这样的预设类来定义一组列(column)，且放在行(row)中

• 变量 md 代表的是不同屏幕下的标记

• 变量 * 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12

• 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。

• 列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。

• 可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。

• 可以在列（column）元素中放入你自己的任意元素填充内容，完成布局！

示例：

内容5/12

内容7/12

内容4/12

内容4/12

内容6/12

2.2.2、响应式规则

• 简单来说，就是会针对四类不同尺寸的屏幕，进行响应式适配处理。

平板、桌面端的不同表现：

平板≥768px：6/12 | 桌面端≥992px：4/12

平板≥768px：4/12 | 桌面端≥992px：6/12

平板≥768px：12/12 | 桌面端≥992px：8/12

我们将屏幕尺寸切换为小屏幕平板尺寸

2.2.3、列间距

• 设定列之间的间距
• 且一行中最左的列不会出现左边距，最右的列不会出现右边距
• 列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。
• 给容器添加class="layui-col-space*"
• * 支持1px-30px区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔

列边距

4

4

4

注意：

• layui-col-space 设置后不起作用主要是因为设置的是 padding，也就是说向内缩，所以设置背景色 padding 也是会添上颜色，看起来好像没有间距一样。可以在里面加一个 div 来达到目的
• 如果需要的间距高于30px（一般不常见），我们需要采用列偏移

2.2.4、列偏移

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

列偏移

4

向右移动4列

2.2.5、列嵌套

• 列之间可以无限嵌套列

内部列

内部列

内部列

3、按钮

======================================================================

3.1、按钮风格

• 向任意 HTML 元素设定 class="layui-btn" ，建立一个基础按钮。
• 通过追加样式为 class="layui-btn-{type}" 来定义其他按钮风格

| 名称 | 组合 |

| — | — |

| 原始 |

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"

|

一个标准的按钮
一个可跳转的按钮

一个按钮

默认按钮 原始按钮 百搭按钮 暖色按钮 警告按钮 禁用按钮

3.2、按钮尺寸

| 尺寸 | 组合 |

| — | — |

| 大型 |

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-fluid"

|

大型原始按钮 默认按钮 小型警告按钮 迷你按钮 流体按钮（最大化适应）

3.3、圆角按钮

| 主题 | 组合 |

| — | — |

| 原始 |

class="layui-btn layui-btn-radius layui-btn-primary"s

|

| 默认 |

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"

|

默认圆角按钮 原始圆角按钮 百搭圆角按钮 暖色圆角按钮 警告圆角按钮 禁用圆角按钮

3.4、图标按钮

3.4.1、图标

• 对 i 标签 设定 class="layui-icon"
• 然后对元素加上图标对应的 font-class
• 内置图标一览表：https://www.layui.com/doc/element/icon.html

3.4.2、图标按钮

 添加
ဂ 刷新
关注

4、导航

======================================================================

• 导航一般应用于头部和侧边，是整个网页画龙点晴般的存在
• 依赖加载模块：element

实现步骤：

1. 引入的资源

2. 依赖加载模块

4.1、水平导航

• 给一个无序列表 ul 添加 class="layui-nav"

• 给 li 添加 class="layui-nav-ithm" 表示的是导航的子项

• 给 li 添加 class="layui-this" 表示当前被选中的项

• 给 li 里面容器添加 class="layui-nav-child" 表示的是二级菜单

• 最新活动

• 产品

• 大数据

• 解决方案 移动模块 后台模块 电商平台 #### 4.2.1、图片与徽章除了一般的文字导航，我们还内置了图片和徽章的支持，如：

• 控制台9

• 个人中心

• 我4.2、导航主题---通过对导航追加CSS背景类，让导航呈现不同的主题色- 给无序列表 ul 添加 class="layui-nav layui-bg-green" 可设置墨绿色背景的导航- 水平导航支持其他的背景主题有：layui-bg-cyan(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)- 垂直导航支持的其他背景颜色有：layui-bg-cyan (藏青)

• 最新活动

• 产品

• 大数据

• 解决方案 移动模块 后台模块 电商平台 ---

• 最新活动

• 产品

• 大数据

• 解决方案 移动模块 后台模块 电商平台 ---

• 最新活动

• 产品

• 大数据

• 解决方案 移动模块 后台模块 电商平台 4.3、垂直导航---- 给无序列表 ul 添加 class="layui-nav layui-nav-tree"- 给 li 添加 class="layui-nav-item layui-nav-itemed" 表示此子项目是默认展开的

• 跳转

• 移动模块 后台模版 电商平台

• 产品

• 大数据

• 4.4、侧边导航---- 给无序列表 ul 添加 class="layui-nav layui-nav-tree layui-nav-side"- 设定layui-this来指向当前页面分类。- 产品- 大数据4.5、总结---水平、垂直、侧边三个导航的 HTML 结构是完全一样的，不同的是> 水平导航：> > class="layui-nav"> > 垂直导航需要追加：> > class="layui-nav-tree"> > 侧边导航需要追加：> > class="layui-nav-tree layui-nav-side"> 4.6、面包屑导航---- 给 span 标签 添加 layui-breadcrumb首页国际新闻亚太地区正文- 我们还可以通过设置属性 lay-separator="-" 来自定义分隔符首页国际新闻亚太地区正文---首页国际新闻亚太地区正文---娱乐八卦体育搞笑视频游戏综艺5、选项卡=======================================================================- 导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。- 依赖加载模块：element实现步骤：1. 引入的资源1. 依赖加载模块5.1、选项卡风格---- 默认风格给容器添加 ：class="layui-tab"- 简洁风格给容器追加：class="layui-tab-brief"- 卡片风格给容器需要追加：class=layui-tab-card

• 网站设置

• 用户管理

• 权限分配

• 商品管理

• 订单管理

• 内容1 内容2 内容3 内容4 内容5 ---

• 网站设置

• 用户管理

• 权限分配

• 商品管理

• 订单管理

• 内容1 内容2 内容3 内容4 内容5 ---

• 网站设置

• 用户管理

• 权限分配

• 商品管理

• 订单管理

• 内容1 内容2 内容3 内容4 内容5 > 默认风格：> > class="layui-tab"> > 简洁风格需要追加：> > class="layui-tab-brief"> > 卡片风格需要追加：> > class="layui-tab-card"> 6、表格======================================================================6.1、常规用法---###### 数据结构与算法这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。- 二叉树层序遍历- B 树的特性，B 树和 B+树的区别- 尾递归- 如何写一个大数阶乘？递归的方法会出现什么问题？- 把多维数组变成一维数组的方法- 知道的排序算法 说一下冒泡快排的原理- Heap 排序方法的原理？复杂度？- 几种常见的排序算法，手写- 数组的去重，尽可能写出多个方法- 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数- 知道数据结构里面的常见的数据结构- 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2- 合并两个有序数组- 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）item layui-show">内容1 内容2 内容3 内容4 内容5 > 默认风格：> > class="layui-tab"> > 简洁风格需要追加：> > class="layui-tab-brief"> > 卡片风格需要追加：> > class="layui-tab-card"> 6、表格======================================================================6.1、常规用法---###### 数据结构与算法这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。- 二叉树层序遍历- B 树的特性，B 树和 B+树的区别- 尾递归- 如何写一个大数阶乘？递归的方法会出现什么问题？- 把多维数组变成一维数组的方法- 知道的排序算法 说一下冒泡快排的原理- Heap 排序方法的原理？复杂度？- 几种常见的排序算法，手写- 数组的去重，尽可能写出多个方法- 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数- 知道数据结构里面的常见的数据结构- 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2- 合并两个有序数组- 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）[外链图片转存中…(img-3IcWhjKs-1719242579191)]