layui的基本使用(布局，栅格，按钮)

最新推荐文章于 2024-06-24 23:23:11 发布
最新推荐文章于 2024-06-24 23:23:11 发布
阅读量6.5k 收藏 9
点赞数 3
文章标签： html layui框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/serendipity_xr/article/details/119852134
版权

layui

一.layui概述

1.layui下载

  • 在浏览器中输入https://www.layui.com/会出现以下界面

在这里插入图片描述

  • 点击立即下载进行下载
  • 下载后并进行解压
    在这里插入图片描述

2.layui目录结构

在这里插入图片描述

二.layui基本使用

1.引入核心文件

<head>
		<meta charset="UTF-8">
		<title>layui的使用</title>
		<!--引入layui.css文件-->
		<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
		<!--引入layui.js文件(采用模块化引入)-->
		<script type="text/javascript" src="layui-v2.6.8/layui/layui.js" ></script>
	</head>

2.html代码

<script>
			//一般直接写在一个js文件中
			layui.use(['layer', 'form'], function(){
 			 var layer = layui.layer
 			 ,form = layui.form;
 			 //layui的弹出框
  			layer.msg('Hello World');
			});
</script>

三.页面元素

在使用layui时，需要注意要导入哪个样式

1.布局容器

1.1固定宽度

  • 将栅格放入一个带有 class=“layui-container” 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。
	<div class="layui-container" style="background-color: navajowhite; height: 300px;">
			固定宽度
		</div>

1.2完整宽度

  • 将栅格或其它元素放入一个带有 class=“layui-fluid” 的容器中，那么宽度将不会固定，而是 100% 适应。
<div class="layui-fluid" style="background-color: burlywood; height: 300px;">
			完整宽度
		</div>

2.栅格系统

  • 栅格系统(具备响应式能力)将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

2.1栅格布局规则

  1. 定义行
<div class="layui-row"></div>
  1. 定义列
    总行数:12(变量* 代表的是该列所占用的12等分数)
    注意：如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
//变量md 代表的是不同屏幕下的标记
<div class="layui-col-md*"></div>//中等屏幕(桌面≥992px)
<div class="layui-col-xs*"></div>//超小屏幕(手机<768px)
<div class="layui-col-sm*"></div>//小屏幕(平板≥768px)
<div class="layui-col-lg*"></div>//大型屏幕(桌面≥1200px)
  • layui-col-md* 表示一组列（column），且放在行（row）内。
  • 响应式规则:栅格会自动根据屏幕的分辨率选择对应的样式。
  • 可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
    eg1：
<body>
		
		<!--栅格系统
			1.定义行：layui-row
			2.定义列：layui-col-md*
					md表示不同的屏幕标识(xs,sm,md,lg)
					*表示列的数量
		-->
		<!--布局容器-->
		<div class="layui-container">
			<!--定义行-->
			<div class="layui-row">
				<!--定义列-->
				<div class="layui-col-md5" style="background-color: #00FFFF;">
					内容5/12
				</div>
				<div class="layui-col-md7" style="background-color: #007DDB;">
					内容7/12
				</div>
			</div>
			
			<!--定义行-->
			<div class="layui-row">
				<!--定义列-->
				<div class="layui-col-md4" style="background-color: #FF0000;">
					内容4/12
				</div>
				<div class="layui-col-md4" style="background-color: #FF5722;">
					内容4/12
				</div>
				<div class="layui-col-md6" style="background-color: #FFB800;">
					内容6/12
				</div>
			</div>
		</div>
	</body>

代码结果：
在这里插入图片描述

