LayUI 的安装及使用

最新推荐文章于 2024-05-01 11:06:27 发布
最新推荐文章于 2024-05-01 11:06:27 发布
阅读量774 收藏 3
点赞数 1
文章标签： java android ios objective-c javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lezijieAmy/article/details/111356755
版权

LayUI 的安装及使用

LayUI 的介绍

​ layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

​ 由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。

​ 官网：https://www.layui.com

​ 官方文档：https://www.layui.com/doc/

LayUI 的特点

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

（2）layui是提供给后端开发人员的ui框架，基于DOM驱动。

下载与使用

  1. 在 官网首页 下载到 layui 的最新版。目录结构如下：

     ├─css // css目录
  │  │─modules // 模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css // 核心样式文件
  ├─font  // 字体图标目录
  ├─images // 图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay // 模块核心目录
  │  └─modules // 各模块组件
  │─layui.js // 基础核心库
  └─layui.all.js // 包含layui.js和所有模块的合并文件

  2. 获得 layui 后，将其完整地部署（拷贝到项目中）到你的项目目录，你只需要引入下述两个文件：

./layui/css/layui.css
./layui/layui.js // 提示：如果是采用非模块化方式，此处可换成：./layui/layui.all.js
  1. 基本的入门页面
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用layui</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
 
<!-- 你的HTML代码 -->
 
<script src="layui/layui.js"></script>
<script>
    // 模块和回调函数
    // 一般直接写在一个js文件中
    layui.use(['layer', 'form'], function(){
    
      var layer = layui.layer
      ,form = layui.form;

      layer.msg('Hello World');
    });
</script> 
</body>
</html>

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

    比如：

    <script>
    // 注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
      
      	var element = layui.element;

      	//…
    });
</script>

页面元素

布局

布局容器
固定宽度

将栅格放入一个带有 class=“layui-container” 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。

<div class="layui-container">
  <div class="layui-row">
    ……
  </div>
</div>
完整宽度

可以不固定容器宽度。将栅格或其它元素放入一个带有 class=“layui-fluid” 的容器中，那么宽度将不会固定，而是 100% 适应

<div class="layui-fluid">
  ……
</div>
栅格系统

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

栅格布局规则

  1. 采用 layui-row 来定义行，如：

    <div class="layui-row"></div>

  2. 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：

    • 变量 md 代表的是不同屏幕下的标记
    • 变量 ***** 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
    • 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。

  3. 列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕）。

  4. 可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。

  5. 可以在列（column）元素中放入你自己的任意元素填充内容

示例：

<h3>常规布局（以中型屏幕桌面为例）：</h3>
<div class="layui-row">
	<div class="layui-col-md9" style="background-color: #00F7DE;">
	  你的内容 9/12
	</div>
	<div class="layui-col-md3" style="background-color: rosybrown;">
	  你的内容 3/12
	</div>
</div>
响应式规则

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

超小屏幕 (手机<768px) 小屏幕 (平板≥768px) 中等屏幕 (桌面≥992px) 大型屏幕(桌面≥1200px)
.layui-container的值 auto 750px 970px 1170px
标记 xs sm md lg
列对应类 * 为1-12的等分数值 layui-col-xs* layui-col-sm* layui-col-md* layui-col-lg*
总列数 12 12 12 12
响应行为 始终按设定的比例水平排列 在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列 在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列 在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列 
<h3>平板、桌面端的不同表现：</h3>
<div class="layui-row">
    <div class="layui-col-sm6 layui-col-md4"  
         style="background-color: thistle">
        平板≥768px：6/12 | 桌面端≥992px：4/12
    </div>
</div>

<div class="layui-row">	    
    <div class="layui-col-sm4 layui-col-md6"  
         style="background-color: mediumaquamarine;">
        平板≥768px：4/12 | 桌面端≥992px：6/12
    </div>
</div>

<div class="layui-row">
    <div class="layui-col-sm12 layui-col-md8" 
         style="background-color: coral">
        平板≥768px：12/12 | 桌面端≥992px：8/12
    </div>
</div>
列边距

​ 通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是：

/* 支持列之间为 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔 */
layui-col-space1 
layui-col-space2 
layui-col-space4 
layui-col-space5 
layui-col-space6 
layui-col-space8 
layui-col-space10 
layui-col-space12 
layui-col-space14 
layui-col-space15 
layui-col-space16 
layui-col-space18 
layui-col-space20 
layui-col-space22 
layui-col-space24 
layui-col-space25 
layui-col-space26 
layui-col-space28 
layui-col-space30

示例：

<h3>列间距</h3>
<div class="layui-row layui-col-space10">
    <div class="layui-col-md4" >
        <!-- 需要在layui-col-md4里面再加一层div -->
        <div style="background-color: #009688;">
            1/3
        </div>
    </div>
    <div class="layui-col-md4">
        <div style="background-color: burlywood;">
            1/3
        </div>
    </div>
    <div class="layui-col-md4">
        <div style="background-color: silver;">
            1/3
        </div>
    </div>
