项目简介link

Innap 是一款基于 Bootstrap 5 的酒店管理后台模板，提供完整的仪表盘、客房管理、电商订单、邮件系统、表单验证等功能页面，适合酒店、民宿、度假村等住宿行业的后台管理系统开发参考。

技术栈link

• Bootstrap 5（响应式布局框架）
• jQuery（DOM 操作与交互）
• Chartist / Chart.js / Flot / Morris / Peity / Sparkline（图表库）
• metisMenu（侧边栏菜单）
• Perfect Scrollbar（自定义滚动条）
• AOS（滚动动画）
• FontAwesome、Material Design Icons、Themify Icons 等多套图标库

项目结构link

innaphtml-11/Innap-v1.1-02-August-2023/
├── documentation/          # 模板说明文档
│   └── index.html
└── xhtml/                  # 主要模板文件
    ├── css/
    │   └── style.css       # 编译后的主样式（含暗色/亮色主题变量）
    ├── js/                 # 页面交互脚本
    ├── vendor/             # 第三方插件（图表、图标等）
    ├── icons/              # 图标库资源
    ├── images/             # 公共图片
    ├── fonts/              # 字体文件
    ├── index.html          # 主仪表盘入口
    ├── index-2.html        # 仪表盘第二版
    ├── email-*.html         # 邮件模块（收件箱/写邮件/阅读）
    ├── ecom-*.html          # 电商模块（商品/订单/客户/发票）
    ├── form-*.html          # 表单模块（验证/向导/编辑器）
    ├── chart-*.html         # 图表展示页
    ├── guest-*.html         # 住客管理
    ├── page-*.html          # 认证与错误页面
    └── concierge.html      # 礼宾服务页

核心文件说明link

• xhtml/index.html — 主仪表盘入口，包含侧边栏导航与卡片式数据概览
• xhtml/css/style.css — 编译合并后的完整样式文件，定义了主题色与暗色模式变量
• xhtml/js/custom.js — 页面通用交互逻辑（侧边栏切换、主题切换等）
• xhtml/js/layout-dark.js — 切换至暗色主题的配置文件
• xhtml/js/layout-light.js — 切换至亮色主题的配置文件
• documentation/index.html — 官方在线文档，含安装说明与文件结构介绍

快速开始link

模板为纯静态 HTML，无需安装依赖。直接在浏览器中打开以下文件即可预览完整效果：

• 主入口：xhtml/index.html
• 暗色主题入口：xhtml/index-2.html

使用建议link

模板本身为完整静态页面，可直接作为参考或通过浏览器"另存为"进行二次开发。建议使用 VS Code + Live Server 插件启动本地服务器，以避免某些资源路径引用问题。更换主题颜色只需修改 style.css 中的 CSS 变量（如 --primary、--secondary）即可全局生效。