Rotal - Hotel & Resort Booking HTML Template

# 项目简介 Rotal 是一款面向度假酒店与民宿的 HTML 模板，基于 Bootstrap 5 构建，提供首页多版本、客房展示、博客、联系表单等完整页面，适合快速搭建酒店官网或在线预订平台。 ## 技术栈 - HTML5 + CSS3（SCSS 模块化结构） - Bootstrap 5（响应式布局框架） - jQuery（交互逻辑与动画控制） - Font Awesome 6（图标库） - Swiper（轮播组件） - Magnific Popup（图片/视频弹窗） - Google Fonts（Noto Serif Display / Plus Jakarta Sans） ## 项目结构 ``` rotalhtml-10/ documentation/ index.html # 模板使用文档 css/ bootstrap.css font-awesome.css scrollbar.css style.css fonts/ images/ js/ download-version/ index.html # 默认首页 home-2.html # 首页变体 2 home-3.html # 首页变体 3 home-4.html # 首页变体 4 home-5.html # 首页变体 5 about.html blog.html blog-details.html contact.html gallery.html pricing.html room.html room-details.html service.html team.html testimonial.html mail.php # 邮件发送后端 assets/ css/ bootstrap.min.css fontawesome.min.css style.css # 主题主样式 js/ main.js # 核心交互脚本 ``` ## 核心文件说明 - `download-version/assets/css/style.css` — 主题全局样式，含 CSS 变量、响应式断点和各模块样式 - `download-version/assets/js/main.js` — 实现预加载器、移动端菜单、滚动置顶、颜色切换、计数器等 20+ 项交互功能 - `download-version/index.html` — 默认首页，引用全部资源并包含完整头部导航与页脚 - `download-version/mail.php` — 联系人表单后端，支持邮件发送 - `documentation/index.html` — 官方模板文档，说明 HTML 结构、CSS 组织方式和配置方法 - `download-version/home-2~5.html` — 首页多风格变体，可直接复用或替换首页 ## 快速开始 1. 进入 `download-version` 目录 2. 在浏览器中直接打开 `index.html` 即可预览完整模板 3. 若需本地服务器运行（推荐）：在目录下执行 `npx serve .` 或使用 VS Code Live Server 插件 4. 修改颜色主题：页面右侧悬浮色板支持 6 种预设色和自定义颜色选择器 ## 使用建议 模板已内置 5 种首页风格和超过 20 个业务页面，直接修改 `assets/css/style.css` 中的 CSS 变量（如 `--theme-color`）可批量更换主题色。联系表单需将 `mail.php` 部署至支持 PHP 的服务器，或替换为第三方表单服务（如 Formspree）。