</div>

注：

1. layui-col-space：设置后不起作用主要是因为**设置的是padding**,也就是说是**向内缩**，所以设置背景色padding也是会添上颜色，看起来好像没有间距一样。可以在里面在加一个div，来达到目的。
2. 间距一般不高于30px，如果超过30，建议使用列偏移。
列偏移

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

<h3>列偏移</h3>
<div class="layui-row">
    <div class="layui-col-md4" style="background-color: rosybrown;">
        4/12
    </div>
    <div class="layui-col-md4 layui-col-md-offset4" 
         style="background-color: cornflowerblue;">
        偏移4列，从而在最右
    </div>
</div>

​ 注：列偏移可针对不同屏幕的标准进行设定，在当前设定的屏幕下有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。

列嵌套

​ 可以对栅格进行无穷层次的嵌套。在列元素（layui-col-md*）中插入行元素（layui-row），即可完成嵌套。

<h3>列嵌套</h3>
<div class="layui-row layui-col-space5">
    <div class="layui-col-md5" style="background-color: thistle;">
        <div class="layui-row">
            <div class="layui-col-md3" style="background-color: burlywood;" >
                内部列
            </div>
            <div class="layui-col-md5" style="background-color: indianred;">
                内部列
            </div>
            <div class="layui-col-md4" style="background-color: mediumaquamarine;">
                内部列
            </div>
        </div>
    </div>
</div>

基本元素

按钮
用法

​ 向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。

<!-- 基础按钮 -->
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
<div class="layui-btn">一个按钮</div>
主题
名称 组合
原始 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”

示例：

<!-- 不同主题的按钮 -->
<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-primary">原始按钮</button> 
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">暖色按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>
<button class="layui-btn layui-btn-disabled">禁用按钮</button>
尺寸
尺寸 组合
大型 class=“layui-btn layui-btn-lg”
默认 class=“layui-btn”
小型 class=“layui-btn layui-btn-sm”
迷你 class=“layui-btn layui-btn-xs” 
<!-- 不同尺寸的按钮 -->
<button class="layui-btn layui-btn-primary layui-btn-lg">大型</button> 
<button class="layui-btn">默认</button>
<button class="layui-btn layui-btn-sm layui-btn-danger">小型</button>
<button class="layui-btn layui-btn-xs">迷你</button>
圆角

layui-btn-radius

<button class="layui-btn layui-btn-radius">默认按钮</button>
<button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button> 
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
<button class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
<button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
图标
<button type="button" class="layui-btn">
    <i class="layui-icon">&#xe608;</i> 添加
</button>

<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
    <i class="layui-icon">&#x1002;</i> 刷新
</button>
导航

​ 导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边。面包屑结构简单，支持自定义分隔符。

​ 依赖加载模块：element

实现步骤：

  1. 引入的资源

    <link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

  2. 依赖加载模块

    <script type="text/javascript">
    // 注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use
