Shotfit - 健身房和健身教练 HTML 模板

# 项目简介 ShotFit 是一套面向健身与运动场景的静态 HTML 模板，基于 Bootstrap 5 构建，包含首页、课程、团队、商店、博客等二十余个页面，适用于健身房、运动品牌官网或线上课程的落地页。 ## 技术栈 - Bootstrap 5（布局与响应式） - Swiper（轮播组件：品牌滑动、团队滑动、课程滑动） - jQuery 3.7.1（基础 DOM 操作与插件生态） - Magnific Popup（图片/视频弹窗） - MeanMenu（移动端导航） - Nice Select（下拉表单样式） - CounterUp + WOW（数字动画与滚动入场动画） - SCSS（样式预处理，含完整模块化结构） ## 项目结构 ``` shotfithtml-10/ ├── buyer-file/ # 实际可用的模板文件 │ ├── index.html # 首页 │ ├── about.html # 关于我们 │ ├── shop.html # 商店列表 │ ├── shop-details.html # 商品详情 │ ├── news.html # 博客列表 │ ├── training.html # 课程列表 │ ├── team.html # 团队介绍 │ └── assets/ │ ├── css/ # 样式文件（main.css 含 ~23 个模块区块） │ ├── js/ # 交互脚本（Swiper、MeanMenu、弹窗等） │ ├── img/ # 页面图片素材 │ └── icomon/ # 自定义图标字体 ├── documentation/ # 官方文档（介绍模板结构与定制方式） └── assets/ (documentation)/ ``` ## 核心文件说明 - `buyer-file/index.html` — 首页，含 Hero、课程、特色、团队等完整区块 - `buyer-file/assets/css/main.css` — 主样式表，定义 Kanit/Archivo 字体及全站主题色 - `buyer-file/assets/js/main.js` — 轮播、导航、计数器、弹窗等交互逻辑 - `buyer-file/assets/css/meanmenu.css` — 移动端响应式导航样式 - `buyer-file/assets/css/swiper-bundle.min.css` — 轮播组件样式 ## 快速开始 1. 下载并解压后，进入 `shotfithtml-10/buyer-file/` 目录 2. 双击 `index.html` 在浏览器中预览，或通过 VS Code Live Server 等本地服务器运行 3. 页面已全部内联 CSS/JS，无需额外构建 ## 使用建议 模板中所有图片路径需替换为实际素材；如有后端需求（如联系表单发送），需自行接入 API 或 PHP 接口。移动端导航依赖 jQuery MeanMenu，确保 `main.js` 正常加载。