您现在的位置是：网站首页> 编程资料编程资料

layui框架教程_javascript技巧_

2023-05-24 311人已围观

简介 layui框架教程_javascript技巧_

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

上一篇：React中用@符号编写文件路径实现方法介绍_React_

下一篇：JS前端开发之exec()和match()的对比使用_javascript技巧_

相关内容

点击排行

本栏推荐

猜你喜欢