eg2：

		<h3>平板，桌面端的不同表现形式</h3>
			<div class="layui-row">
				<div class="layui-col-sm6 layui-col-md4" style="background-color: #40AFFE;">
					平板≥768px:6/12  |  桌面端≥992px:4/12
				</div>
			</div>
			
			<div class="layui-row">
				<div class="layui-col-sm4 layui-col-md6" style="background-color: #0000FF;">
					平板≥768px:4/12  |  桌面端≥992px:6/12
				</div>
			</div>
			
			<div class="layui-row">
				<div class="layui-col-sm12 layui-col-md8" style="background-color: #5FB878;">
					平板≥768px:12/12  |  桌面端≥992px:8/12
				</div>
			</div>
		</div>

结果展示：
在这里插入图片描述

2.2列间距

定义列间距

<div class="layui-row layui-col-space*"></div>//*代表的是px值(1-30)

eg1:

		<h3>列边距</h3>
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md4">
					<div style="background-color: #5FB878;">
						4
					</div>
				</div>
				<div class="layui-col-md4">
					<div style="background-color: #0000FF;">
						4
					</div>
				</div>
				<div class="layui-col-md4">
					<div style="background-color: #01AAED;">
						4
					</div>
				</div>

结果展示：
在这里插入图片描述

2.3列偏移

定义列偏移

<div class="layui-col-md4 layui-col-md-offset*"></div>//*代表的是列数

eg1：

<h3>列偏移</h3>
			<div class="layui-row">
				<div class="layui-col-md4">
					<div style="background-color: #5FB878;">
						4
					</div>
				</div>
				<div class="layui-col-md4 layui-col-md-offset4">
					<div style="background-color: #0000FF;">
						向右移动4列
					</div>
				</div>
			</div>

结果展示：
在这里插入图片描述

2.4列嵌套

  • 在列元素(layui-col-md*)中插入行元素(layui-row).
    eg1：
<h3>列嵌套</h3>
			<div class="layui-row">
				<div class="layui-col-md6">
					<div style="background-color: #5FB878;">
						<div class="layui-row">
							<div class="layui-col-md3" style="background-color: #40AFFE;">
								内部列
							</div>
							<div class="layui-col-md5" style="background-color: #00F7DE;">
								内部列
							</div>
							<div class="layui-col-md4" style="background-color: #8D8D8D;">
								内部列
							</div>
						</div>
					</div>
				</div>
			</div>

结果展示：
在这里插入图片描述

栅栏详细请查看官方文档：https://www.layui.com/doc/element/layout.html

3.基本元素

3.1按钮

  • 向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。
3.1.1用法
<button type="button" class="layui-btn">一个标准的按钮</button>		
		<a href="https://www.layui.com/doc/element/button.html" class="layui-btn">一个可跳转的按钮</a>
		<div class="layui-btn">一个按钮</div>

结果展示：
在这里插入图片描述

3.1.2主题
名称组合
原始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”

eg：

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

eg：

<!--不同主题的按钮-->
		<button class="layui-btn layui-btn-primary layui-border-green">原始按钮</button>
		<button class="layui-btn layui-btn-primary  layui-border-blue">百搭按钮</button>
		<button class="layui-btn layui-btn-primary layui-border-orange">暖色按钮</button>
		<button class="layui-btn layui-btn-primary layui-border-red">警告按钮</button>
		<button class="layui-btn layui-btn-primary layui-border-black">禁用按钮</button>

结果展示：
在这里插入图片描述

3.1.3尺寸
尺寸组合
大型class=“layui-btn layui-btn-lg”
默认class=“layui-btn”
小型class=“layui-btn layui-btn-sm”
迷你class=“layui-btn layui-btn-xs”
eg;

<!--不同尺寸的按钮-->
		<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>

结果展示：
在这里插入图片描述

尺寸组合
大型百搭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”

eg：

<!--不同尺寸的按钮-->
		<button class="layui-btn layui-btn-lg layui-btn-normal">大型百搭</button>
		<button class="layui-btn layui-btn-warm">正常暖色</button>
		<button class="layui-btn layui-btn-sm layui-btn-danger">小型警告</button>
		<button class="layui-btn layui-btn-xs layui-btn-disabled">迷你禁用</button>

