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

点击立即下载即可

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

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

这是一个基本的入门页面

2、布局

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

2.1、布局容器

2.1.1、固定宽度

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

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

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

2.1.2、完整宽度

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

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

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

2.2、栅格系统

<code>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 元素设定 <code>class="layui-btn"code> ，建立一个基础按钮。

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

| 名称 | 组合 |

| — | — |

| 原始 | class="layui-btn layui-btn-primary"code> |

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

| 百搭 | class="layui-btn layui-btn-normal"code> |

| 暖色 | class="layui-btn layui-btn-warm"code> |

| 警告 | class="layui-btn layui-btn-danger"code> |

| 禁用 | class="layui-btn layui-btn-disabled"code> |

一个标准的按钮

一个可跳转的按钮

一个按钮