layui基础-页面元素

最新推荐文章于 2024-06-24 23:23:11 发布

langao_

最新推荐文章于 2024-06-24 23:23:11 发布

阅读量2.7k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/langao_q/article/details/85111966

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.layui简介

采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。贤心大佬专门给后端开发写的框架

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

1>目录结构：

  ├─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文件夹的所有内容到项目中

第二步：导入layui的css和js文件，然后加载你要使用的各个模块

<link rel="stylesheet" href="../layui/css/layui.css">
		<script src="../layui/layui.js"></script>
		<script>
			//一般直接写在一个js文件中
			layui.use(['layer', 'form'], function() {
				var layer = layui.layer,
					form = layui.form;
			});
		</script>

3>一个例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>layui的hello</title>
		<link rel="stylesheet" href="../layui/css/layui.css">
	</head>

	<body>
		<script src="../layui/layui.js"></script>
		<script>
			//一般直接写在一个js文件中
			layui.use(['layer', 'form'], function() {
				var layer = layui.layer,
					form = layui.form;
				layer.msg('Hello 杨宇莹');
			});
		</script>
	</body>
</html>

2.栅格布局：layui-container、layui-row、layui-col-md*

将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，在移动设备（xs）、平板（sm）、桌面中（md）/大尺寸（lg）四种不同的屏幕下发挥着各自的作用

1>将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控；当然，你还可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应

		<div class="layui-container">
			常规布局（以中型屏幕桌面为例），额外加了一个平板屏幕下的布局
			<div class="layui-row">
				<div class="layui-col-md9 layui-col-sm6 a1">//a1、a2是自定义的style，只定义了背景颜色
					你的内容 md9/12
				</div>
				<div class="layui-col-md3 layui-col-sm6 a2">
					你的内容 md3/12
				</div>
			</div>
		</div>

2>列间距：layui-col-space*（*代表着列间距的数组：px）

通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。

<div class="layui-row layui-col-space10">
  <div class="layui-col-md4">
    1/3
  </div>
  <div class="layui-col-md4">
    1/3
  </div>
  <div class="layui-col-md4">
    1/3
  </div>
</div>

3>列偏移：layui-col-md-offset*

列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。

<div class="layui-row">
  <div class="layui-col-md4">
    4/12
  </div>
  <div class="layui-col-md4 layui-col-md-offset4">
    偏移4列，从而在最右
  </div>
</div>

4>栅格嵌套

		<div class="layui-container">
			<div class="layui-row layui-col-space5">
				<div class="layui-col-md5">
					<div class="layui-row grid-demo a1">
						<div class="layui-col-md3 a2">
							内部列
						</div>
						<div class="layui-col-md9 a2">
							内部列
						</div>
						<div class="layui-col-md12 a2">
							内部列
						</div>
					</div>
				</div>
				<div class="layui-col-md7">
					<div class="layui-row grid-demo grid-demo-bg1">
						<div class="layui-col-md3 a2">
							内部列
						</div>
						<div class="layui-col-md5 a2">
							内部列
						</div>
						<div class="layui-col-md4 a2">
							内部列
						</div>
					</div>
				</div>
			</div>
		</div>

3颜色

常用主色、场景色、极简中性色等都可以直接使用即可，下面是内置背景色css类

赤色：class="layui-bg-red"
橙色：class="layui-bg-orange"
墨绿：class="layui-bg-green"
藏青：class="layui-bg-cyan"
蓝色：class="layui-bg-blue"
雅黑：class="layui-bg-black"
银灰：class="layui-bg-gray"

4.图标

通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标，然后对元素加上图标对应的 font-class

<i class="layui-icon layui-icon-face-smile"></i>   

//可以定义它的大小和颜色
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>

5.动画

直接对元素赋值动画特定的 class 类名即可。

其中 layui-anim 是必须的，后面跟着的即是不同的动画类
<div class="layui-anim layui-anim-up"></div>
 
循环动画，追加：layui-anim-loop
<div class="layui-anim layui-anim-up layui-anim-loop"></div>

6.按钮

向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

<button class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>

7.表单

在一个容器中设定 class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。

注意：必须要加载from模块（如果要加载其他模块直接在数组中添加，然后在form后再添加即可）

			layui.use(['layer', 'form'], function() {
				var layer = layui.layer,
					form = layui.form;

2>表单监听提交

  //监听提交，一般是监听提交按钮（formDemo就在提交按钮上）
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));//弹出填写的数据
    return false;//阻止表单提交
  });

langao_

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
layui基础-页面元素

1.layui简介采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。贤心大佬专门给后端开发写的框架官网：https://www.layui.com/1&gt;目录结构： ├─css //css目录 │ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：） │ │ ...
复制链接

扫一扫

专栏目录