入门指南
AdminLTE 是一个 HTML 模板——使用它不需要任何构建步骤。本页将带您在十分钟内完成一个可用的仪表盘，无需 npm，无需构建流程，无需学习 Astro。
如果您正在将 AdminLTE 集成到实际项目中，安装页面涵盖了 npm、Composer 和源码构建工作流。
1. 获取 CDN 代码片段
将这些标签复制到新 HTML 文件的 <head> 中。它们从 jsDelivr
拉取 AdminLTE、Bootstrap 5.3、Popper、OverlayScrollbars 和 Bootstrap
Icons——无需安装。
<!-- AdminLTE 4 + Bootstrap 5.3 (CSS) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0/dist/css/adminlte.min.css" />并将以下内容放在 </body> 之前：
<!-- Bootstrap + Popper + AdminLTE (JS) -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0/dist/js/adminlte.min.js"></script>2. 最小可用布局
这是最小的 AdminLTE 风格页面——包含头部、可折叠侧边栏和主内容区域。将其放在上述 CSS 和 JS 标签之间：
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper">
<!-- Header -->
<nav class="app-header navbar navbar-expand bg-body">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
<i class="bi bi-list"></i>
</a>
</li>
</ul>
</div>
</nav>
<!-- Sidebar -->
<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">
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="nav-icon bi bi-speedometer"></i>
<p>仪表盘</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-bar-chart"></i>
<p>报告</p>
</a>
</li>
</ul>
</nav>
</div>
</aside>
<!-- Main content -->
<main class="app-main">
<div class="app-content-header">
<div class="container-fluid">
<h3 class="mb-0">你好， AdminLTE</h3>
</div>
</div>
<div class="app-content">
<div class="container-fluid">
<div class="card">
<div class="card-header"><h5 class="card-title">欢迎</h5></div>
<div class="card-body">
编辑此文件以开始构建你的仪表盘。
</div>
</div>
</div>
</div>
</main>
</div>
</body>
在浏览器中打开它。左上角的汉堡按钮可以折叠侧边栏——这就是 AdminLTE 的
PushMenu 插件开箱即用的效果，通过
data-lte-toggle="sidebar" 进行绑定。
3. 实际原理
承担主要工作的 4 个类：
| 类名 | 作用 |
|---|---|
app-wrapper |
CSS 网格根容器——定义页头/侧边栏/主内容/页脚区域 |
app-header |
当 body 上添加 layout-fixed 时，固定在页面顶部 |
app-sidebar |
可折叠侧边栏。在 body 上添加
sidebar-expand-lg 可控制不同屏幕下展开或折叠
|
app-main |
可滚动内容区域——内容部分都在这里 |
布局页面涵盖了完整的包装器结构和响应式选项。
4. 添加一个可用的 JavaScript 小部件
AdminLTE 内置了 7 个 JavaScript 插件。它们全部通过
data-lte-* 属性进行绑定——无需编写 JavaScript 代码。
将以下代码放入内容区，查看卡片插件的效果（试试卡片标题中的按钮）：
<div class="card">
<div class="card-header">
<h5 class="card-title">可折叠卡片</h5>
<div class="card-tools">
<button type="button" class="btn btn-sm btn-tool" data-lte-toggle="card-collapse" aria-label="Collapse card">
<i data-lte-icon="expand" class="bi bi-dash-lg"></i>
<i data-lte-icon="collapse" class="bi bi-plus-lg"></i>
</button>
<button type="button" class="btn btn-sm btn-tool" data-lte-toggle="card-remove" aria-label="Remove card">
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>
<div class="card-body">
点击 -图标可 collapse; 点击 X 可删除。
</div>
</div>5. 接下来去哪里
您现在已拥有一个可用的 AdminLTE 页面。接下来：
- 美化它 → 自定义与主题 — 通过 SCSS 变量或 CSS 自定义属性更改颜色、字体和间距。
- 让它动起来 → JavaScript 插件 — 7 个插件的完整参考。
- 让它变暗 → 明暗模式 — 亮色/暗色/自动切换。
- 让它国际化 → RTL 支持 — 为阿拉伯语、希伯来语、波斯语等提供从右到左的布局。
- 添加真正的部件 → 推荐集成 — 日期选择器、多选、图表、富文本编辑器。AdminLTE 保持精简的依赖；本页告诉您需要引入哪些第三方库。
如果您正在升级现有 AdminLTE 3 项目，请查看从 v3 迁移指南，了解不兼容的变更。