layui 的基本使用

最新推荐文章于 2024-06-04 17:34:22 发布
最新推荐文章于 2024-06-04 17:34:22 发布
阅读量198 收藏
点赞数
文章标签： layui 前端框架 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56235705/article/details/125768624
版权

layui 的基本使用

B 站学习视频：https://www.bilibili.com/video/BV185411A7zi?p=1&vd_source=307bc3effb1327ab9f03ead48deecd5b

1. 基础知识

1.1 什么是 layui

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

原文链接：https://blog.csdn.net/weixin_59196705/article/details/124807399

1.2 layui 的特点

  • layui 属于轻量级的框架，简单美观。适合于开发后端模式，它在服务端页面上有非常好的效果。
  • layui 是提供给后端开发人员的 ui 框架，基于 DOM 驱动。

2. layui 的下载、安装及使用

  • 下载

    layui 官网：http://layui.org.cn

  • 安装

    新建一个 html 项目，将文件解压然后复制进项目内即可

  • 使用

    在 html 中，引用指定的文件即可

    例：

    <html>
<head>
<meta charset="utf-8">
<title>layui</title>
<!-- 引入 layui 核心 css 文件 -->
<link rel="stylesheet" type="test/css" href="文件所在路径"/>
<!-- 引入 layui.js 文件 -->
<script src="文件所在路径" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 调用 layui.js 的指定模块 -->
<script type="text/javascript">
// 导航依赖 element 模块
layui.use('element',function(){
var element = layui.element;
});
</script>
</body>
</html>

3. 页面元素

3.1 布局

3.1.1 布局容器
  1. 新建 html 页面
<html>
<head>
<meta charset="utf-8">
<title>布局容器</title>
<!-- 引入 layui 核心 css 文件 -->
<link rel="stylesheet" type="test/css" href="文件所在路径"/>
</head>
<body>
<!-- 
    布局容器
        1. 固定宽度（两侧有留白效果）
        2. 完整宽度（占据屏宽度的 100%）
-->

<!-- 固定宽度 -->
<div class="layui-container" style="backgroud-color:navajowhite;height:300px;">
固定宽度
</div>

<!-- 完整宽度 -->
<div class="layui-fluid" style="background-color:cyan;height:300px;">
完整宽度
</div>
</body>
</html>
3.1.2 栅格系统
3.1.2.1 栅格布局规则
<html>
<head>
<meta charset="utf-8">
<title>栅格布局规则</title>
<!-- 引入 layui 核心 css 文件 -->
<link rel="stylesheet" type="test/css" href="文件所在路径"/>
</head>
<body>

<!--
	栅格系统
	1. 定义行  .layui-row
	2. 定义列  .layui-col-md*
		md 表示不同屏幕的标识（xs、sm、md、lg）。
		* 表示列的数量（想要占几列），总数不能超过12，否则会自动换行。
-->

    <!-- 布局容器 -->
    <div class="layui-container">
    
        <!-- 定义行 -->
        <div class="layui-row">
        <!-- 定义列 -->
        <div class="layui-col-md5" style="background-color:deepskyblue;">
        内容5/12
        </div>
        <div class="layui-col-md7" style="background-color:bisque;">
        内容7/12
        </div>
        </div>
        
         <!-- 定义行 -->
        <div class="layui-row">
        <!-- 定义列 -->
        <div class="layui-col-md4" style="background-color:powderblue;">
        内容4/12
        </div>
        <div class="layui-col-md4" style="background-color:mediumaquamarine;">
        内容4/12
        </div>
        <div class="layui-col-md4" style="background-color:grey;">
        内容4/12
        </div>
        </div>
        
    </div>
</body>
</html>
3.1.2.2 响应式规则
<html>
<head>
<meta charset="utf-8">
<title>响应式规则</title>
<!-- 引入 layui 核心 css 文件 -->
<link rel="stylesheet" type="test/css" href="文件所在路径"/>
</head>
<body>

<!--
	响应式规则：
		1. 栅格会自动根据屏幕的分辨率选择对应的样式效果
			超小屏幕（手机）< 768px   : xs  12  layui-col-xs*
			小屏幕（平板）>= 768px    : sm  12  layui-col-sm*
			中等屏幕（桌面）>= 992px  : md  12  layui-col-md*
			大型屏幕（桌面）>= 1200px : lg  12  layui-col-lg* 
-->

<div class="layui-container">
<h3>平板、桌面端的不同表现：</h3>
<div class="layui-row">
	<div class="layui-row">
	<div class="layui-col-sm6 layui-col-md4" style="background-color:mediumaquamarine;">
	平板 >= 768px: 6/12 | 桌面端 >= 992排序: 4/12
	</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>
