前端LayUI框架快速上手详解(一)
[*] 官网：https://www.layui.com/
[*] 点击立刻下载即可
[*] 下载完成后解压，我们看以下其目次结构，并将其完整的拷贝到我们自己的项目下。
https://i-blog.csdnimg.cn/blog_migrate/9a7d75645a7374ab356279184400631b.png#pic_center
[*]利用时我们只需引入下述两个文件即可利用
[*]这是一个基本的入门页面
开始利用 layui 2、结构
======================================================================
2.1、结构容器
2.1.1、固定宽度
[*] 将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的装备中固定宽度，让列可控。
[*] 固定宽度的两侧有留白效果
固定宽度（两侧有留白效果）
2.1.2、完整宽度
[*] 可以不固定容器宽度。将栅格或别的元素放入一个带有 class="layui-fluid"的容器中，那么宽度将不会固定，而是 100% 适应
[*] 完整宽度占据屏幕宽度的100%
完整宽度(占据屏幕宽度的100%)
https://i-blog.csdnimg.cn/blog_migrate/2840ca25430875b6a53c52506d57b4e8.png#pic_center
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
https://i-blog.csdnimg.cn/blog_migrate/81a3d28366f9643d41a23485f41456dd.png#pic_center
2.2.2、响应式规则
[*]简单来说，就是会针对四类不同尺寸的屏幕，进行响应式适配处理处罚。
平板、桌面端的不同表现：
平板≥768px：6/12 | 桌面端≥992px：4/12
平板≥768px：4/12 | 桌面端≥992px：6/12
平板≥768px：12/12 | 桌面端≥992px：8/12
https://i-blog.csdnimg.cn/blog_migrate/b368388defc6d74dab03a1da3da216df.png#pic_center
我们将屏幕尺寸切换为小屏幕平板尺寸
https://i-blog.csdnimg.cn/blog_migrate/f2bc501419f1874b438f0ccda74d4723.png#pic_center
2.2.3、列间距
[*] 设定列之间的间距
[*] 且一行中最左的列不会出现左边距，最右的列不会出现右边距
[*] 列间距在包管排版美观的同时，还可以进一步包管分列的宽度精细水平。
[*] 给容器添加class="layui-col-space*"
[*] * 支持1px-30px区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔
列边距
4 4 4https://i-blog.csdnimg.cn/blog_migrate/2e67ce62e6edddc6769a3f10a28a6f2b.png#pic_center
留意：
[*] 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、列嵌套
[*]列之间可以无穷嵌套列
内部列
内部列
内部列
https://i-blog.csdnimg.cn/blog_migrate/2977a3aca5f644eb9a1db40f5daa1106.png#pic_center
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" |
一个标准的按钮一个可跳转的按钮 一个按钮 默认按钮 原始按钮 百搭按钮 暖色按钮 告诫按钮 禁用按钮https://i-blog.csdnimg.cn/blog_migrate/0d9c46fc303ba723486603e07d3c021e.png#pic_center
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" |
大型原始按钮 默认按钮 小型告诫按钮 迷你按钮 流体按钮（最大化适应）https://i-blog.csdnimg.cn/blog_migrate/67ecff4c5fafafb4e57bf5d3fbd7633c.png#pic_center
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" |
默认圆角按钮 原始圆角按钮 百搭圆角按钮 暖色圆角按钮 告诫圆角按钮 禁用圆角按钮https://i-blog.csdnimg.cn/blog_migrate/52b4096fb7cc0b551fe959aea8f7685a.png#pic_center
3.4、图标按钮
3.4.1、图标
[*] 对 i 标签 设定 class="layui-icon"
[*] 然后对元素加上图标对应的 font-class
[*] 内置图标一览表：https://www.layui.com/doc/element/icon.html
3.4.2、图标按钮
添加ဂ 刷新 关注https://i-blog.csdnimg.cn/blog_migrate/4d6b57f61ec4a90477d5676b80e54304.png#pic_center
4、导航
======================================================================
[*] 导航一般应用于头部和侧边，是整个网页画龙点晴般的存在
[*] 依靠加载模块：element
实现步骤：
[*]引入的资源
[*]依靠加载模块
4.1、水平导航
[*] 给一个无序列表 ul 添加 class="layui-nav"
[*] 给 li 添加 class="layui-nav-ithm" 表示的是导航的子项
[*] 给 li 添加 class="layui-this" 表示当前被选中的项
[*] 给 li 里面貌面貌器添加 class="layui-nav-child" 表示的是二级菜单
[*]最新运动
[*]产品
[*]大数据
[*]
[*]办理方案
移动模块 后台模块 电商平台https://i-blog.csdnimg.cn/blog_migrate/0e48880d305e91c1289f2cf881b91e07.png#pic_center
4.2.1、图片与徽章
除了一般的文字导航，我们还内置了图片和徽章的支持，如：
[*]
[*]控制台9
[*]
[*]个人中心
[*]
[*]https://i-blog.csdnimg.cn/blog_migrate/1389d019029eaa073dff2d2a8295c136.png我
修改信息 安全管理 退出https://i-blog.csdnimg.cn/blog_migrate/c6438913f7bda454d9d9a5364aa6851b.png#pic_center
4.2、导航主题
通过对导航追加CSS背景类，让导航呈现不同的主题色
[*] 给无序列表 ul 添加 class="layui-nav layui-bg-green" 可设置墨绿色背景的导航
[*] 水平导航支持其他的背景主题有：layui-bg-cyan(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)
[*] 垂直导航支持的其他背景颜色有：layui-bg-cyan (藏青)
[*]最新运动
[*]产品
[*]大数据
[*]
[*]办理方案
移动模块 后台模块 电商平台
[*]最新运动
[*]产品
[*]大数据
[*]
[*]办理方案
移动模块 后台模块 电商平台
[*]最新运动
[*]产品
[*]大数据
[*]
[*]办理方案
移动模块 后台模块 电商平台https://i-blog.csdnimg.cn/blog_migrate/331798fdde215c342f93bef748c77447.png#pic_center
4.3、垂直导航
[*] 给无序列表 ul 添加 class="layui-nav layui-nav-tree"
[*] 给 li 添加 class="layui-nav-item layui-nav-itemed" 表示此子项目是默认睁开的
[*]
[*]默认睁开
选项1 选项2 跳转
[*]
[*]办理方案
移动模块 后台模版 电商平台
[*]产品
[*]大数据
[*]https://i-blog.csdnimg.cn/blog_migrate/37ea307cb179a754b713525757968df0.png#pic_center
4.4、侧边导航
[*] 给无序列表 ul 添加 class="layui-nav layui-nav-tree layui-nav-side"
[*] 设定layui-this来指向当前页面分类。
[*] 默认睁开 选项1 选项2 跳转
[*] 办理方案 移动模块 后台模版 电商平台
[*]产品
[*]大数据
https://i-blog.csdnimg.cn/blog_migrate/88f82bf9cd300ffe1c8b03638efcf286.png#pic_center
4.5、总结
水平、垂直、侧边三个导航的 HTML 结构是完全一样的，不同的是
水平导航：class="layui-nav"
垂直导航需要追加：class="layui-nav-tree"
侧边导航需要追加：class="layui-nav-tree layui-nav-side"
4.6、面包屑导航
[*]给 span 标签 添加 layui-breadcrumb
首页
国际新闻
亚太地区
正文
[*]我们还可以通过设置属性 lay-separator="-" 来自界说分隔符
首页
国际新闻
亚太地区
正文
首页
国际新闻
亚太地区
正文
娱乐
八卦
体育
搞笑
视频
游戏
综艺
https://i-blog.csdnimg.cn/blog_migrate/6a27bc2131bd0faafabd6ea070051aed.png#pic_center
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 内容5https://i-blog.csdnimg.cn/blog_migrate/9ea1a983503d43dc500cc1f7d3fdbdaa.png#pic_center
默认风格：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
[*]合并两个有序数组
[*]给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）
https://i-blog.csdnimg.cn/blog_migrate/f4132d6f23b5a59ad334ceecf1d7d2d7.png
item layui-show">内容1
内容2 内容3 内容4 内容5https://i-blog.csdnimg.cn/blog_migrate/9ea1a983503d43dc500cc1f7d3fdbdaa.png#pic_center
默认风格：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企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]