layui框架教程

2023-04-24 03:55:07分类：前端开发 / JavaScript 教程阅读(5870)评论(0)

layui是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，常适合网页界面的快速开发，这篇文章主要介绍了layui框架教程,需要的朋友可以参考下

LayUI

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，常适合网页界面的快速开发。layui 区别于那些基于MVVM 底层的前端框架，它更多是面向后端开发者，无需涉足前端各种工具，只需面对浏览器本身，让一切所需要的元素与交互。

LayUI的特点

1：layui属于轻量级框架，简单美观，适用于后端开发模式，它在服务端页面上有非常好的效果

2：layuu是提供给后端开发人员的ui框架，基于DOM驱动

LayUI

基本使用

1.下载layui

官网：https://layuion.com/

2.安装、引入依赖

例子：

需要声明使用的模块和回调函数，参照官方文档，选择自己想要的效果即可。

比如：

页面元素
布局
1.固定宽度--两边有空白常用
 固定宽度 
2.完整宽度--占据宽度的100%
 完整宽度 
栅格系统
采用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-offerset3这样的预设类来定义列的间距和偏移
  • 可以在类（column）元素中放入你自己的任意元素来填充内容
 
 
 内容的5/12 
 内容的7/12 
 
 内容的4/12 
 内容的4/12 
响应式规则
css媒体查询（Media Queries）的强力支持，从而针对不同尺寸的屏幕进行相应的适配处理。
类型超小屏幕手机（<768px)小屏幕手机（平板>=768px)中等屏幕（桌面>=992px)大型屏幕（桌面>=1200px
.layui-container的值auto750px970px1170px
标记xssmmdlg
列对应类*为1-12的等分数值layui-col-xs*layui-col-sm*layui-col-md*layui-col-lg*
总列数12121212
相应行为始终an设定的比例水平排列在当前屏幕下水平排列，如果屏幕的大小低于临界值则堆叠排列在当前屏幕下水平排列，如果屏幕的代销低于临界值则堆叠排列在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列
 
 响应式规则 
列边距：
通过“列边距”的预设类，来设定之间的间距。且一行中最左的列不会出现左边距，最右边的列不会出现右边距。列边距在保证排版美观的同时，还可以进一步保持分列的宽度精细程度。我们结合网页常用的边距，预设了12中不同的尺寸的边距。
/* 支持列之间为1px-30px的区间的所有双数间距，以及1px，5px，15px，25px的单数间隔 */ layui-col-space1 layui-col-space2 layui-col-space4 layui-col-space5 layui-col-space6 .....
 
4
4
4
注：
1.layui-col-space，设置后起不到作用因为设置的是padding也就是说向内缩，所以设置背景色padding也是会填上颜色，看起来好像没有间距一样，可以再里面在加一个div，来达到目的。
2.间距一般不高于30px，如果超过30，建议使用列偏移
列偏移
​对列最佳类似layui-col-md-offset* 的预设类，从而让列向右偏移。其中*代表的是偏移占据的列数，可选中为1-12
如：layui-col-md-offset3，即和代表在“中型桌面屏幕下，让该列向右偏移3个列表宽度
 
4
4
注：
​列偏移可针对不同屏幕的标准进行设定，在当前设定屏幕下最有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。
列嵌套
可以对栅格进行无穷层次的嵌套。在列元素(layui-col-md*)中插入行元素（layui-row），即可完成嵌套。
 
 
 
 
 
内部5
内部5
内部5
基本元素
按钮
​向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其他按钮风格。
主题
名称组合
原始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"
中间是空心：
名称组合
主色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"
流体自适应
圆角
主题组合
原始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 layui-btn-lg layui-btn-radius layui-btn-normal"
小型警告class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger"
迷你禁用class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled"
图标
默认按钮 样式 大小 圆角 流动自适应
**i 图标 样式 **
导航
​导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，面包屑结构简单、支持自定义分隔符
​依赖加载的模块：element
实现的步骤：
引入的资源：
  • class=“layui-nav”
  • class=“layui-nav-item”--class=“layui-nav-item layui-this”选中
    • class="layui-nav-child" 二级菜单
