Urbix - Bootstrap 管理和仪表板模板 preview 1

Urbix - Bootstrap 管理和仪表板模板

bookmark

Urbix 是一套基于 Bootstrap 5 的后台管理模板，包含 60+ 预置页面，覆盖电商管理、学校管理、邮件、聊天、看板等多种业务场景。内置 webpack 构建流程，支持 SCSS 自定义和 Handlebars 模板引擎，适合快速搭建中后台系统。

HTML

项目简介

Urbix 是一套基于 Bootstrap 5 的后台管理模板，包含 60+ 预置页面，覆盖电商管理、学校管理、邮件、聊天、看板等多种业务场景。内置 webpack 构建流程，支持 SCSS 自定义和 Handlebars 模板引擎，适合快速搭建中后台系统。

技术栈

  • Bootstrap 5.3.5
  • Webpack 5
  • SCSS
  • Handlebars（部分模板引擎）
  • Chart.js / ApexCharts / ECharts（图表）
  • Swiper、Quill、FullCalendar、Grid.js 等 UI 组件库

项目结构

text
Urbix_HTML_v1.0.0/
├── Admin/
│   ├── src/                    # 页面源文件
│   │   ├── index.html          # 主仪表盘
│   │   ├── dashboard-*.html    # 各模块仪表盘
│   │   ├── apps-*.html         # 功能模块页面
│   │   ├── auth-*.html         # 认证页面
│   │   ├── ui-*.html           # UI 组件
│   │   ├── chart-*.html        # 图表示例
│   │   └── pages-*.html        # 通用页面
│   ├── package.json            # 依赖配置
│   └── webpack.config.js       # 构建配置
├── Documentation.html          # 文档入口（跳转链接）
└── THEMELOCK.COM.url

核心文件说明

  • Admin/package.json — 声明 npm scripts（dev/build/clean）和所有依赖
  • Admin/webpack.config.js — webpack 构建配置，处理 HTML 编译和资源复制
  • Admin/src/index.html — E-Commerce 仪表盘首页，包含卡片、图表和销售数据展示
  • Admin/src/pages-starter.html — 空白页模板，展示页面基本布局结构
  • Admin/src/dashboard-*.html — 各业务线仪表盘（Analytics、School、Media）
  • Admin/src/apps-*.html — 具体业务功能页面（电商订单、商品、学生管理、聊天等）

快速开始

bash
cd Urbix_HTML_v1.0.0/Admin
npm install
npm run dev

开发模式启动后访问 http://localhost:3000，热重载生效。生产构建请运行 npm run build。

使用建议

模板使用 Handlebars partials 组织公共部分（header、sidebar、footer），修改 src/partials/ 下的文件可批量更新全局布局。如需换肤或调整配色，修改 src/assets/scss/ 中的变量文件即可。

help_outline

常见问题