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

---

• 官网：https://www.layui.com/

• 点击立即下载即可

• 下载完成后解压，我们看以下其目录结构，并将其完整的拷贝到我们自己的项目下。

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

• 这是一个基本的入门页面

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" 表示此子项目是默认展开的

• 默认展开

  选项1
  选项2
  跳转

• 解决方案

  移动模块
  后台模版
  电商平台
• 产品
• 大数据

• 

  4.4、侧边导航

  ---

  • 给无序列表 ul 添加 class="layui-nav layui-nav-tree layui-nav-side"

  • 设定layui-this来指向当前页面分类。

  • 默认展开

    选项1

    选项2

    跳转

  • 解决方案

    移动模块

    后台模版

    电商平台

  • 产品
  • 大数据

  

  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. 引入的资源
  2. 依赖加载模块

  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)]