ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端LayUI框架快速上手详解(一) [打印本页]

作者: 八卦阵 时间: 2024-11-4 05:09
标题: 前端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

实现步骤：

引入的资源

依靠加载模块

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
实现步骤：
- 引入的资源
- 依靠加载模块
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)]

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)