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

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

bookmark

ShotFit 是一套面向健身与运动场景的静态 HTML 模板，基于 Bootstrap 5 构建，包含首页、课程、团队、商店、博客等二十余个页面，适用于健身房、运动品牌官网或线上课程的落地页。

HTML

项目简介

ShotFit 是一套面向健身与运动场景的静态 HTML 模板，基于 Bootstrap 5 构建，包含首页、课程、团队、商店、博客等二十余个页面，适用于健身房、运动品牌官网或线上课程的落地页。

技术栈

  • Bootstrap 5（布局与响应式）
  • Swiper（轮播组件：品牌滑动、团队滑动、课程滑动）
  • jQuery 3.7.1（基础 DOM 操作与插件生态）
  • Magnific Popup（图片/视频弹窗）
  • MeanMenu（移动端导航）
  • Nice Select（下拉表单样式）
  • CounterUp + WOW（数字动画与滚动入场动画）
  • SCSS（样式预处理，含完整模块化结构）

项目结构

text
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 正常加载。

help_outline

常见问题