结果展示：
在这里插入图片描述

	<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

在这里插入图片描述

3.1.4圆角按钮(layui-btn-radius)
<!--圆角按钮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>

结果展示：
在这里插入图片描述

3.1.5图标按钮
<!--图标按钮-->
		<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">&#1002;</i>刷新
		</button>
		<button type="button" class="layui-btn layui-btn-sm layui-btn-warm">
  		<i class="layui-icon layui-icon-heart"></i>关注
		</button>

结果展示：
在这里插入图片描述

图标详细请查看官方文档：https://www.layui.com/doc/element/icon.html
按钮详细请查看官方文档：https://www.layui.com/doc/element/button.html

serendipity_xr
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui.css如何使用,Layui 基本使用
weixin_42503645的博客
08-03 3234
介绍由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但个人认为该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。说白了，该框架就是为了方便后端人员开发前端而使用的。官方文档：https://www.layui....
Layui快速入门之第二节布局容器(固定宽度与完整宽度)
qq_61313896的博客
09-06 784
Layui快速入门之第二节布局容器(固定宽度与完整宽度)
layui.css 下载
08-20
layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。
前端LayUI框架快速上手详解(一)
最新发布
2401_84438488的博客
06-24 821
点击立即下载即可下载完成后解压，我们看以下其目录结构，并将其完整的拷贝到我们自己的项目下。LayUI的核心CSS文件LayUI的核心JS文件（采用模块化引入）LayUI的核心CSS文件你的 HTML 代码LayUI的核心JS文件2、布局2.1、布局容器。
Layui之入门
weixin_64313980的博客
07-08 1270
目录：一，关于Layui 1，什么Layui 2.layui，easyui与bootstrap的对比 2.1，layui和bootstrap对比（同属UI渲染框架） 2.2，layui和easyui对比 3，layui入门 3.1路径问题二，自定义模块三，json回顾四，layui实现登陆 4.1，构建实现登陆 4.2，主页搭建 使用参考网址进入网
前端学习之LayUi框架基础
人在江湖飘，哪能不挨刀
09-02 2116
今天笔者学习了LayUi框架的一些基础内容，总体来说，LayUi框架比BootStrap框架更倾向于后台的搭建和使用，样式更加多样，说明也对国人更加友好，毕竟是国人开发的框架嘛~废话不多少，开始介绍。 LayUI 的介绍 Layui（谐音：类UI) 是⼀款采用自身模块规范编写的前端 UI 框架，遵循原生HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。 由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和 BootStrap有些相似，但该框架有个极大的好处就.
LayUI的使用，资源包
07-10
1. **基本结构**：LayUI的HTML结构通常包含`layui-container`作为容器，内部使用`layui-row`和`layui-col`进行栅格布局。通过调整`layui-col`的类名，可以实现响应式设计，适应不同设备屏幕。 2. **样式表与...
Layui各常用组件使用方法简单示例
12-14
- **布局（Layout）**：Layui提供了栅格系统和流式布局，适应不同屏幕尺寸的设备。 - **表格（Table）**：支持数据加载、排序、筛选、分页等功能，适用于展示大量结构化的信息。 - **按钮（Button）**：提供多种...
layui官方文档 官网页面
10-31
8. layui布局：layui的layout模块允许开发者轻松实现复杂的页面布局，通过栅格系统和容器控制，可以快速搭建多列、响应式的页面结构。 9. layui扩展：layui社区还开发了众多第三方模块，如图表插件、富文本编辑器等...
layui表格 列自动适应大小失效的解决方法
10-16
5. **使用layui的API**：layui提供了`resize`方法，可以在窗口大小改变时手动调用来更新表格布局。例如： ```javascript window.onresize = function(){ layui.table.resize(); // 调整表格大小 }; ``` 6. **...
layui开发文档2.5.6.7z
10-13
1. 页面布局：layui提供流式、栅格等多种布局方式，适应不同设备和屏幕尺寸。 2. 表单：layui的表单组件包括输入框、单选、多选、下拉选择、日期选择等，支持验证功能。 3. 表格：支持动态加载、分页、排序、过滤等...
layui.css
kins10100的博客
07-29 291
【代码】【无标题】
Layui快速入门之第三节栅格布局
qq_61313896的博客
09-06 1763
Layui快速入门之第三节栅格布局
layui.css如何使用,layui框架如何使用使用
weixin_33840959的博客
08-03 1483
摘要：layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML CSS JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。 layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。...
LayUi基础入门【附有案例从0到1详解】
m0_74315688的博客
07-11 4343
不怎么怎么使用LayUi？一篇文章保姆级教学，让你一秒学会使用LayUi！！
LayUi入门
m0_65774688的博客
07-08 1236
layui入门
layui 如何动态加载局部页面_layui的使用说明
weixin_39805119的博客
11-19 914
一、定义layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，跟其他UI框架比较（比如bootstrap、easyui、findui、topui等等），门槛极低，拿来即用。1、与其他UI对比1.1 layui与easyuieasyui是功能强大但是有很多的组件使用功能是十分强大的，而layui是2016年才出来的前端框架，现在才更新到2.x版...
layui框架（layui简介和form表单的样式添加）
q_2540638774的博客
12-09 5977
一、layui简介 1、 layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆...
如何引入layui.css,正确引入Layui模块
weixin_36075067的博客
08-04 2842
Layui 出蛋于2016年金秋，是一款带着浓烈情怀的国产前端UI框架，她追求极简，又不失丰盈的内在，说她是史上最轻量的结晶，似乎并不为过。一切都源自于她对原生态的执着，对前端社区的那些噪杂声音的过滤，以及她本身的精心雕琢引入所有浏览器在加载的时候会加载一个较大的layui.all.js文件然后会把每个模块暴露出去，直接用就可以了但你必须知道，这种使用方式，意味着Layui的模块化已经失去了它的意...
QT 使用栅格布局 按钮变形
06-06
当使用Qt中的栅格布局（QGridLayout）时，如果按钮被压缩过度，可能会导致按钮变形。这通常是由于栅格布局中某些行或列的大小没有设置得足够大，以适应按钮的大小。 要解决这个问题，可以尝试以下几个步骤： 1. 检查栅格布局中每行和每列的大小是否足够大，以适应按钮的大小。可以使用`setColumnMinimumWidth`和`setRowMinimumHeight`函数来设置最小宽度和高度。 2. 如果按钮的大小受到其文本内容的影响，请尝试使用`setSizePolicy`函数来设置按钮的大小策略。可以使用`QSizePolicy::Expanding`选项来指定按钮应该尽可能地扩展，以适应其所在的单元格。 3. 如果以上步骤都没有解决问题，可以尝试使用QSS（Qt样式表）来进一步调整按钮的大小和布局。可以使用`padding`和`margin`属性来设置按钮周围的填充和边距，以及使用`min-width`和`min-height`属性来设置按钮的最小宽度和高度。 下面是一个示例代码，其中包含了一些上述步骤的实现： ```cpp QGridLayout* layout = new QGridLayout; QPushButton* button = new QPushButton("Button"); button->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding); // 设置按钮的大小策略 layout->addWidget(button, 0, 0); // 将按钮添加到栅格布局中的第一行第一列 layout->setColumnMinimumWidth(0, 100); // 设置第一列的最小宽度为100像素 layout->setRowMinimumHeight(0, 50); // 设置第一行的最小高度为50像素 // 使用QSS来设置按钮的最小宽度和高度，以及填充和边距 button->setStyleSheet("QPushButton {" " min-width: 100px;" " min-height: 50px;" " padding: 10px;" " margin: 10px;" "}"); ``` 希望这些步骤可以帮助您解决按钮变形的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值