项目简介link

Woof! 是一套基于 Bootstrap 的静态 HTML 模板，专为宠物服务行业设计（如宠物医院、宠物店、寄养中心、宠物领养、遛狗服务等）。模板提供了首页、服务、团队、图库、博客、联系页面等多种布局，可直接作为宠物相关网站的起点。

技术栈link

• Bootstrap 5.x（CSS 框架）
• jQuery（交互逻辑）
• OpenStreetMap / Leaflet（地图功能）
• LayerSlider（幻灯片轮播）
• Font Awesome + Flaticon（图标库）
• Google Fonts：Quicksand、Open Sans
• SyntaxHighlighter（文档页代码高亮，仅 documentation）

项目结构link

woofhtml-20/Woof2.0/
├── documentation/          # 模板文档（供查阅）
│   ├── index_en.html       # 文档入口
│   ├── css/                # 文档样式（含 Bootstrap）
│   └── js/                 # 文档脚本（SyntaxHighlighter 等）
└── woof!_html/             # 实际使用的模板
    ├── index.html          # 首页
    ├── about.html          # 关于我们
    ├── services.html       # 服务列表
    ├── adoption.html       # 领养页面
    ├── gallery.html        # 图库
    ├── contact.html        # 联系页
    ├── blog.html           # 博客列表
    ├── team.html           # 团队成员
    ├── css/
    │   ├── style.css       # 主样式表
    │   └── plugins.css     # 第三方插件样式
    ├── js/
    │   └── map.js          # Leaflet 地图初始化
    └── img/                # 示例图片

核心文件说明link

• woof!_html/index.html — 模板主入口页面，包含完整导航、幻灯片、服务展示区块
• woof!_html/css/style.css — 主样式表，定义了所有页面组件的视觉风格
• woof!_html/js/map.js — 集成 OpenStreetMap 的 Leaflet 地图，坐标可按需修改
• woof!_html/css/plugins.css — Bootstrap 插件及第三方扩展的补充样式
• documentation/index_en.html — 模板官方文档入口（包含使用说明）
• woof!_html/contact.html — 联系页面，含地图展示与联系表单

快速开始link

本项目为纯静态模板，无需构建步骤：

1. 直接在浏览器中打开 woofhtml-20/Woof2.0/woof!_html/index.html
2. 或将 woof!_html 文件夹部署到任意 Web 服务器（如 Nginx、Apache）
3. 地图功能依赖网络加载 Leaflet 瓦片图，请确保网络畅通

使用建议link

模板已包含完整的响应式布局和 Bootstrap 组件，定制时主要修改 style.css 中的颜色变量（#675444 等主题色）以及 map.js 中的坐标即可。如需实际使用，建议替换所有占位图片和示例文案，并移除文档目录。