例子：
垂直样式+侧边
class="layui-nav layui-nav-tree layui-nav-side" 
背景颜色
样式往后加：layui-bg-orange
徽章
直接对应往后加
面包屑
 首页国际新闻亚太地区正文
  • 选中
  • 通过设置属性 lay-separator="-" 来自定义分隔符
选项卡
引入资源:
  • class="layui-tab"
 
     
  • 网站设置
  • 用户管理
  • 权限分配
  • 商品管理
  • 订单管理
 
内容1
内容2
内容3
内容4
内容5
风格
默认风格：
  • layui-tab
简洁风格追加样式：
  • layui-tab-brief
卡片风格追加样式：
  • layui-tab-card
带删除
对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除
表格
   
 昵称加入时间签名
 
 贤心2016-11-29人生就像是一场修行
 许闲心2016-11-28于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
  • 添加属性 lay-even 隔行换色
风格
静态表格支持以下基础属性，可定义不同风格/尺寸的表格样式：
属性名属性值备注
lay-even无用于开启 隔行 背景，可与其它属性一起使用
lay-skin="属性值"line （行边框风格） row （列边框风格） nob （无边框风格）若使用默认风格不设置该属性即可
lay-size="属性值"sm （小尺寸） lg （大尺寸）若使用默认尺寸不设置该属性即可
表单
常用属性
  • equired 浏览器固定的必填字段
  • lay-verify="required" 需要验证的类型（required 表示为必填字段）
  • class=“layui-input” 提供的通用样式
文本框：
  • placeholder 当文本框为空时默认显示的文本信息
  • autocomplete 表单元素是否自动填充，当浏览器中缓存有相同name值是会自动填充
引入依赖
  • form 模块
1.给定form容器
class=“layui-form”
 
2.基本的行区块结构，它提供了相应是的支持，可以换成其他结构，但必学要在外层容器中定义class=“layui-form”，form模块才能正常工作
 
 
 
  • class="layui-input-block" 一整行
  • class="layui-input-inline" 行内
输入框
  • required：注册浏览器所规定的必填字段
  • lay-verify：注册form模块需要验证的类型
  • class="layui-input"：layui.css提供的通用CSS类
下拉框
  • 通过selected=“selected”设置默认选项
  • disabled属性设置禁用
  • 通过option设置分组
  • 设置lay-search属性开启搜索功能
复选框
默认风格：  原始风格： 
  • 属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
  • 属性checked可设定默认选中
  • 属性lay-skin可设置复选框的风格
  • 设置value="1"可自定义值，否则选中时返回的就是默认的on
开关
其实就是checkbox复选框的“变种”，通过设定 lay-skin="switch" 形成了开关风格
  • 属性checked可设定默认开
  • 属性disabled开启禁用
  • 属性lay-text可自定义开关两种状态的文本 （打开的值|关闭的值）
  • 设置value="1"可自定义值，否则选中时返回的就是默认的on
单选框
  • 属性title可自定义文本
  • 属性disabled开启禁用
  • 设置value="xxx"可自定义值，否则选中时返回的就是默认的on
文本域
组装行内表单
div class="layui-form-item"> 
 
 
-
 
 
 
  • class="layui-inline"：定义外层行内
  • class="layui-input-inline"：定义内层行内
忽略美化渲染
  • lay-ignore
方框效果
通过追加 layui-form-pane 的class，来设定表单的方框风格。内部结构不变。
 内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如： 
 
 
弹出层
引入依赖：
模块化：
  • layer
layer 作为 Layui 的代表性组件 ，比 Layui 要出现的早，作为 Layui 最早的源动力，layer 的使用之广泛甚至一度超过了 Layui 本身。 layer 拥有众多的自定义功能，也是许多开发者的网页弹出层的首选交互方案，在各类场景都能发挥重要作用。
场景用前准备
1. 作为独立组件使用如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8 以上的任意版本，并引入layer.js。
2. 作为 layui 组件使用如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js
到此这篇关于layui框架教程的文章就介绍到这了,更多相关layui使用内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站！
以上就是layui框架教程的详细内容，更多请关注0133技术站其它相关文章！
赞(0) 打赏
未经允许不得转载：0133技术站首页 » JavaScript 教程
相关文章
前端开发
HTML 教程CSS 教程JavaScript 教程Vue.js 教程Node.js 教程

置顶推荐
猜你喜欢