Tourin - Travel and Tour Agency Booking HTML Template

# 项目简介 Tourin 是一款基于 Bootstrap 的旅行社 HTML 模板，适用于旅游公司官网、行程展示、在线预订等场景。模板包含首页变体、目的地列表、景点详情、博客、购物车与结算等完整页面，内置联系表单支持（PHPMailer）。纯静态页面，无需构建工具即可运行。 ## 技术栈 - Bootstrap 5（响应式布局框架） - jQuery（DOM 操作与交互） - 第三方插件：Owl Carousel、Swiper、meanMenu、jQuery UI Datepicker、YouTubePopUp、mixitup - Google Fonts：Plus Jakarta Sans、DM Sans、Covered By Your Grace - PHPMailer（联系表单后端） ## 项目结构 ``` tourinhtml-10/ ├── documentation/ # 模板使用文档 │ └── index.html ├── tourin/ # 实际使用的模板目录 │ ├── index.html # 首页（风格一） │ ├── index2.html # 首页（风格二） │ ├── tour.html # 旅游列表 │ ├── tour-grid.html # 网格布局 │ ├── tour-list.html # 侧边栏列表 │ ├── tour-details.html # 景点详情 │ ├── destination.html # 目的地页 │ ├── blog*.html # 博客相关页面 │ ├── cart.html # 购物车 │ ├── checkout.html # 结算页 │ ├── contact.html # 联系页（含表单） │ ├── contact.php # 邮件发送脚本 │ ├── 404.html # 错误页 │ └── assets/ │ ├── bootstrap/ # Bootstrap 源码 │ ├── css/ # 样式文件（style.css、responsive.css 等） │ ├── img/ # 图片资源 │ └── js/ # 脚本文件 ``` ## 核心文件说明 - `tourin/index.html` — 首页入口，包含顶部导航、幻灯片、热门景点等区块 - `tourin/assets/css/style.css` — 全局样式，定义 CSS 变量、按钮、布局等核心样式 - `tourin/assets/js/contact.js` — 联系表单提交逻辑 - `tourin/contact.php` — 邮件发送后端脚本（需 PHP 环境） - `tourin/PHPMailer/` — PHPMailer 类库，用于联系表单发送邮件 - `tourin/tour-details.html` — 单个景点的详情页模板 ## 快速开始 1. 直接在浏览器中打开 `tourin/index.html` 即可预览完整效果 2. 若需本地服务器运行（推荐），可执行： ```bash # Python 3 python -m http.server 8080 # 或使用 VS Code Live Server 插件 ``` 3. 联系表单需部署至 PHP 环境，并将 `contact.php` 中的邮箱地址替换为真实收件箱 ## 使用建议 - 正式上线前需将所有演示内容替换为真实旅游数据，联系表单需配置有效的 SMTP 服务 - CSS 变量集中在 `style.css` 顶部，便于统一更换主题配色