layui基础总结及学习规划

1. UI框架概述

在之前所有的网页结构和样式都需要手动编写，特别是如果需要制作漂亮的页面效果，需要大量的样式代码(CSS)，为了保持网站页面风格的统一，这些样式会需要反复使用；由于这种需求的存在，目前一个个人组织或者企业单位开发出了一些界面的UI解决方案，能够使得我们在编写页面时，将这些已经处理好的css样式用到项目中（拿来即用）；目前的主流UI解决方案有以下：

• PC端

  • bootstrap

  • elementUI

  • layui

  • UIKit

  • ant design

• 移动端

  • vant

  • flutter

UI框架和JS框架，后端框架区别？

UI框架：用于快速构建漂亮美观的网页（CSS框架）

JS框架：用于进行前端后端交互，数据绑定，数据驱动dom等（vue,react,anglar...）

后台框架：基于服务端语言构建的组件技术（项目的半成品）

2. LayUI概述

• 项目地址:Layui - 经典开源模块化前端 UI 组件库

layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM (AngulrJS，VueJS，ReactJS)底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

3. LayUI引入

3.1. 引入方式

目录结构(v2.6.8)：

├─css //css目录
  │  │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）
  │  │  ├─laydate
  │  │  └─layer
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  └─layui.js //核心库

从v2.6.8版本开始，layui将原来的lay/modules各个模块全部合并到layui.js中

layui包含以下常用方式：

1. 直接将下载的压缩文件解压缩到目标项目中，在项目中引入layui.css和layui.js

   
   
       
           
           
           
           
       
       
   ​
           
           
       
   

2. 使用CDN，在线引用layui

   
   
       
           
           
          
           
       
       
   ​
           
           
       
   

4. 页面元素

4.1. 基本样式(公共class)

• 布局/容器

类名（class）	说明
layui-main	用于设置一个宽度为 1140px 的水平居中块（无响应式）
layui-inline	用于将标签设为内联块状元素
layui-box	用于排除一些UI框架（如Bootstrap）强制将全部元素设为box-sizing: border-box所引发的尺寸偏差
layui-clear	用于消除浮动（一般不怎么常用，因为layui几乎没用到浮动）
layui-btn-container	用于定义按钮的父容器。（layui 2.2.5 新增）
layui-btn-fluid	用于定义流体按钮。即宽度最大化适应。（layui 2.2.5 新增）

• 辅助

类名（class）	说明
layui-icon	用于图标
layui-elip	用于单行文本溢出省略
layui-unselect	用于屏蔽选中
layui-disabled	用于设置元素不可点击状态
layui-circle	用于设置元素为圆形
layui-show	用于显示块状元素
layui-hide	用于隐藏元素

• 文本

类名（class）	说明
layui-text	定义一段文本区域（如文章），该区域内的特殊标签（如a、li、em等）将会进行相应处理
layui-word-aux	灰色标注性文字，左右会有间隔

• 背景色

类名（class）	说明
layui-bg-red	用于设置元素赤色背景
layui-bg-orange	用于设置元素橙色背景
layui-bg-green	用于设置元素墨绿色背景（主色调）
layui-bg-cyan	用于设置元素藏青色背景
layui-bg-blue	用于设置元素蓝色背景
layui-bg-black	用于设置元素经典黑色背景
layui-bg-gray	用于设置元素经典灰色背景

• 字体大小

layui-font-12 （12px 的字体）
layui-font-14 （14px 的字体）
layui-font-16 （16px 的字体）
layui-font-18 （18px 的字体）
layui-font-20 （20px 的字体）

• 字体颜色

layui-font-red （红色字体）
layui-font-orange （橙色字体）
layui-font-green （绿色字体）
layui-font-cyan （青色字体）
layui-font-blue （蓝色字体）
layui-font-black （黑色字体）
layui-font-gray （灰色字体）

4.2. 布局

4.2.1. 布局容器

在使用栅格之前一般都需要对页面的容器范围划定，使用layui-container和layui-fluid两个类划分栅格范围

• layui-container:设置一个居中显示的布局容器，左右会根据屏幕设备留白，内部内容根据栅格配置自动布局

• layui-fluid:设置占满屏幕100%宽的容器，内部的元素根据栅格设置自动布局

4.2.2. 栅格系统

为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理；

• 关于栅格布局响应式规则

栅格布局案例：

    

        

        

        

        

        

        

        

        

        

        

    
​

根据屏幕的宽度自动适配每行显示的元素个数

注意事项，在移动设备中务必需要为html页面头部添加如下定义：

• 列间距

  通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，取值范围layui-col-space1 ~ layui-col-space30,分辨表示每一列之间的间距为具体数值（行间距无关）

• 列偏移

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

• 列嵌套

  理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md**）中插入一个行元素（layui-row*），即可完成嵌套。

4.3. 常用样式

4.3.1. 图标（字体图标）

iconfont,对于网页中的一些小图片需求，layui中提供了字体图标，即使用文字描述的图片效果；可以通过对文字大小，颜色控制图片的显示效果。

通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可显示出你想要的图标，

    删除

4.3.2. 动画

动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。

    

​

    

