Bootstrap 5 多页面管理后台模板 | Mazer – 58 页与 SCSS 源码

Mazer 是一套面向数据看板、内部运营系统和管理工具的 Bootstrap 5 多页面后台模板。本地 1.0.0 下载包提供 58 个页面模板,覆盖仪表盘、组件、表单、富文本编辑器、数据表、图表、认证和错误页,并附带 Nunjucks、SCSS 与 Laravel Mix 构建源码。它采用 MIT License,但账户、聊天、邮件、结算和数据查询仍是前端演示,需要自行接入真实后端。

Mazer Bootstrap 管理后台仪表盘预览

资源目录同时保留 srcdist:前者是用于修改布局、侧栏和样式的源文件,后者是已经生成的静态页面。只需要查看或替换文案时,可以直接从 dist/index.html 开始;需要统一调整页面骨架、导航项目或主题样式时,则应修改 Nunjucks、sidebar-items.json 和 SCSS 后重新构建。

58 个页面模板如何分布

页面组 数量 包含内容
仪表盘 1 统计卡片、访问图表、地区数据、评论和消息列表
基础与扩展组件 19 警告、按钮、卡片、轮播、模态框、分页、进度、头像、评分和提示消息等
布局 4 默认侧栏、单列、带顶部导航和横向菜单布局
表单与编辑器 11 输入、选择、单选、复选、文本域、表单布局及四种富文本编辑器
表格、图表与数据组件 7 基础表格、数据表、Chart.js、ApexCharts、文件上传和两类地图入口
小部件与图标 6 聊天框、价格卡、待办列表及三套图标页面
应用、认证与错误页 10 邮件、聊天、图库、结算、登录、注册、找回密码和 403/404/500 页面

上述分组共 58 个源页面模板。dist 目录实际可数到 59 个 HTML 文件,多出的 sidebar-items.html 是构建过程从侧栏数据生成的产物,不应算作独立业务页面。因此,资源属性使用“58 页 + 1 个构建文件”比直接照写 60 页更符合当前压缩包内容。

数据表、图表和待办组件具备哪些交互

数据表页面使用 Simple-DataTables,可以在浏览器端执行关键词检索、排序和分页;待办小部件通过 Dragula 支持拖动排序;仪表盘和图表示例分别使用 ApexCharts 与 Chart.js。SweetAlert、Toastify、评分组件、轮播和模态框也提供可操作示例,适合作为后台反馈、数据展示和组件状态的前端参考。

富文本部分包含 Quill、CKEditor、Summernote 与 TinyMCE 四套示例。模板的主要导航和 Bootstrap 组件不依赖 jQuery,但 Summernote 页面会单独加载 jQuery,因此整个资源包不能概括为“完全没有 jQuery 文件”。如果项目只使用 Quill、CKEditor 或 TinyMCE,可以删除 Summernote 页面及其对应资源,保持主要工程的原生 JavaScript 路线。

Nunjucks 与 Laravel Mix 如何组织源码

源页面通过 extends 复用 layouts/master.html 等布局文件,侧栏结构集中保存在 src/sidebar-items.json。修改菜单名称、链接和分组时,不必逐页编辑生成后的导航;构建配置会把同一份侧栏数据传给 Nunjucks,再输出到各个静态页面。

样式入口位于 src/assets/scss,包括 Bootstrap 定制、页面样式、组件样式和聊天、待办等小部件样式。包内脚本提供 npm run devnpm run watchnpm run prod,由 Laravel Mix 6、Webpack 5 和 Sass 负责生成资源。本文只核对了文件与配置,没有执行依赖安装和生产构建,因此正式改造前仍应在目标 Node 环境中验证依赖兼容与构建输出。

认证、应用页面与文件上传有哪些边界

登录、注册和找回密码表单的提交目标都是本地 index.html,不会创建账户、发送重置邮件或保存会话。邮件编辑器的表单指向占位地址;聊天应用、照片图库、结算页、Google Map 和矢量地图页面在本地 1.0.0 源码中显示“Coming Soon”,不能视为已经实现的管理模块。

文件上传页集成 FilePond,并包含一个向第三方图片服务发送文件的 XMLHttpRequest 示例,其中还写有示例 API Key。正式项目不应直接沿用这个配置:应移除公开 Key,将上传目标换成自有受控接口,并在上传前说明文件去向、大小限制、格式校验和隐私政策。普通 FilePond 选取、预览和验证界面也不等于文件已经存入你的服务器。

在线演示与本地 1.0.0 包并非完全同步

当前在线演示仍属于 Mazer 管理后台,但导航中已经出现 RTL 布局、表单验证、Profile、Security、Leaflet Map 和 OpenLayers Map 等新增入口;这些页面没有包含在本地 1.0.0 下载包中。选择功能时应以实际压缩包为准,不能仅根据在线演示菜单判断资源内已有文件。

  1. 先从 dist 选择实际需要的页面,删除“Coming Soon”和不使用的演示入口。
  2. src/sidebar-items.json 收缩菜单,并同步修改共用 Nunjucks 布局、页脚和品牌信息。
  3. 通过 SCSS 调整主色、间距、字体和卡片状态,不要直接把生成后的 CSS 作为唯一维护源。
  4. 将仪表盘数字、图表数组和数据表样例替换为接口数据,增加加载、空数据、失败和权限不足状态。
  5. 接入认证、会话、角色权限和服务端校验;邮件、聊天、结算和上传则根据业务单独设计接口。
  6. 处理外部字体、视频、文件上传和第三方编辑器依赖,最后再执行生产构建和多尺寸页面检查。

MIT License 允许使用、修改和分发源码,但在软件副本或重要代码部分中需要保留版权声明和许可文本。模板内的人名、头像、统计数字、评论、地图和交易相关信息均为演示内容,上线前应替换为有权使用且与实际业务一致的数据。

Bootstrap 5 多页面管理后台模板 | Mazer – 58 页与 SCSS 源码
此内容为付费资源,请付费后查看
M币6
立即购买
您当前未登录!建议登陆后购买,可保存购买订单
模板类型多页面管理后台
页面数量58页+1构建文件
技术栈HTML/Bootstrap/JavaScript
响应式
授权许可MIT License
下载方式蓝奏网盘/直链
付费资源
© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发
头像 - 杂货喵
欢迎您留下宝贵的见解!
提交
头像 - 杂货喵

昵称

取消
昵称图片快捷回复

    暂无评论内容