HTML后台启动器

adminkit — HTML 后台模板

作者 adminkit

AdminKit 是一个基于 Bootstrap 5 的免费开源 HTML 后台与仪表盘模板,使用 MIT 许可,提供 15 个演示页面、响应式布局与 Webpack 构建流程。

看看你的网站会是什么样

浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局,交互效果请以实际项目为准。

采集于 2026-10-01查看来源

值得关注的模板亮点

从已有项目资料中,快速了解它的特点。

01

基于 Bootstrap 5 的 HTML 后台与仪表盘模板,采用 MIT 许可

02

免费版本提供 15 个演示页面、1 个插件和 1 套配色方案

03

不依赖 jQuery,模板及其使用的第三方库均无需 jQuery

04

包含自定义 Webpack 配置,支持开发服务器与生产构建

05

SCSS 按变量、混入、组件、工具类、第三方样式分层组织

06

支持通过 unpkg CDN 引入 @adminkit/core 的 CSS 与 JavaScript

模板详细介绍

AdminKit 是一个基于 Bootstrap 5 的 HTML 后台与仪表盘模板,仓库采用 MIT 许可,免费版本包含 15 个演示页面、1 个插件和 1 套配色方案。模板提供数百个 UI 组件、表单、表格、图表、页面与图标,代码遵循 Bootstrap 指南手写,不依赖 jQuery,其使用的第三方库同样不依赖 jQuery。

项目包含自定义 Webpack 配置,用于在开发或部署时重新编译并压缩主题资源。安装 Node.js 后运行 npm install 安装依赖,npm start 通过 webpack-dev-server 在本地 8080 端口启动并自动检测文件变化,npm run build 将源文件编译、优化、压缩到 dist/ 目录。@adminkit/core npm 包中的文件也可通过 unpkg CDN 引入 CSS 与 JavaScript。

源码目录按字体、图片、JavaScript 模块和 SCSS 分层组织,SCSS 进一步分为变量、混入、组件、工具类与第三方样式。浏览器支持覆盖 Edge 最新版,以及 Firefox、Chrome、Safari 和 iOS Safari 的最近两个版本。README 中列出的 AdminKit PRO 为付费变体,包含更多演示页面、插件、配色方案、暗色模式、日历、高级表单、拖拽、Toast 通知和 WYSIWYG 编辑器等功能,本次收录的仅是公开仓库中的免费版本。

HTML后台启动器

适合你的项目吗?

适用场景

  • 搭建后台管理系统的静态 HTML 界面原型
  • 在 Bootstrap 5 项目中复用仪表盘、表单、表格与图表页面
  • 通过 SCSS 变量与分层结构定制主题样式
  • 使用 Webpack 开发服务器进行本地调试并构建 dist 资源
  • 通过 CDN 快速在现有页面中引入 AdminKit 的样式与脚本

适合人群

  • 需要免费开源 HTML 后台模板的前端开发者
  • 使用 Bootstrap 5 构建管理界面的项目
  • 希望基于 SCSS 与 Webpack 定制主题的团队
  • 需要快速搭建仪表盘静态页面的个人或小型项目

上手与定制指南

结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。

  1. 1

    使用构建工具前需先安装 Node.js

  2. 2

    运行 npm install 安装依赖,依赖会下载到 node_modules 目录

  3. 3

    运行 npm start 启动 webpack-dev-server,本地地址为 http://localhost:8080

  4. 4

    运行 npm run build 将源文件编译、优化、压缩到 dist/ 目录

  5. 5

    也可通过 unpkg 引入 @adminkit/core 的 dist/css/app.css 与 dist/js/app.js

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供;担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • AdminKit PRO 是付费高级版本,包含更多演示页面、插件、配色方案、暗色模式、日历、高级表单、拖拽、Toast 通知和 WYSIWYG 编辑器等功能;免费版本仅提供 15 个演示页面、1 个插件和 1 套配色方案,PRO 功能不包含在免费开源版本中。
  • 项目资料提及可选付费版本或功能;本次仅收录公开免费代码,不包含付费升级。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Get more power with AdminKit PRO, a premium variant of AdminKit, featuring hundreds of UI components, forms, tables, charts, pages, and icons.

README 原文
https://github.com/adminkit/adminkit/blob/main/LICENSEhttps://github.com/adminkit/adminkit/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 100 / 100
技术栈
HTML
网站类型
后台 · 启动器
这个分数如何计算

本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-09-13
截图检查日期
2026-10-01

已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 HTML。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 5d2833d612cc35dc1aa4c383c0a3ba1c8a3bbf495315bcf712070f6a2c354ac1

2026-10-01T01:34:46.262Z

来源文件 / 仓库
<p align="center">
  <a href="https://github.com/adminkit/adminkit"><img src="https://adminkit.io/icons/icon-512x512.png" alt="AdminKit is a free & open-source HTML dashboard & admin template based on Bootstrap 5" width="96"></a>
</p>

<h3 align="center">AdminKit</h3>

<p align="center">
  AdminKit is a free & open-source HTML dashboard & admin template based on Bootstrap 5.
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@adminkit/core" rel="nofollow"><img src="https://img.shields.io/npm/v/@adminkit/core" alt="NPM version"></a>
  <a href="https://github.com/adminkit/adminkit/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License"></a>
  <a href="https://github.com/adminkit/adminkit/issues?q=is%3Aopen+is%3Aissue"><img src="https://img.shields.io/github/issues/adminkit/adminkit.svg" alt="GitHub issues open"></a>
  <a href="https://github.com/adminkit/adminkit/issues?q=is%3Aissue+is%3Aclosed"><img src="https://img.shields.io/github/issues-closed-raw/adminkit/adminkit.svg" alt="GitHub issues closed"></a>
  <a href="https://demo.adminkit.io/" rel="nofollow"><img src="https://img.shields.io/badge/demo-online-green.svg" alt="Live Demo"></a>
  <a href="https://adminkit.io/#download"><img src="https://img.shields.io/static/v1?label=download&message=ZIP&color=green" alt="Download"></a>
  <br>
