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

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

平板≥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 来达到目的

• 如果需要的间距高于30px（一般不常见），我们需要采用列偏移

2.2.4、列偏移

• 对列追加类似 layui-col-md-offset* 的预设类，从而让列向右偏移

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

• 如 layui-col-md-offset3 ，即代表在 中型桌面屏幕下，让该列向右偏移3个列宽度。

列偏移

4

向右移动4列

2.2.5、列嵌套

• 列之间可以无限嵌套列

内部列

内部列

内部列

3、按钮

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

3.1、按钮风格

---

• 向任意 HTML 元素设定 class="layui-btn" ，建立一个基础按钮。

• 通过追加样式为 class="layui-btn-{type}" 来定义其他按钮风格

| 名称 | 组合 |

| — | — |

| 原始 | 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" |

一个标准的按钮 一个可跳转的按钮

一个按钮

---

默认按钮 原始按钮 百搭按钮 暖色按钮 警告按钮 禁用按钮

3.2、按钮尺寸

---

| 尺寸 | 组合 |

| — | — |

| 大型 | class="layui-btn layui-btn-lg" |

| 默认 | class="layui-btn" |

| 小型 | class="layui-btn layui-btn-sm" |

| 迷你 | class="layui-btn layui-btn-xs" |

| 流体按钮(最大化适应) | class="layui-btn layui-btn-fluid" |

大型原始按钮 默认按钮 小型警告按钮 迷你按钮 流体按钮（最大化适