AdminLTE 后台模板上手指南：基于 Bootstrap 5 快速搭建响应式管理界面-二趣网

AdminLTE 后台模板上手指南：基于 Bootstrap 5 快速搭建响应式管理界面

【免费下载链接】AdminLTEAdminLTE - Free admin dashboard template based on Bootstrap 5项目地址: https://gitcode.com/GitHub_Trending/ad/AdminLTE

AdminLTE 是一款基于 Bootstrap 5 的免费后台管理模板，解决的是"后台系统界面从零写起太慢"的问题。它提供完整的侧边栏、顶栏、卡片、表格等现成结构，并支持从小手机屏到大桌面的自适应布局，所有 JS、SCSS、HTML 文件都带清晰注释，适合直接当作企业后台项目的起点。

三步跑通 AdminLTE 本地演示

环境要求只有一个：Node.js 14 或更高版本。先把仓库克隆下来：

git clone https://gitcode.com/GitHub_Trending/ad/AdminLTE cd AdminLTE

然后依次执行两条命令。第一条安装依赖：

npm install

第二条启动开发模式：

npm run dev

浏览器会自动打开http://localhost:3000，这就是内置的演示站点，全部示例页面都能在线点。开发模式下改 SCSS 和 TS 文件会自动重新编译，不用手动刷新构建。如果后续要打正式包，用npm run production即可，它会清理、lint 并把 CSS/JS 编译到dist/目录。

看懂目录：src 下的四个关键位置

打开仓库你会发现演示站点和源码是分开的，主要看这几个地方：

src/html/pages/：所有示例页面，按功能分目录，widgets/是小部件，layout/是布局变体，examples/是登录、注册、锁屏这类独立页面。
src/html/components/：可复用的页面骨架，dashboard/下的_topbar.astro、_sidenav.astro、_footer.astro就是顶栏、侧边栏和页脚，docs/下还有对应文档。
src/scss/：全部样式源码，入口是adminlte.scss，按模块拆成_app-sidebar.scss、_cards.scss等文件。
src/ts/：交互逻辑的 TypeScript 源码，adminlte.ts里统一导出了 Layout、PushMenu、TreeView、DirectChat、CardWidget、FullScreen 六个模块，分别对应布局计算、侧边栏抽屉、菜单树、直聊、卡片按钮和全屏。

从三个仪表盘 Demo 里挑起点

src/html/pages/下的index.astro、index2.astro、index3.astro是三套风格不同的仪表盘首页，展示卡片、图表、列表等组合方式，做新项目时直接挑一套最接近你需求的页面复制改造，比对着文档从零拼要快得多。

小部件页面值得单独看一眼：widgets/small-box.astro是统计数字盒，widgets/info-box.astro是图标信息块，widgets/cards.astro则是卡片组件全家福，后台首页常用的数据展示块基本都能在这里找到现成写法。

主题色和暗色模式该改哪里

自定义样式集中在一处：src/scss/_variables.scss。文件开头定义了$lte-prefix（默认lte-），侧边栏宽度$lte-sidebar-width（默认 250px）、过渡速度、间距等都以$lte-前缀的变量暴露出来，改这里的值再重新编译，全局风格就会跟着变。

暗色模式不需要自己写颜色，模板直接复用了 Bootstrap 5 的主题机制：给侧边栏或页面节点加上data-bs-theme="dark"即可切换，暗色下的变量覆盖在src/scss/_variables-dark.scss里。顶栏里的主题切换按钮（Light / Dark / Auto）写法在src/html/components/docs/color-mode.mdx中，会把用户选择存进 localStorage，可以整段抄走。

换布局只需改 body 上的类

AdminLTE 的布局差异几乎都体现在<body>的 class 上，对着示例页抄组合就行：

固定侧边栏：加layout-fixed，参考src/html/pages/layout/fixed-sidebar.astro；
迷你侧边栏：追加sidebar-mini，小屏下侧边栏收缩成图标列，参考layout/sidebar-mini.astro；
RTL 布局：把<html>标签加上dir="rtl"，并引用编译出的.rtl.css，参考layout/layout-rtl.astro；
顶栏/页脚固定、换 Logo、非固定侧边栏等变体都在src/html/pages/layout/目录下，每个文件只改一个点，非常好对照。

页面内部的交互则靠data-属性驱动，比如侧边栏抽屉按钮写data-lte-toggle="sidebar"，菜单树写data-lte-toggle="treeview"并可用data-accordion控制是否手风琴，属性含义和src/ts/里的模块一一对应。

常见坑与下一步建议

版本是 beta：package.json里版本号为 4.0.0-beta3，属于 4.x 开发阶段，生产环境使用前留意 API 还可能有调整。
端口冲突：npm run dev的演示服务固定跑在 3000 端口（package.json的docs-serve脚本里写死），被占用时手动改端口。
插件样式不跟 CSS 走：AdminLTE 只管自己模板的样式，Bootstrap 之外的第三方插件需要各自引入样式文件。
只想要成品不想看源码：直接跑npm run production，dist/里就是可直接部署的 css/js/html。

下一步建议：先把generate/theme.astro对应的主题生成页逛一遍确认配色，再挑一个 index 页面改成自己的业务结构；想深入交互细节就去src/ts/逐个读六个模块，代码量不大，注释齐全。

【免费下载链接】AdminLTEAdminLTE - Free admin dashboard template based on Bootstrap 5项目地址: https://gitcode.com/GitHub_Trending/ad/AdminLTE

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析