FAQ

常见问题

需要帮忙吗?

最常被问到的 24 个问题,快速解答。 使用搜索功能跳转至任意内容,或点击下方主题。

没有找到与您搜索匹配的问题。请尝试其他关键词,或 发起讨论.

入门指南

5 个问题

AdminLTE 到底是什么?
一个免费的、MIT 许可的管理后台模板。它是一套基于 Bootstrap 5.3 构建的 HTML、CSS 和 JavaScript 文件——不是框架,也不是 npm 组件库。你只需将它放入你的项目,修改标记以适配你的应用,然后发布即可。
使用它需要构建步骤吗?
不需要。入门指南展示了纯 CDN 方式——将四个 <link> 标签和四个 <script> 标签复制到你的 HTML 中就完成了。如果你想要自定义 SCSS 变量或对 JavaScript 进行摇树优化,也可以使用基于 npm 的工作流。
v4 需要哪个版本的 Bootstrap?
Bootstrap 5.3.x。当前 package.json 锁定为 5.3.8——更早的 5.3 小版本应该也能用,但未经测试。Bootstrap 5.0 / 5.1 / 5.2 将无法使用(颜色模式和 data-bs-theme 系统是在 5.3 中引入的)。
我可以在 AdminLTE 4 中使用 jQuery 吗?
你不需要 jQuery —— AdminLTE 4 的 JavaScript 是原生的。如果你现有的应用本来就在用 jQuery,两者可以和平共处。但 AdminLTE 4 自己的插件没有一个会调用 jQuery,也没有 $.fn.xxx() 这类插件挂载。

v3 的 plugins/ 文件夹同样没了。它当年打包的每个组件都有对应的原生 JS 继任者——完整的对应关系见插件替代对照表(Select2 → Tom Select、DataTables → Tabulator、Summernote → Quill,等等)。
AdminLTE 4 支持 Select2 吗?
AdminLTE 4 建议改用 Tom Select。大家平时用 Select2 想做的事,它全都能干 —— 可搜索下拉框、多选、打标签、可清除的选择项、AJAX 加载选项、大数据集下的虚拟滚动、键盘导航 —— 而体积大约只有 20 kB gzip,Select2 算上 jQuery 之后大约是 ~50 kB。forms/advanced.html 把这些都演示了一遍,包括一个带请求取消的分页远程数据字段;如果你要移植现有代码,还有一份逐行 API 对照。

下拉菜单2 本身仍在维护(4.1.0 于 2026 年发布),但它依然是个 jQuery 插件 —— 它的 UMD 包装强制依赖 jQuery,也没有不依赖 jQuery 的构建版本。把它打包进来,等于把 jQuery 又塞回一个整个 v4 前提就是“不需要 jQuery”的框架里,而且官方的 Vue/React/Django/Laravel 移植版没一个能用它。

如果你就是被 Select2 锁死了,AdminLTE 提供了一个可选的 纯样式兼容样式表 —— 见 下拉菜单2 兼容主题。插件你自己带;它能让 Select2 跟 Bootstrap 5.3 保持一致,深色模式和模态框也都涵盖在内。AdminLTE 本身不会引入 jQuery。
AdminLTE 可以用于 WordPress 吗?
可以——它只是 HTML/CSS/JS。典型的做法是构建一个自定义 WordPress 主题,将 AdminLTE 的标记包裹在 wp_head()、wp_footer() 和 WordPress 循环周围。AdminLTE 不提供针对 WordPress 的专用构建版本;移植导航 Walker 类和认证表单的工作需要由你来完成。
Laravel?Symfony?Yii?Django?Rails?
都可以使用。AdminLTE 是一个服务端渲染模板——将演示页面复制到你的视图/模板中,将静态内容替换为你框架的模板变量,然后像往常一样配置路由/认证即可。社区中有针对 Laravel 和 Symfony 的 Composer/Packagist 包,但它们通常会落后于上游版本——在依赖它们之前,请先确认它们提供的是 v4 版本。
React, Vue, Svelte, Angular?

可以使用但不太自然。AdminLTE 的 JavaScript 插件使用 DOM 生命周期钩子(DOMContentLoaded、MutationObserver 模式),这些会与框架的协调机制产生冲突。如果你使用 SPA 框架,请考虑:

  • 仅将 AdminLTE 用于 CSS——保留视觉风格,但为交互部分自行编写 React/Vue 组件。
  • 或者选择专为你的框架构建的组件库(PrimeReact、Vuetify 等)。

我们不建议将 AdminLTE 的 jQuery 时代插件封装在 SPA 框架组件中——这会带来维护负担,得不偿失。

定制

4 个问题

如何更改主色?

在 :root 中覆盖 --bs-primary(及其对应的 RGB 值):

:root {
  --bs-primary: #6610f2;
  --bs-primary-rgb: 102, 16, 242;
}

如需更深层控制(侧边栏宽度、breakpoint、间距比例),请参阅自定义与主题。

v3 里那些颜色都去哪了 —— bg-navy、bg-teal,还有侧边栏皮肤?我能加自己的品牌色吗?

