1.layui简介

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

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

1>目录结构：

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

2>开始使用：

第一步：将下载后的layui压缩包解压，复制layui文件夹的所有内容到项目中

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

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

3>一个例子

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

	<body>
		<  src=\"../layui/layui.js\"></ >
		< >
			//一般直接写在一个js文件中
			layui.use([\' \', \'form\'], function() {
				var   = layui. ,
					form = layui.form;
				 .msg(\'Hello 杨宇莹\');
			});
		</ >
	</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>

 

 

 

 

 

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章