Layui 入门：布局、导航与栅格 · jQuery 与 Layui 实战

第 7 章 · Layui 入门：布局、导航与栅格

本章目标：理解 Layui 的定位与适用场景；掌握目录结构、layui.js/css 引入与 layui.use 模块化加载；用栅格与 layui-layout-admin 搭建 admin-demo 后台骨架；实现顶部导航、侧边菜单、面包屑与侧栏折叠。

学时建议：3 小时（含 60 分钟跟练）

前置：本模块 ch01～ch06（jQuery 选择器、DOM、事件、Ajax）；建议已浏览示例电商后台 admin-demo 任意列表页。

7.1 Layui 是什么、适用哪些场景

Layui 是一套面向后台管理系统的前端 UI 框架（国人开源，MIT 协议）。它把后台最常见的「布局 + 表单 + 表格 + 弹层」打包成声明式 HTML + 少量 JS 配置，与 jQuery 深度集成，学习曲线平缓。

维度	Layui	Vue3 + Element Plus
心智模型	页面级、DOM 驱动	组件化、响应式数据
上手速度	极快（1～2 天可出列表页）	需先学框架基础
工程化	传统多页 / iframe 嵌套	SPA、Vite、路由
维护成本	页面增多后 JS 易膨胀	模块化、类型约束
典型用户	内网 ERP、运维台、老项目	新商户后台、中台

适用场景（推荐）：

快速交付内网后台、运营工具、数据录入页
团队以 jQuery 为主、暂无 SPA 基建
在行业常见 Layui 商户后台中维护存量页面（product-list.html、sku-list.html 等）
教学：admin-demo 用 Layui 搭 MVP，再对照 frontend-framework 做 Vue 迁移

不太适合：

复杂单页应用（大量路由与状态共享）
强交互 C 端（动画、手势、离线）
需要 Tree-shaking 极致体积的移动端 H5

行业常见做法：大量内网商户后台列表页仍基于 Layui table + layer；新功能优先 Vue3，Layui 页作为联调与迁移参照。本章 admin-demo 布局对标典型「侧栏 + iframe 子页」后台骨架。

admin-demo/
├── index.html              # 登录页
├── pages/
│   ├── dashboard.html      # 仪表盘（iframe 子页）
│   ├── product-list.html   # 商品列表
│   └── order-list.html     # 订单列表
├── layui/
│   ├── layui.js
│   ├── css/layui.css
│   └── font/               # 图标字体
├── js/
│   ├── admin.js            # 侧栏折叠、tab 切换
│   └── config.js           # API 基址、CSRF
└── css/
    └── admin-custom.css    # 主题色覆盖

Layui 无需 npm 安装即可教学；生产环境可将 layui 放 static/ 并由服务端 {% static %} 引用（行业常见做法）。

7.2 目录结构与静态资源引入

7.2.1 官方目录（admin-demo 推荐）

目录结构见上文 7.1 节代码块。

7.2.2 页面引入顺序

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>admin-demo · 电商商户后台</title>
  <!-- ① Layui 样式（必须） -->
  <link rel="stylesheet" href="../layui/css/layui.css">
  <!-- ② 自定义样式在 Layui 之后，便于覆盖 -->
  <link rel="stylesheet" href="../css/admin-custom.css">
</head>
<body>
  <!-- ③ 页面结构 -->

  <!-- ④ jQuery（遗留项目常见 1.12.x 或 2.x；Layui 内置 jquery 模块可二选一） -->
  <script src="../js/jquery-3.7.1.min.js"></script>
  <!-- ⑤ layui.js 放 body 底部 -->
  <script src="../layui/layui.js"></script>
  <script src="../js/admin.js"></script>
</body>
</html>

顺序	原因
CSS 在 head	避免 FOUC
JS 在 body 末	DOM 已就绪
自定义 CSS 在 layui.css 后	覆盖 `.layui-btn` 等默认色

7.2.3 `layui.config` 与扩展模块

layui.config({
  base: '../layui/ext/',   // 自定义模块目录
  version: '20260819'     // 清缓存
});

