1.创建项目

在左侧项目管理器中右键,新建->项目。

image.png

选择“普通项目”,选择“基本HTML项目”,输入项目名,“浏览”选择项目路径,最后点“创建”。

image.png

一个空项目就创建完成了。

image.png

2.下载 layui js 文件

进入 layui 官网:https://layui.dev/docs/2/,下载引用获取 layui。

image.png

image.png

image.png

下载后的 layui 压缩包解压后,把 layui 文件夹放在项目目录中。

image.png

image.png

3.项目引入 layui js 文件

引入 css 文件和 js 文件。

image.png

4.使用 layui 按钮组件

添加一个自适应宽度的按钮。

image.png

查看代码,复制对应的代码。

image.png

运行项目,使用 Chrome 浏览器打开。

image.png

layui 按钮组件就显示了。

image.png

5.使用栅格布局,居中按钮

layui-row:占一行; layui-col-md4:占 4 列; layui-col-md-offset4:列偏移 4 列。

image.png

image.png