介绍

什么是 AdminLTE？

AdminLTE 是一个免费的、基于 MIT 许可证的后台管理面板模板，基于 Bootstrap 5.3.8 构建，使用原生 TypeScript（无 jQuery）。它提供了响应式布局、侧边栏导航系统、亮色/暗色/自动颜色模式、RTL 支持，以及不断增加的示例页面——日历、看板、聊天、文件管理器、发票、个人资料、设置等。

它是一个模板，而不是组件库。将代码放在项目（或框架模板）中，并自定义所需部分。Bootstrap 5 负责组件；AdminLTE 提供应用外壳。

如果您从未使用过 AdminLTE，请从入门指南入手——它会在十分钟内带您完成一个可用的仪表盘。

安装方式

有以下安装方式：

方式	适用场景	配置时间
CDN	原型构建、演示、简单站点	1 分钟
npm + 打包工具	生产应用、框架项目（Laravel、Symfony、Rails）	5 分钟
从源码构建	需要自定义 SCSS 变量、侧边栏宽度、breakpoint	10 分钟
Composer	偏好 Packagist 而非 npm 的 PHP 项目	2 分钟

CDN — 最快

将以下 4 个 CSS 标签放入 <head> 中，将 4 个脚本标签放在 </body> 之前。无需安装，无需构建步骤：

<!-- 在 <head> 中 -->
<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> 之前 -->
<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>

然后将任意演示页面的 HTML 复制到您自己的文件中。有关最小可用布局，请参阅入门指南。

npm + 打包工具

需要 Node.js 18+ 和打包工具（Vite、Webpack、Rollup、esbuild 等）。

npm install admin-lte@4.0.0

然后在应用入口点中导入 CSS 和 JS：

// CSS
import "admin-lte/dist/css/adminlte.min.css"
// 添加 Bootstrap 和依赖 CSS
import "bootstrap-icons/font/bootstrap-icons.css"
import "overlayscrollbars/styles/overlayscrollbars.css"

// JS
import "bootstrap"
import "admin-lte"

Yarn 和 pnpm 的使用方式相同——将安装命令替换为 yarn add 或 pnpm add。

从源码构建

如果您想自定义 SCSS 变量（侧边栏宽度、breakpoint、品牌颜色），请克隆仓库并在本地构建：

git clone https://github.com/ColorlibHQ/AdminLTE.git
cd AdminLTE
npm install
npm run dev          # 开发服务器，支持热重载，地址为 localhost:3000
npm run production   # 生产环境构建（执行清理、代码检查与编译）

编译后的输出文件位于 dist/。编辑 src/scss/_variables.scss 或 src/scss/_bootstrap-variables.scss，然后重新运行构建。有关变量调整的问题，请参阅自定义与主题。

Composer

适用于 PHP 项目：

composer require "almasaeed2010/adminlte=4.0.0"

该包从相同的源码树发布——您可以直接使用 dist/ 文件夹。

前置要求

	最低要求	推荐版本
Bootstrap	5.3.0	5.3.8 (锁定在 `package.json` 中)
Node.js	18 LTS	22 LTS (CI 使用)
浏览器	现代浏览器	最新稳定版 Chrome/Firefox/Safari/Edge

AdminLTE 4 不支持 Internet Explorer。如果您需要 IE11，请继续使用 AdminLTE 3 或更早版本。

接下来去哪里

入门指南 — 十分钟内完成一个可用仪表盘
布局 — 应用外壳结构和响应式选项
自定义 — 更改颜色、侧边栏宽度、间距
从 v3 迁移 — 升级现有的 AdminLTE 3 项目

版本发布和更新日志

请始终从 GitHub 发布页面获取最新版本——更新日志就在那里。

旧版本: AdminLTE 3.2 · AdminLTE 2 · AdminLTE 1