教学项目一般只用官方模块；企业可在 ext/ 放 xzHttp.js 统一 Ajax 错误处理（ch11 展开）。

7.3 `layui.use` 模块化加载

Layui 通过 layui.use 按需加载模块，避免全局污染。

layui.use(['element', 'layer', 'jquery'], function () {
  var element = layui.element;  // 导航、Tab、折叠
  var layer   = layui.layer;      // 弹层
  var $       = layui.jquery;     // 与页面 jQuery 一致

  // 侧栏折叠后重算布局
  element.on('nav(side)', function (elem) {
    console.log('点击菜单', elem);
  });
});

模块	职责	admin-demo 用途
`element`	导航、Tab、折叠面板	侧栏、顶栏 Tab
`layer`	消息、弹窗	操作反馈
`form`	表单渲染与校验	搜索区（ch08）
`table`	数据表格	商品/订单列表（ch09）
`upload`	上传	商品图（ch10）
`laydate`	日期	订单筛选
`jquery`	DOM/Ajax	与 ch01～ch04 技能衔接

注意：layui.use 回调内变量勿泄露到全局；多页面各自 use 即可，无需打包器。

7.4 栅格系统：layui-row / layui-col

Layui 栅格基于 12 列，与 Bootstrap 类似，适合后台表单与卡片排版。

<div class="layui-row layui-col-space15">
  <div class="layui-col-md3 layui-col-sm6">
    <div class="layui-card">
      <div class="layui-card-header">今日订单</div>
      <div class="layui-card-body">128</div>
    </div>
  </div>
  <div class="layui-col-md3 layui-col-sm6">
    <div class="layui-card">
      <div class="layui-card-header">待发货</div>
      <div class="layui-card-body">23</div>
    </div>
  </div>
  <div class="layui-col-md3 layui-col-sm6">
    <div class="layui-card">
      <div class="layui-card-header">库存预警</div>
      <div class="layui-card-body">5</div>
    </div>
  </div>
  <div class="layui-col-md3 layui-col-sm6">
    <div class="layui-card">
      <div class="layui-card-header">本月营收</div>
      <div class="layui-card-body">¥ 86,420</div>
    </div>
  </div>
</div>

类名	说明
`layui-row`	行容器
`layui-col-space15`	列间距 15px
`layui-col-md3`	≥992px 时占 3/12
`layui-col-sm6`	≥768px 时占 6/12（平板两列）
默认 <768px	单列堆叠

仪表盘跟练：在 pages/dashboard.html 放 4 张统计卡片 + 一行 layui-col-md8 图表占位 + layui-col-md4 公告列表。

7.5 后台布局：`layui-layout-admin`

layui-layout-admin 是 Layui 为后台定制的五区域布局：

┌──────────────────────────────────────────────────────────┐
│ layui-header          Logo + 顶栏导航 + 用户区            │
├────────────┬─────────────────────────────────────────────┤
│ layui-side │ layui-body                                  │
│ 侧栏菜单   │  ┌─ layui-tab（可选多页签）                  │
│            │  │  iframe / 内嵌内容                        │
│            │  └────────────────────────────────────────  │
├────────────┴─────────────────────────────────────────────┤
│ layui-footer（可选）                                      │
└──────────────────────────────────────────────────────────┘

7.5.1 admin-demo 主框架 `index-layout.html`

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
  <div class="layui-logo layui-hide-xs">admin-demo</div>

第 7 章 · Layui 入门：布局、导航与栅格

7.1 Layui 是什么、适用哪些场景

7.2 目录结构与静态资源引入

7.2.1 官方目录（admin-demo 推荐）

7.2.2 页面引入顺序

7.2.3 layui.config 与扩展模块

7.3 layui.use 模块化加载

7.4 栅格系统：layui-row / layui-col

7.5 后台布局：layui-layout-admin

7.5.1 admin-demo 主框架 index-layout.html

以下内容需解锁后阅读

7.2.3 `layui.config` 与扩展模块

7.3 `layui.use` 模块化加载

7.5 后台布局：`layui-layout-admin`

7.5.1 admin-demo 主框架 `index-layout.html`