布局结构

每个 AdminLTE 页面都遵循相同的布局结构：一个包含页头、侧边栏、主内容区域和（可选）页脚的包装器。掌握这 4 个类的用法，是区分“踩坑”和“高效开发”的关键。

4 个区域
┌──────────────────────────────────────────┐
│  .app-wrapper                            │
│  ┌────────────────────────────────────┐  │
│  │  .app-header                       │  │ ← 顶部栏 / 导航栏
│  ├──────────┬─────────────────────────┤  │
│  │          │                         │  │
│  │  .app-   │   .app-main             │  │ ← 页面内容
│  │ sidebar  │                         │  │
│  │          │                         │  │
│  ├──────────┴─────────────────────────┤  │
│  │  .app-footer (可选)            │  │
│  └────────────────────────────────────┘  │
└──────────────────────────────────────────┘

包装器是一个 CSS 网格容器，四个子元素是网格区域。您不需要了解这些就能使用它——仅凭标记模式就足够了。

最小标记
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
  <div class="app-wrapper">
    <nav class="app-header navbar navbar-expand bg-body">…</nav>
    <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">…</aside>
    <main class="app-main">…</main>
    <footer class="app-footer">…</footer>
  </div>
</body>

.app-wrapper 内部的顺序无关紧要——网格模板通过类名定位每个子元素。按您觉得清晰的方式排列即可。

区域参考
.app-wrapper

根容器。定义定位页头、侧边栏、主内容和页脚的网格模板。始终直接位于 <body> 内部。

您可以在此处（或向上任意层级）添加 .compact-mode 来减少整个布局的内边距——适用于数据密集型的仪表盘。

.app-header

顶部栏。使用 Bootstrap 的导航栏类（navbar navbar-expand bg-body）来控制外观。侧边栏切换按钮位于页头中——使用 data-lte-toggle="sidebar" 进行绑定： 

<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
  <i class="bi bi-list"></i>
</a>

默认情况下，页头随页面滚动。在 <body> 上添加 .fixed-header 可将其固定。

.app-sidebar

侧边栏。始终包含两个子元素：.sidebar-brand（Logo/应用名称）和 .sidebar-wrapper（可滚动的导航区域）。 

<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
  <div class="sidebar-brand">
    <a href="/" class="brand-link">
      <span class="brand-text fw-light">我的仪表盘</span>
    </a>
  </div>
  <div class="sidebar-wrapper">
    <nav class="mt-2">
      <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu">
        <!-- 导航项目 -->
      </ul>
    </nav>
  </div>
</aside>

侧边栏上的 data-bs-theme="dark" 可实现演示中亮色页面配暗色侧边栏的效果。移除它则可获得亮色侧边栏。

.app-main

页面内容区域。几乎总是包含两个子元素：

<main class="app-main">
  <div class="app-content-header">
    <!-- 页面标题 + 面包屑 -->
  </div>
  <div class="app-content">
    <!-- 页面主体、卡片、表格、图表等。 -->
  </div>
</main>

.app-content-header 是标题区域——通常包含一个 <h3> 和面包屑导航。.app-content 是其下方的所有内容。两者都应将子元素包裹在 .container-fluid 中（或使用 .container 限制宽度）。

包装器底部的页脚区域：

<footer class="app-footer">
  <div class="float-end d-none d-sm-inline">Version 4.0.0</div>
  <strong>&copy; 2026 公司名称</strong>
</footer>

在 <body> 上添加 .fixed-footer 可将其固定在页面底部。

Body 级布局修饰符

布局行为主要由 <body> 上的类控制，而不是 .app-wrapper。支持的修饰符：

类名 作用
layout-fixed 侧边栏拥有自己的滚动条；只有 .app-main 随页面滚动
fixed-header 将 .app-header 固定在顶部；侧边栏也会固定（自 v4.0.0 起）
fixed-footer 将 .app-footer 固定在底部
sidebar-expand-{sm,md,lg,xl,xxl} 侧边栏从 off-canvas（移动端）切换为 inline（桌面端）的 breakpoint。演示中默认使用 lg
sidebar-mini 将侧边栏折叠为仅图标的小型状态
sidebar-mini sidebar-collapse 页面加载时侧边栏已处于折叠的小型状态
sidebar-without-hover 禁用迷你侧边栏的悬停自动展开行为
layout-rtl 为从右到左的语言镜像布局（还需要 .rtl.css 和 dir="rtl"——参见 RTL 支持）

这些类可以组合使用。演示仪表盘使用 class="layout-fixed sidebar-expand-lg bg-body-tertiary"——固定高度，桌面端侧边栏 breakpoint 为 lg（≥992px）。

布局变体演示

演示站点的 Layout 部分（/layout/*.html 文件）提供了十一种预构建组合：

响应式行为

在 sidebar-expand-* breakpoint 及以上，侧边栏为 inline 状态——在网格中与 .app-main 并排可见。低于 breakpoint 时，它变为 off-canvas 状态——默认隐藏，当用户点击汉堡菜单按钮时从左侧滑入。

移动端专用类：

类名 应用时机 效果
sidebar-open Body——当用户主动打开移动端侧边栏时 侧边栏带遮罩层从内容上方滑入
sidebar-collapse Body——当用户关闭移动端侧边栏时自动设置 隐藏侧边栏

这些由 PushMenu 插件管理——您无需自己编写。

常见问题
  • 忘记在 .app-content 内部添加 .container-fluid ——内容会紧贴屏幕边缘。请将内容卡片包裹在容器中。
  • 将侧边栏切换按钮放在 .app-header 外部 ——它仍然可以工作，但样式预期是放在导航栏上下文中。
  • 混用 .app-* 和 .main-* 类 ——.main-* 是 AdminLTE 3 的命名方式。不要将它们组合使用。参见从 v3 迁移。
  • 在 .app-main 内部的元素上使用 position: fixed ——layout-fixed 已经为 .app-main 设置了 overflow: auto。使用 position: fixed 的子元素可能会出现意外行为。请改用粘性定位。
  • 在自定义 CSS 中硬编码侧边栏宽度 ——侧边栏宽度通过 SCSS 变量 $lte-sidebar-width 暴露。如果需要在 JavaScript 中获取它，请读取渲染后的 .app-sidebar 元素的计算宽度。
接下来去哪里