它们放在一个需要主动引入的样式表里,也就是 dist/css/adminlte-colors.css(gzip 后约 5 kB),所以只要你不加载它,就不会有任何额外开销:里面是十四种重新设计过的颜色 —— 每一种都能配白色文字清晰阅读 —— 并且带齐了 .bg-*、.text-bg-*、.card-*、.callout-*、.bg-gradient-* 这几整套系列。所谓侧边栏“皮肤”,其实就是 <aside class="app-sidebar text-bg-navy" data-bs-theme="dark">。

想要 AdminLTE 3 原封不动的颜色?那就改为加载 dist/css/adminlte-colors-v3.css —— 18 种 v3 颜色,沿用原来的名字和取值,类系列相同。你自己的颜色在 Sass 里一行就能搞定:$lte-palette-custom: ("brand": #0f766e)。所有东西 —— 调色板、预设、品牌色检查器 —— 都在 颜色 页面里;想现场试试皮肤,可以去 颜色演示 或 主题自定义 页面。

如何添加日期选择器 / 多选 / 富文本编辑器?
AdminLTE 刻意不捆绑这些组件——它们会使框架变得臃肿。推荐集成页面列出了一流的第三方库(Flatpickr、Tom Select、Quill 等),并附有可复制粘贴的安装代码片段。
我可以使用 FontAwesome 代替 Bootstrap Icons 吗?
可以。演示中默认使用 Bootstrap Icons,是因为它采用 MIT 许可、随 Bootstrap 一同提供,并且基于 SVG——但 AdminLTE 的 CSS 或 JS 中没有任何部分强制要求使用它。引入 FontAwesome 的样式表,然后将全文中的 <i class="bi bi-x"> 替换为 <i class="fas fa-x"> 即可。

版本与更新

3 个问题

我如何获取新版本的通知?
关注 GitHub 仓库(仅限 Releases 模式),或订阅 RSS 源:https://github.com/ColorlibHQ/AdminLTE/releases.atom。
AdminLTE 3 的文档在哪里?
仍然在线,地址为 adminlte.io/docs/3.2,更早版本的文档也在那里提供链接。GitHub 上的 v3 分支会继续接收关键错误修复;新功能仅会在 v4 中发布。
如何从 v3 升级到 v4?
请参阅专门的从 v3 迁移指南。简而言之:类名发生了变化(.wrapper → .app-wrapper),data-toggle → data-bs-toggle,深色模式使用 data-bs-theme 替代 .dark-mode,并且不再需要 jQuery。

许可

3 个问题

AdminLTE 可以免费用于商业用途吗?
可以——采用 MIT 许可。你可以将其用于商业产品、SaaS 应用、客户项目等任何场景。唯一的要求是在源文件(adminlte.css / adminlte.js)中保留版权声明。你不需要在界面中显示署名信息。
我需要在应用中注明 AdminLTE 的出处吗?
不需要。MIT 许可要求你在分发的源文件中保留许可声明——仅此而已。你不必在渲染后的界面、关于页面或 README 中提及 AdminLTE。
我可以销售使用 AdminLTE 制作的产品吗?
可以。MIT 许可明确允许这样做。你还可以转售 AdminLTE 本身的修改版本(主题市场经常这样做)——只需保留原始版权声明即可。

故障排除

6 个问题

点击侧边栏按钮,侧边栏没有收起。
请检查 PushMenu 插件是否已加载。它已捆绑在 adminlte.js 中——请确保该脚本标签在页面上,并且位于其操作的目标标记之后。同时,请确认你的汉堡按钮使用了 data-lte-toggle="sidebar"(而不是 v3 版本的属性 data-widget="pushmenu")。
深色模式在刷新后不会保持。
内置的明暗模式切换后会以 lte-theme 为键名写入 localStorage。如果你使用了不同的切换实现,请确保它既设置了 document.documentElement.setAttribute('data-bs-theme', ...),又在变更时写入 localStorage。
我自己设置的主题总是被 AdminLTE 覆盖。
用 <html data-lte-color-mode="off"> 关闭内置的切换器。此后 ColorMode 永远不会写入 data-bs-theme —— 加载时不会,点击切换开关时不会,操作系统偏好变化时也不会 —— 因此你自己的切换器(或自定义 Bootstrap 主题名)始终掌控全局。如果你只是想要一个服务端渲染的默认值,那就把 data-bs-theme 渲染到 <html> 上,只要访客自己尚未选择主题,它就会被遵循。参见 明暗模式。
按 ESC 键时 Bootstrap 模态框关闭了,但 AdminLTE 的侧边栏也同时收起了。
该问题已在 v4.0.0 中修复(#5993)。如果你仍然遇到此问题,说明你使用的是较旧的 RC 版本——请更新到最新版本。
我自定义的 SCSS 没有覆盖 AdminLTE 的默认值。
请将你的覆盖内容放在 AdminLTE 的 SCSS @import 之前。AdminLTE 在其变量上使用了 !default,这意味着首次声明的值生效。有关导入顺序,请参阅自定义与主题。
npm install 因 peer 依赖错误而失败。
我们在 package.json 中使用了 npm 的 overrides 区块来解决 peer 依赖问题——请确保你使用的 npm 版本为 8.3+,该版本支持此配置。如果你使用的是更旧的 npm 版本,请使用 --legacy-peer-deps 进行安装。

还需要帮助吗?

在 GitHub 上发起讨论, 或浏览文档以获取更深入的解答。