前端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企服之家，中国第一个企服评测及商务社交产业平台。