</div>	
</div>
</body>
</html>
3.1.2.3 列边距
<html>
<head>
<meta charset="utf-8">
<title>列边距</title>
<!-- 引入 layui 核心 css 文件 -->
<link rel="stylesheet" type="test/css" href="文件所在路径"/>
</head>
<body>

<!--
	列边距规则：
	1. .layui-col-space* 支持列之间 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔
	注意：layui-col-space 设置后不起作用主要是因为设置的是 padding ，也就是说向内缩，所以设置背景颜色 padding 也是会添上颜色，看起来好像没有边距一样。可以在里面再加一个 div ，来达到目的。
-->

<div class="layui-container">
<h3>列边距</h3>
	<div class="layui-row layui-col-space10">
	<div class="layui-col-md4">
	<div style="background-color:hotpink">4</div>
	</div>
	<div class="layui-col-md4">
	<div style="background-color:indianred">4</div>
	</div>
	<div class="layui-col-md4">
	<div style="background-color:powerblue">4</div>
	</div>
	</div>
</div>
</body>
</html>
3.1.2.4 列偏移
<html>
<head>
<meta charset="utf-8">
<title>列偏移</title>
<!-- 引入 layui 核心 css 文件 -->
<link rel="stylesheet" type="test/css" href="文件所在路径"/>
</head>
<body>

<!--
	将列向右移动指定列数
	layui-col-md-offset*
		* 代表的是列数
-->

<div class="layui-container">
<h3>列偏移</h3>
	<div class="layui-row">
	<div class="layui-col-md4">
	<div style="background-color:cyan">4</div>
	</div>
	<div class="layui-col-md4 layui-col-md-offset4">
	<div style="background-color:fuchsia">向右移动四列</div>
	</div>

</div>
</body>
</html>
3.1.2.5 列嵌套
<html>
<head>
<meta charset="utf-8">
<title>列嵌套</title>
<!-- 引入 layui 核心 css 文件 -->
<link rel="stylesheet" type="test/css" href="文件所在路径"/>
</head>
<body>

<!--
	
-->

<div class="layui-container">
<h3>列嵌套</h3>
	<div class="layui-row">
	<div class="layui-col-md6">
	<div style="background-color:mediumaquamarine">
		<!-- 嵌套部分 -->
		<div class="layui-row layui-col-space10">
	<div class="layui-col-md3">
	<div style="background-color:burlywood">3</div>
	</div>
	<div class="layui-col-md5">
	<div style="background-color:indianred">5</div>
	</div>
	<div class="layui-col-md4">
	<div style="background-color:mediumaquamarine">4</div>
	</div>
	</div>
		
	</div>
	</div>
	
</div>
</body>
</html>
3.2 基本元素
3.2.1 按钮
<html>
<head>
<meta charset="utf-8">
<title>按钮</title>
<!-- 引入 layui 核心 css 文件 -->
<link rel="stylesheet" type="test/css" href="文件所在路径"/>
</head>
<body>

<!--
	按钮：
		向任意 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>
<hr>

<!-- 不同主题的按钮 -->
<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>

<!-- 不同尺寸的按钮 -->
<button class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
<button class="layui-btn">默认大小按钮</button>
<button class="layui-btn layui-btn-sm">小型按钮</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>

<hr>
<!-- 图标按钮 -->
<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>
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm">
	<i class="layui-icon layui-icon-heart"></i>关注
</button>
<!-- 具体的图标有很多种，可以自行选择图标使用 -->

</body>
</html>
3.2.2 导航
<html>
<head>
<meta charset="utf-8">
<title>导航</title>
<!-- 引入 layui 核心 css 文件 -->
<link rel="stylesheet" type="text/css" href="文件所在路径"/>
<!-- 引入 layui.js 文件 -->
<script src="文件所在路径" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<!--
	导航
		水平导航 layui-nav
			layui-nav-item 表示是导航的子项
			layui-this 表示当前被选中的项
			layui-nav-child 表示的是二级菜单
		垂直导航 layui-nav layui-nav-tree
		侧边导航 layui-nav layui-nav-tree layui-nav-side
			导航的主题颜色
				layui-bg-颜色（墨绿 molv 、藏青 cyan 、艳蓝 blue）
		面包屑式导航 
			layui-breadcrumb
			通过 layui-separator="符号" 设置面包屑导航的分隔符
-->

