Boron - 管理和仪表板模板 preview 1

Boron - 管理和仪表板模板

bookmark

Boron 是一套基于 Bootstrap 5 构建的企业级后台管理模板，包含完整的仪表盘、表单、图表、电商及权限认证等模块。模板提供了丰富的预制组件，开发者可直接基于现有页面进行二次开发，适合快速搭建 CRM、CMS 或 SaaS 管理后台。

HTML

项目简介

Boron 是一套基于 Bootstrap 5 构建的企业级后台管理模板，包含完整的仪表盘、表单、图表、电商及权限认证等模块。模板提供了丰富的预制组件，开发者可直接基于现有页面进行二次开发，适合快速搭建 CRM、CMS 或 SaaS 管理后台。

技术栈

  • CSS 框架：Bootstrap 5.3.3
  • 构建工具：Gulp 4 + Sass
  • JavaScript 库：jQuery 3.7.1
  • 主要插件：ApexCharts（图表）、DataTables（表格）、Quill（富文本）、Flatpickr（日期选择）、Select2（多选）、SweetAlert2（弹窗）等

项目结构

text
Boron_v1.0/
├── Admin/
│   ├── src/                    # 源代码（含模块化 HTML 片段）
│   │   ├── index.html          # 仪表盘入口
│   │   ├── apps-*.html         # 应用模块页面
│   │   ├── charts-*.html       # 图表示例
│   │   ├── form-*.html         # 表单相关页面
│   │   └── auth-*.html         # 登录/注册等认证页面
│   ├── gulpfile.js             # Gulp 构建配置
│   └── package.json
└── Documentation/               # 官方文档（可直接浏览器打开）
    └── index.html

核心文件说明

  • Admin/gulpfile.js — Gulp 构建流程定义，负责 Sass 编译、CSS 压缩与热更新服务
  • Admin/src/index.html — 主仪表盘页面，展示关键数据卡片
  • Admin/src/pages-starter.html — 空白起始页模板，可参考此结构创建新页面
  • Admin/src/form-*.html — 涵盖输入、验证、编辑器、表单向导等完整表单功能
  • Admin/src/apps-ecommerce-*.html — 电商模块（产品、订单、客户、评价等）
  • Documentation/index.html — 内置文档，包含安装与定制说明

快速开始

bash
# 安装依赖
cd Boron_v1.0/Admin
yarn install   # 或 npm install

# 启动开发服务器并自动编译
yarn start

# 仅构建生产资源
yarn build

启动后访问 http://localhost:3000 即可预览，修改 src/ 目录下的文件会自动刷新。

使用建议

  • 新建页面时参考 pages-starter.html 的 @@include 结构，保持与现有模板风格一致
  • 该模板为纯前端静态资源，无需后端即可运行；若需数据持久化，需自行对接 API
help_outline

常见问题