Innap v1.1 - 酒店管理仪表板 Bootstrap 5 模板

Innap v1.1 - 酒店管理仪表板 Bootstrap 5 模板

category后台管理
# 项目简介 Innap 是一款基于 Bootstrap 5 的酒店管理后台模板,提供完整的仪表盘、客房管理、电商订单、邮件系统、表单验证等功能页面,适合酒店、民宿、度假村等住宿行业的后台管理系统开发参考。 ## 技术栈 - Bootstrap 5(响应式布局框架) - jQuery(DOM 操作与交互) - Chartist / Chart.js / Flot / Morris / Peity / Sparkline(图表库) - metisMenu(侧边栏菜单) - Perfect Scrollbar(自定义滚动条) - AOS(滚动动画) - FontAwesome、Material Design Icons、Themify Icons 等多套图标库 ## 项目结构 ``` 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 # 礼宾服务页 ``` ## 核心文件说明 - `xhtml/index.html` — 主仪表盘入口,包含侧边栏导航与卡片式数据概览 - `xhtml/css/style.css` — 编译合并后的完整样式文件,定义了主题色与暗色模式变量 - `xhtml/js/custom.js` — 页面通用交互逻辑(侧边栏切换、主题切换等) - `xhtml/js/layout-dark.js` — 切换至暗色主题的配置文件 - `xhtml/js/layout-light.js` — 切换至亮色主题的配置文件 - `documentation/index.html` — 官方在线文档,含安装说明与文件结构介绍 ## 快速开始 模板为纯静态 HTML,无需安装依赖。直接在浏览器中打开以下文件即可预览完整效果: - 主入口:`xhtml/index.html` - 暗色主题入口:`xhtml/index-2.html` ## 使用建议 模板本身为完整静态页面,可直接作为参考或通过浏览器"另存为"进行二次开发。建议使用 VS Code + Live Server 插件启动本地服务器,以避免某些资源路径引用问题。更换主题颜色只需修改 `style.css` 中的 CSS 变量(如 `--primary`、`--secondary`)即可全局生效。
help_outline

常见问题

评论0
发布时间Jan 20, 2026

技术栈

HTML