前端LayUI框架快速上手详解(一)

---

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

• 点击立即下载即可

• 下载完成后解压，我们看以下其目录结构，并将其完整的拷贝到我们自己的项目下。

• 使用时我们只需引入下述两个文件即可使用

• 这是一个基本的入门页面

2、布局

======================================================================

2.1、布局容器

---

2.1.1、固定宽度

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

• 固定宽度的两侧有留白效果

固定宽度（两侧有留白效果）

2.1.2、完整宽度

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

• 完整宽度占据屏幕宽度的100%

完整宽度(占据屏幕宽度的100%)

2.2、栅格系统

---

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

2.2.1、栅格布局规则

• 采用 class="layui-row" 来定义行，如：

• 采用类似 layui-col-md* 这样的预设类来定义一组列(column)，且放在行(row)中

• 变量 md 代表的是不同屏幕下的标记

• 变量 * 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12

• 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。

• 列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。

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

• 可以在列（column）元素中放入你自己的任意元素填充内容，完成布局！

示例：

内容5/12

内容7/12

内容4/12

内容4/12

内容6/12

2.2.2、响应式规则

• 简单来说，就是会针对四类不同尺寸的屏幕，进行响应式适配处理。

平板、桌面端的不同表现：

平板≥768px：6/12 | 桌面端≥992px：4/12

平板≥768px：4/12 | 桌面端≥992px：6/12

平板≥768px：12/12 | 桌面端≥992px：8/12

我们将屏幕尺寸切换为小屏幕平板尺寸

2.2.3、列间距

• 设定列之间的间距

• 且一行中最左的列不会出现左边距，最右的列不会出现右边距

• 列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。

• 给容器添加class="layui-col-space*"

• * 支持1px-30px区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔

列边距

4

4

4

注意：

• layui-col-space 设置后不起作用主要是因为设置的是 padding，也就是说向内缩，所以设置背景色 padding 也是会添上颜色，看起来好像没有间距一样。可以在里面加一个 div