最低0.47元/天 解锁文章
lezijieAmy
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端框架LayUI
qq_39756007的博客
02-15 8922
Bootstrap让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适 用。从项目维护的角度上，传统的开发模式，前端代码和后端代码耦合在一起，导致代码混乱不堪，极大的降低了项目的可维护性，增加了维护成本。从开发角度来看，研发人员在开发过程中，不仅要设计后端架构还要兼顾前端展示，导致开发效率低下，延长开发周期。传统开发模式的问题在前后端分离的开发模式中，后端仅返回前端所需的数据，前端负责渲染HTML页面，后端不再控制前端的效果，从后端请求的数据如何加载到前端中，都由前端自己决定，后
legui：Java OpenGL GUI库。 为与最新的LWJGL（LWJGL 3）结合使用而创建
02-02
目录 LEGUI- 与LWJGL3一起使用的GUI实现。 此gui库用于与OpenGL端口（LWJGL）结合使用，以使程序员可以快速轻松地将用户界面集成到用Java或Kotlin编写的OpenGL应用程序中。 API与Swing API十分接近。 例子 单选按钮和文本输入 小部件 文字区域 按钮，切换按钮，复选框，选择框 滑杆 滚动面板 对LEGUI的贡献 有关更多信息，请参见。 系统要求 LEGUI需要Java 8+，因为它使用lambda表达式。 后端触及的OpenGL状态 在NanoVG之上制作的默认渲染器，它具有以下状态： 上载或更新纹理时，以下像素存储将设置为默认值： GL_UNPACK_ALIGNMENT ， GL_UNPACK_ROW_LENGTH ， GL_UNPACK_SKIP_PIXELS ， GL_UNPACK_SKIP_ROWS 。 纹理绑定也会受到影响。 当用户加载图像或添加新的字形时，纹理更新可能会发生。 根据需要添加字形的render()方法的开始和结束。 整个帧的数据在渲染结束时进行缓冲和刷新。 以下代码说明了渲染代码所涉及的OpenGL状态：
最快成型的前端框架Layuimini本地项目部署演示
最新发布
05-01 1225
最快成型的前端框架Layuimini本地项目部署演示
前端基础5——UI框架Layui
百慕卿君博客
09-06 6304
Layui的常用设置
前端LayUI框架快速上手详解(二)
Augenstern_QXL的博客
08-20 8025
✍ LayUI 1、弹出层 1.1、弹出层 弹出层官方文档：https://www.layui.com/doc/modules/layer.html#use layer可以独立使用，也可以通过Layui模块化使用 场景 用前准备 调用方式 1.作为独立组件使用 如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。 通过script标签引入layer.js后，直接用即可。 2.layu
Layui框架
2301_78158657的博客
08-16 1084
LayUI 是一款经典模块化前端 UI 框架 和Bootstrap有些相似，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。使得前端页面的制作变得更加简单，可以说是为后端人员量身定制的一款开源框架。
LayUI的安装及使用
weixin_52397329的博客
11-25 2248
LayUI 主要内容 LayUI 的安装及使用 LayUI 的介绍 ​ layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。 ​ 由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成
详解如何在vue项目中使用layui框架及采坑
10-17
在Vue项目中集成layui框架可能遇到的挑战及解决方法 layui是一款流行的前端UI框架，它提供了丰富的组件和优雅的设计风格。然而，在Vue这样的现代前端框架中使用layui并不像在传统HTML页面中那样直接。本文将深入...
使用layui编写的学生与班级管理
04-20
使用的工具是vscode，使用的是nodeJS程序框架，里面使用的骨架是express，连接数据库使用的mongodb；用的是三层架构来规范，客户端和服务器的进行交互过程用的是restful来规范的。 没解决的问题：在学生管理里面新...
Vue实现Layui的集成方法步骤
10-15
可以使用`yarn add layui-src`或`npm install layui-src`命令安装。 2. **项目结构准备** - 安装完成后，找到`node_modules/layui-src/build`文件夹，将其复制到项目的`public`目录下，并将其重命名为`layim`，以...
springboot+layui简单demo实例
04-18
idea开发工具，使用了mybatis generator插件和lombook插件，maven导入依赖后，安装lombook或者自己封装即可。有问题请私信
最细致的LayUI【前端框架】从入门到实战-快速搭建后台管理系统
只想AC的博客
06-04 4006
layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。
layui介绍及入门基础（看我这篇就会了！！！）
热门推荐
m0_73647713的博客
07-10 1万+
layui（谐音：类 UI)是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
前端框架Layui的使用讲解（Layui搭建登录注册页面）
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
07-11 1万+
Layui的设计理念是简洁、直观和高效，旨在提供轻量级且易于上手的前端解决方案。它提供了丰富的UI组件，如按钮、表格、表单、导航、分页等，以及强大的模块化功能，例如弹层、日期选择器、上传组件等。使用Layui，你可以轻松构建出具有现代化风格和友好交互的Web界面。
layui框架简单解读，为什么要使用layui框架，layui框架的好处，后端程序员快速学习掌握layui框架技术型文档博文，layui学习笔记，快速掌握前端技术框架
m0_61068496的博客
04-11 2726
资料过多，篇幅有限自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！学生时代">你的工号？你最喜欢的老师？另外对于如果选项多的话，我们也可以通过添加lay-search对选项进行搜索。
深入解析Layui框架：从入门到实战
奇妙的Bug之旅
10-19 2009
而Layui作为一款轻量级的前端UI框架，凭借其简洁易用的特点，受到了广大开发者的喜爱。本文将详细介绍Layui的基本概念、使用方法以及一个实际的实例，帮助读者快速上手并应用Layui进行开发。Layui是一款由中国开发者贤心所开发的前端UI框架，它基于jQuery实现，提供了丰富的组件和样式，可以帮助开发者快速构建美观且交互友好的网页界面。需要注意的是，由于示例中的表单没有后端处理逻辑，所以提交时会直接阻止表单提交行为。以上示例展示了如何使用Layui的表单组件创建一个简单的登录表单。
LayUI入门，以及介绍
lz17267861157的博客
07-10 6124
都是最基本的你学废了吗！
LayUi基础入门【附有案例从0到1详解】
m0_74315688的博客
07-11 3945
不怎么怎么使用LayUi？一篇文章保姆级教学，让你一秒学会使用LayUi！！
layui项目中使用webpack
05-20
在Layui项目中使用Webpack需要进行以下步骤： 1. 安装Webpack和相关的Loader和Plugin ```bash npm install webpack webpack-cli --save-dev npm install babel-loader @babel/core @babel/preset-env --save-dev ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值