<!-- 水平导航 layui-nav -->
<ul class="layui-nav">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item"><a href="">产品</a></li>
<li class="layui-nav-item layui-this"><a href="">大数据</a></li>
<li class="layui-nav-item">
	<a href="">解决方案</a>
	<dl class="layui-nav-child">
	<dd><a href="">移动模块</a></dd>
	<dd><a href="">后台模块</a></dd>
	<dd><a href="">电商平台</a></dd>
	</dl>
</li>
</ul>

<!--垂直导航 layui-nav layui-nav-tree -->
<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item"><a href="">产品</a></li>
<li class="layui-nav-item layui-this"><a href="">大数据</a></li>
<li class="layui-nav-item">
	<a href="">解决方案</a>
	<dl class="layui-nav-child">
	<dd><a href="">移动模块</a></dd>
	<dd><a href="">后台模块</a></dd>
	<dd><a href="">电商平台</a></dd>
	</dl>
</li>
</ul>

<!--侧边导航 layui-nav layui-nav-tree layui-nav-side -->
<ul class="layui-nav layui-nav-tree layui-nav-side">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item"><a href="">产品</a></li>
<li class="layui-nav-item layui-this"><a href="">大数据</a></li>
<li class="layui-nav-item">
	<a href="">解决方案</a>
	<dl class="layui-nav-child">
	<dd><a href="">移动模块</a></dd>
	<dd><a href="">后台模块</a></dd>
	<dd><a href="">电商平台</a></dd>
	</dl>
</li>
</ul>

<!-- 设置导航的主题颜色 -->
<ul class="layui-nav layui-nav-tree layui-nav-side layui-bg-molv">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item"><a href="">产品</a></li>
<li class="layui-nav-item layui-this"><a href="">大数据</a></li>
<li class="layui-nav-item">
	<a href="">解决方案</a>
	<dl class="layui-nav-child">
	<dd><a href="">移动模块</a></dd>
	<dd><a href="">后台模块</a></dd>
	<dd><a href="">电商平台</a></dd>
	</dl>
</li>
</ul>

<!-- 面包屑式导航 -->
<span class="layui-breadcrumb">
	<a href="">首页</a>
    <a href="">国际新闻</a>
    <a href="">亚太地区</a>
    <a><cite>正文</cite></a>
</span>
<br>
<!-- 设置属性 *layui-separator=""* 来自定义分隔符 -->
<span class="layui-breadcrumb" layui-separator="_">
	<a href="">首页</a>
    <a href="">国际新闻</a>
    <a href="">亚太地区</a>
    <a><cite>正文</cite></a>
</span>
<br>
<span class="layui-breadcrumb" layui-separator="|">
	<a href="">首页</a>
    <a href="">国际新闻</a>
    <a href="">亚太地区</a>
    <a><cite>正文</cite></a>
</span>



<script type="text/javascript">
// 导航依赖 element 模块
layui.use('element',function(){
var element = layui.element;
});
</script>

