Fily v1.1.1 - 响应式 Bootstrap 5 管理模板 preview 1

Fily v1.1.1 - 响应式 Bootstrap 5 管理模板

bookmark

Fily Admin 是一套基于 Bootstrap 5 的后台管理模板，提供垂直导航、水平导航、暗色/亮色主题、侧边栏等多种布局组合，适合快速搭建企业级管理后台或 SaaS 仪表盘。内置 Chart.js、DataTables、Quill 编辑器、TinyMCE 等常用组件，一套代码可切换 10 种不同 UI 风格。

HTML

项目简介

Fily Admin 是一套基于 Bootstrap 5 的后台管理模板，提供垂直导航、水平导航、暗色/亮色主题、侧边栏等多种布局组合，适合快速搭建企业级管理后台或 SaaS 仪表盘。内置 Chart.js、DataTables、Quill 编辑器、TinyMCE 等常用组件，一套代码可切换 10 种不同 UI 风格。

技术栈

  • Bootstrap 5.3.3
  • Gulp 4（构建工具）
  • Sass/SCSS（样式预处理）
  • jQuery 3.7.1
  • Chart.js、DataTables、Quill、TinyMCE 等 50+ 第三方插件

项目结构

text
fily-themeforest/
├── package.json
├── src/
│   ├── gulpfile.js          # Gulp 入口文件
│   ├── index.html           # 布局选择器入口
│   ├── assets/              # 编译后资源（CSS/JS/图片）
│   ├── docs/                # 文档页面样式
│   ├── gulp-tasks/          # Gulp 任务模块
│   └── themes/              # 各布局主题的完整页面

核心文件说明

  • src/index.html — 布局切换页面，展示所有可用主题预览
  • src/gulpfile.js — Gulp 构建入口，引入 gulp-tasks 目录下的任务
  • src/gulp-tasks/ — 包含 build、serve、inject 等构建子任务
  • package.json — 声明所有 npm 依赖（含 Bootstrap 5、Chart.js、jQuery 等）
  • src/themes/ — 实际使用的各主题页面目录（vertical-default-light、horizontal 等）

快速开始

bash
# 安装依赖
npm install

# 启动开发服务器（热更新）
npx gulp serve

# 或直接用浏览器打开 src/index.html 选择主题进入预览

使用建议

  • 选定主题后，复制对应主题目录下的文件到项目中，再按需替换资源路径
  • 样式层基于 Bootstrap 5，变量覆盖在 assets/scss/ 下修改即可快速换肤
  • 生产环境可执行 npx gulp build 压缩合并 CSS/JS
help_outline

常见问题