layui中提供的动画效果非常有限，并且只提供了动画基本实现，如果需要对动画手动控制，则可以使用css3的原生属性，例如，设置动画的持续时长：

animation-duration:10s;

4.3.3. 按钮

向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格

• 用法

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

• 主题1（实心按钮）

  名称	组合
  原始	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"

示例代码：

默认按钮
原始按钮
百搭按钮
警告按钮
危险按钮
禁用按钮

• 主题2（空心按钮）

  名称	组合
  主色	class="layui-btn layui-btn-primary layui-border-green"
  百搭	class="layui-btn layui-btn-primary layui-border-blue"
  暖色	class="layui-btn layui-btn-primary layui-border-orange"
  警告	class="layui-btn layui-btn-primary layui-border-red"
  深色	class="layui-btn layui-btn-primary layui-border-black"

示例代码：

绿色按钮
蓝色按钮
橙色按钮
红色按钮
蓝绿按钮
黑色按钮

• 大小

  尺寸	组合
  大型	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-lg layui-btn-normal"
  正常暖色	class="layui-btn layui-btn-warm"
  小型警告	class="layui-btn layui-btn-sm layui-btn-danger"
  迷你禁用	class="layui-btn layui-btn-xs layui-btn-disabled"

• 流体按钮

  只需为按钮添加类名称layui-btn-fluid即可实现流体按钮，流体按钮会使得按钮占满父容器宽度

  流体按钮（最大化适应）

• 圆角按钮

  主题	组合
  原始	class="layui-btn layui-btn-radius layui-btn-primary"
  默认	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"

• 带图标的按钮

• 按钮组

  将按钮包裹在class="layui-btn-group"的容器中即可实现按钮组

  
      
          添加
      
      
          上传
      
      
          用户信息
      
  

• 按钮容器

  尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器,只需将所有按钮包裹在class="layui-btn-container"即可轻松实现

  
      按钮1
      按钮2
      ....
  

4.3.4. 导航与面包屑

导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。

依赖加载模块：element

4.3.4.1. 导航

• 水平导航

  
      
  最新活动
      
  产品
      
  大数据
      
  
          解决方案
          
   
              
  移动模块
              
  后台模版
              
  电商平台
          
      
      
  社区
  
  ​
  

  添加class名称：lay-this来指定激活项

• 导航主题

  通过对导航追加CSS背景类，让导航呈现不同的主题色

  //如定义一个墨绿背景色的导航
  
      …
     

  水平导航支持的其它背景主题有：layui-bg-cyan*（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝） 垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

• 垂直导航

  
      
      
  
          默认展开
          
  
              
  选项1
              
  选项2
              
  跳转
          
      
      
  
          解决方案
          
  
              
  移动模块
              
  后台模版
              
  电商平台
          
      
      
  产品
      
  大数据
  

  水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：

  垂直导航需要追加class：layui-nav-tree 侧边导航需要追加class：layui-nav-tree layui-nav-side

  导航项添加类名称layui-nav-itemed表示为默认展开项

• 侧边栏导航

• 导航可选属性/类

  属性名	可选值	说明
  lay-shrink	空值（默认） 不收缩兄弟菜单子菜单all 收缩全部兄弟菜单子菜单	展开子菜单时，是否收缩兄弟节点已展开的子菜单 （注：layui 2.2.6 开始新增） 如： …
  lay-unselect	无需填值	点击指定导航菜单时，不会出现选中效果（注：layui 2.2.0 开始新增） 如： 刷新
  lay-bar	disabled 禁用滑块跟随功能	在导航菜单主容器中配置，如：
  CSS 类	layui-nav-child-c 子菜单居中对齐layui-nav-child-r 子菜单向右对齐	直接在子菜单标签配置即可，如：code …

4.3.4.2. 面包屑（路径导航）

• 基础样式

  
      首页
      信息管理学院
      软件工程专业
        2021班
  

• 自定义分隔符

  
      首页
      信息管理学院
      软件工程专业
        2021班
  

  通过在导航元素上设置lay-separator属性值来设置分隔符

  
    娱乐
    八卦
    体育
    搞笑
    视频
    游戏
    综艺
  

4.3.5. 表格

layUI对于表格的支持提供了两种方案：静态表格和数据表格，这里主要讲解呈现基础表格（静态），后续课程补充讲解数据表格，详见table模块

• 综合案例

  
  
      
                                            
      
          
              
              
              
              
              
          
      
      
          
              
              
              
              
              
          
          
              
              
              
              
              
          
          
              
              
              
              
              
          
      
  英雄能力排行榜
  
   
   
   
   
   
   
  id
  姓名
  称号
  类型
  难度系数
  105
  廉颇
  正义爆轰
  坦克
  5
  106
  小乔
  恋之微风
  法师
  4
  107
  赵云
  苍天翔龙
  战士
  5
  

4.3.6. 表单

    
用户信息表
    

    

        

            

                用户名
                

                    
                
            
            

                密码
                

                    
                
            
            

                驾龄
                

                    
                
                
驾龄未满10年无法注册
            
            

                性别
                

                    
                    
                
            
            

                擅长的语言
                

                    
                    
                    
                    
                    
                
            
            

                同意协议