前端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"

|

| 流体按钮(最大化