项目简介link

Rotal 是一款面向度假酒店与民宿的 HTML 模板，基于 Bootstrap 5 构建，提供首页多版本、客房展示、博客、联系表单等完整页面，适合快速搭建酒店官网或在线预订平台。

技术栈link

• HTML5 + CSS3（SCSS 模块化结构）
• Bootstrap 5（响应式布局框架）
• jQuery（交互逻辑与动画控制）
• Font Awesome 6（图标库）
• Swiper（轮播组件）
• Magnific Popup（图片/视频弹窗）
• Google Fonts（Noto Serif Display / Plus Jakarta Sans）

项目结构link

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              # 核心交互脚本

核心文件说明link

• 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 — 首页多风格变体，可直接复用或替换首页

快速开始link

1. 进入 download-version 目录
2. 在浏览器中直接打开 index.html 即可预览完整模板
3. 若需本地服务器运行（推荐）：在目录下执行 npx serve . 或使用 VS Code Live Server 插件
4. 修改颜色主题：页面右侧悬浮色板支持 6 种预设色和自定义颜色选择器

使用建议link

模板已内置 5 种首页风格和超过 20 个业务页面，直接修改 assets/css/style.css 中的 CSS 变量（如 --theme-color）可批量更换主题色。联系表单需将 mail.php 部署至支持 PHP 的服务器，或替换为第三方表单服务（如 Formspree）。