Agroxa v2.3.0 - Material Design 管理和仪表板模板 preview 1

Agroxa v2.3.0 - Material Design 管理和仪表板模板

bookmark

Agroxa 是一套基于 Bootstrap 5 构建的多用途管理后台模板，提供垂直/水平等多种布局、丰富的数据可视化图表、完整表单与表格组件，适合快速搭建企业级后台系统或 SaaS 产品。

HTMLadminadmin dashboardadmin templatebootstrap 5cmscrmdashboard

项目简介

Agroxa 是一套基于 Bootstrap 5 构建的多用途管理后台模板，提供垂直/水平等多种布局、丰富的数据可视化图表、完整表单与表格组件，适合快速搭建企业级后台系统或 SaaS 产品。

技术栈

  • Bootstrap 5.3.3（核心 UI 框架）
  • Gulp 4（自动化构建）
  • jQuery 3.7.1
  • Chart.js / C3 / Morris.js / Chartist / Flot（图表库）
  • DataTables（数据表格，含 Buttons/Responsive/Select 等扩展）
  • Metismenu（侧边栏菜单）
  • TinyMCE 5（富文本编辑器）
  • SweetAlert2 / Bootstrap-SweetAlert（弹窗提示）

项目结构

text
Agroxa-HTML_v2.3.0/
  Admin/
    gulpfile.js          # Gulp 构建配置
    package.json         # 依赖声明
    src/
      index.html         # 主仪表盘页面
      partials/
        body.html        # 页面 body 标签及属性
        menu.html        # 顶部导航 + 侧边栏组合
        head-css.html    # CSS 引入片段
      layouts-*.html     # 12 种布局变体
      charts-*.html      # 6 种图表页面
      tables-*.html      # 4 种表格页面
      forms-*.html       # 7 种表单页面
      ui-*.html          # 20+ UI 组件页面
      email-*.html       # 邮件模块页面
      pages-*.html       # 认证/错误/工具页面
      assets/            # 源码资源（SCSS/JS）
  Documentation/
    index.html           # 官方文档入口

核心文件说明

  • Admin/gulpfile.js — 定义 SCSS 编译、CSS/JS 压缩、RTLCSS 转换等构建流程
  • Admin/src/partials/body.html — 通过 data-topbar 属性控制顶部栏配色主题
  • Admin/src/partials/menu.html — 组合顶部栏与侧边栏，支持水平布局切换
  • Admin/src/index.html — 使用 @@include 指令拼接模块化片段
  • Admin/src/layouts-*.html — 提供 boxed、compact、dark、horizontal 等 12 种布局变体
  • Admin/src/charts-*.html — 分别集成 Chart.js、C3、Morris、Chartist、Flot、Knob 六种图表库

快速开始

bash
cd Admin
npm install      # 安装 gulp 及全部依赖（含 node-sass）
npm install -g gulp  # 如 gulp 未全局安装
gulp             # 启动构建，输出到 dist/ 目录

构建完成后在浏览器打开 dist/index.html 即可预览。

使用建议

模板通过 data-topbar、data-layout 属性切换主题配色和布局模式，无需改动 SCSS 源码即可快速适配项目风格；若需新增页面，建议参考 src/ 中的 @@include 结构，拆分为可复用片段以保持代码整洁。

help_outline

常见问题