<a href="https://github.com/adminkit/adminkit"><img alt="GitHub stars" src="https://img.shields.io/github/stars/adminkit/adminkit?style=social"></a>
</p>

## Preview
A professional Admin & Dashboard template based on Bootstrap 5 that comes with hundreds of UI components, forms, tables, charts, pages and icons. AdminKit **does not require jQuery** and neither does one of the 3rd party libraries AdminKit is using. [Open demo](https://demo.adminkit.io/).

<a href="https://demo.adminkit.io" target="_blank"><img src="https://assets.adminkit.io/banners/github-1280%C3%97640px.png?2" alt="AdminKit Demo"></a>

## Features

* **Customizable:** You don't need to be an expert to customize AdminKit. Our code is very readable and well documented.
* **Fully Responsive:** With mobile, tablet & desktop support it doesn't matter what device you're using. AdminKit is responsive in all browsers.
* **Cross-Browser:** Our themes are working perfectly with Chrome, Firefox, Safari, Opera, and Edge. We're working hard to support them.
* **Clean Code:** We strictly follow Bootstrap's guidelines to make your integration as easy as possible. All code is handwritten.
* **No jQuery:** AdminKit, and all third-party libraries used in the admin template, do not require jQuery as a dependency.
* **Regular Updates:** From time to time you'll receive an update containing new components, improvements, and bugfixes.

## Quick start

### Download

* Clone this repo `git clone https://github.com/adminkit/adminkit.git`
* [Download from GitHub](https://github.com/adminkit/adminkit/archive/master.zip)
* [Download from Website](https://adminkit.io/#download)

### Build tools

The theme includes a custom Webpack file, which can be used to quickly recompile and minify theme assets while developing or for deployment. You'll need to install Node.js before using Webpack.

Once Node.js is installed, run npm install to install the rest of AdminKit's dependencies. All dependencies will be downloaded to the node_modules directory.

```sh
npm install
```

Now you're ready to modify the source files and generate new dist/ files. AdminKit uses webpack-dev-server to automatically detect file changes and start a local webserver at http://localhost:8080.

```sh
npm start
```

Compile, optimize, minify and uglify all source files to dist/ folder:

```sh
npm run build
```

## CDN support

All files included in the `@adminkit/core` npm package are available over a CDN.

**CSS:**

```html
<link rel="stylesheet" href="https://unpkg.com/@adminkit/core@latest/dist/css/app.css">
```

**Javascript:**

```html
<script src="https://unpkg.com/@adminkit/core@latest/dist/js/app.js"></script>
```

## File structure
The package contains the following directories and files:

```
adminkit/
├── .babelrc
├── .eslintrc
├── .nvmrc
├── README.md
├── package.json
├── postcss.config.js
├── webpack.config.js
├── src/
│   ├── fonts/
│   ├── img/
│   ├── js/
│   │   ├── modules/
│   │   └── app.js
│   └── scss/
│       ├── 1-variables/
│       ├── 2-mixins/
│       ├── 3-components/
│       ├── 4-utilities/
│       ├── 5-vendor/
│       └── app.scss
└── dist/
    ├── css/
    │   └── app.css
    └── js/
        └── app.js
```

## Browser Support

| <img src="https://assets.adminkit.io/browsers/edge.png" alt="Edge" width="24px" height="24px" /><br/>Edge | <img src="https://assets.adminkit.io/browsers/firefox.png" alt="Firefox" width="24px" height="24px" /><br/>Firefox | <img src="https://assets.adminkit.io/browsers/chrome.png" alt="Chrome" width="24px" height="24px" /><br/>Chrome | <img src="https://assets.adminkit.io/browsers/safari.png" alt="Safari" width="24px" height="24px" /><br/>Safari | <img src="https://assets.adminkit.io/browsers/safari-ios.png" alt="iOS Safari" width="24px" height="24px" /><br/>iOS Safari |
| --------- | --------- | --------- | --------- | --------- |
| last version| last 2 versions| last 2 versions| last 2 versions| last 2 versions

## Resources

* [Demo](https://demo.adminkit.io/)
* [Website](https://adminkit.io/)
* [Documentation](https://adminkit.io/docs)
* [Support](https://adminkit.io/support/)
* [Affiliate Program](https://adminkit.io/affiliate-program)

## Bugs and feature requests

Found a bug or have a feature request? [Please open a new issue](https://github.com/adminkit/adminkit/issues/new).

## Upgrade to PRO
Get more power with AdminKit PRO, a premium variant of AdminKit, featuring hundreds of UI components, forms, tables, charts, pages, and icons.

| Free Version        | [AdminKit PRO](https://adminkit.io/pricing/) |
|---------------------|----------------------------------------------|
| 15 Demo Pages       | ✔ 45+ Demo Pages                             |
| 1 Plugin            | ✔ 10+ Plugins                                |
| 1 Color Scheme      | ✔ 3 Color Schemes                            |
|                     | ✔ All Bootstrap 5 Components                 |
|                     | ✔ Dark Mode 🌙                               |
|                     | ✔ Compact Sidebar                            |
|                     | ✔ Calendar                                   |
|                     | ✔ Advanced Forms                             |
|                     | ✔ Drag and Drop                              |
|                     | ✔ Toast Notifications                        |
|                     | ✔ WYSIWYG Editors                            |
|                     | ✔ Premium Support                            |
反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。