Tourin - 旅游和旅行社预订 HTML 模板 preview 1

Tourin - 旅游和旅行社预订 HTML 模板

bookmark

Tourin 是一款基于 Bootstrap 的旅行社 HTML 模板，适用于旅游公司官网、行程展示、在线预订等场景。模板包含首页变体、目的地列表、景点详情、博客、购物车与结算等完整页面，内置联系表单支持（PHPMailer）。纯静态页面，无需构建工具即可运行。

HTML

项目简介

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（联系表单后端）

项目结构

text
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 插件
  1. 联系表单需部署至 PHP 环境，并将 contact.php 中的邮箱地址替换为真实收件箱

使用建议

  • 正式上线前需将所有演示内容替换为真实旅游数据，联系表单需配置有效的 SMTP 服务
  • CSS 变量集中在 style.css 顶部，便于统一更换主题配色
help_outline

常见问题