</body>
</html>
3.2.3 选项卡
计算机需要沉淀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui入门
m0_68879220的博客
04-22 1563
1.什么是layui layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交...
suricata的基本使用
yeshankuangrenaaaaa的博客
09-04 6020
suricata suricata安装 规则管理 Oinkmaster 依赖 apt-get install liblua5.1-dev #配置支持lua,--enable-lua apt-get install libgeoip-dev #配置支持GeoIP,--enable-geoip apt-get install cargo #配置支持Rust suricata配置相关 设置EXTER...
layui介绍及入门基础（看我这篇就会了！！！）
热门推荐
m0_73647713的博客
07-10 1万+
layui（谐音：类 UI)是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
Layui：一款强大的前端UI框架
m0_46413639的博客
06-04 472
在这些框架中，Layui凭借其优雅的设计、灵活的组件和丰富的功能，受到了广大开发者的喜爱。通过引入Layui的CSS和JavaScript文件，开发者可以方便地使用Layui提供的丰富组件，如按钮、表格、表单。灵活定制：Layui的组件具有很强的可定制性，开发者可以根据自己的需求修改组件的样式、颜色、大小等属性，使得组件能够更好地适应不同的网页应用场景。组件丰富：Layui提供了丰富的Web界面组件，如表格、表单、按钮、选项卡、弹出层等，可以满足大部分网页应用的开发需求。二、Layui的使用。
LayUi基础入门【附有案例从0到1详解】
m0_74315688的博客
07-11 4195
不怎么怎么使用LayUi？一篇文章保姆级教学，让你一秒学会使用LayUi！！
前端基础5——UI框架Layui
百慕卿君博客
09-06 6562
Layui的常用设置
LayUI入门，以及介绍
lz17267861157的博客
07-10 6291
都是最基本的你学废了吗！
注解的基本使用
qq_45337431的博客
08-18 175
注解（Annotation）其实就是代码里的特殊标记, 它用于替代配置文件，也就是说，传统方式通过配置文件告诉类如何运行，有了注解技术后，开发人员可以通过注解告诉类如何运行。在Java技术里注解的典型应用是：可以通过反射技术去得到类里面的注解，以决定怎么去运行类。 注释（Comment）：给代码添加说明和解释，注释帮助开发人员理解程序。 注解（Annotation）：给代码添加说明,这个说明给程序...
layui基本使用视频教程
08-01
此为layui基本使用视频教程百度云下载地址，如有问题可以按照文档里面联系本人
代码_layui的使用_
10-02
以上就是layui基础使用和与数据库连接的基本步骤。在实际项目中，你可能还需要处理分页、过滤、编辑等功能，layui都提供了相应的API支持。通过不断实践和学习，你可以熟练掌握layui，为你的Web应用增添更多可能性。...
layui使用vue的例子
06-13
本项目结合了两者，提供了"layui使用vue的例子"，帮助初学者更好地理解和应用Vue技术。 layui以其简洁、易用和丰富的组件库而受到青睐，它涵盖了表格、表单、按钮、图标、弹窗（layer）等常见的网页元素。Vue.js则...
LayUI的使用，资源包
07-10
1. **基本结构**：LayUI的HTML结构通常包含`layui-container`作为容器，内部使用`layui-row`和`layui-col`进行栅格布局。通过调整`layui-col`的类名，可以实现响应式设计，适应不同设备屏幕。 2. **样式表与...
layui的使用示例.zip
12-06
在"layui的使用示例.zip"这个压缩包中，包含了一些基本的使用案例，帮助我们更好地理解和应用layui框架。下面我们将逐一探讨这些示例文件所展示的知识点。 1. **baselayout.html**：基础布局示例 这个文件展示了...
layUI之入门
weixin_67465673的博客
07-07 2198
目录一、layui简介 1.什么是layui2.layui、easyui与bootstrap的对比 2.1 layui和bootstrap对比（这两个都属于UI渲染框架）2.2 layui和easyui对比 3.layui入门 3.1路径问题 入门案例：点击弹出框 ​编辑②接着我们新建一个jsp页面叫demo1 二、自定义模块 1.如何扩展一个layui(自定义模块) 参考 模块规范 1）第一步:确认模块名，假设为：test.js文件放入项目任意目录下（注意：不用放入layui目录）静态资源：cs
LayUI之入门篇
kissship的博客
07-11 3331
LayUI（或称为LayUI前端框架）是一个基于JavaScript的UI框架，旨在简化Web界面开发的过程。它由贤心（诚意出品）开发，提供了丰富的CSS组件和JavaScript交互插件，使开发者能够快速构建出美观、灵活的网页界面。简洁易用：LayUI提供了简单明了的API文档和丰富的示例，使开发者能够快速上手使用。响应式设计：LayUI的组件都经过精心设计，能够自动适应不同屏幕大小和设备。模块化开发：LayUI采用了模块化的开发思想，开发者可以按需加载需要的模块，减少资源浪费。
深入解析Layui框架：从入门到实战
奇妙的Bug之旅
10-19 2132
而Layui作为一款轻量级的前端UI框架，凭借其简洁易用的特点，受到了广大开发者的喜爱。本文将详细介绍Layui的基本概念、使用方法以及一个实际的实例，帮助读者快速上手并应用Layui进行开发。Layui是一款由中国开发者贤心所开发的前端UI框架，它基于jQuery实现，提供了丰富的组件和样式，可以帮助开发者快速构建美观且交互友好的网页界面。需要注意的是，由于示例中的表单没有后端处理逻辑，所以提交时会直接阻止表单提交行为。以上示例展示了如何使用Layui的表单组件创建一个简单的登录表单。
layui框架的一些基本使用
qq_52986363的博客
01-12 8209
layui的优缺点以及使用layui前的准备 1.栅格系统 2.按钮 3.表单 4.表格 5.面板 6.时间线 7.选项卡 8.弹出层 9.数据表格
layui框架入门篇
qq_31782927的博客
06-02 2346
layUi框架入门篇（一）——引入 layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手
Layui之入门
weixin_74268571的博客
07-11 2294
layui入门及简单介绍，使用layui实现登录注册讲解，如何扩展一个layui自定义模块
layui contextmenu使用
最新发布
07-02
以下是layui contextmenu的基本使用方法： 1. 引入layui和contextmenu插件： 在HTML文件中，先引入layui.css和layui.js文件，然后在需要使用contextmenu的地方，引入contextmenu.js。 ```html ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值