[网页模板] 创意机构单页 Bootstrap 5 模板 | 作品弹窗与时间线 – Agency

Agency 是一套面向创意工作室、设计机构和小型服务企业的响应式单页 HTML 模板。资源包版本标记为 Agency 7.0.4，页面基于 Bootstrap 5.0.1，将服务介绍、6 个作品案例、品牌时间线、团队、客户 Logo 和联系表单放进同一条滚动路径中。它适合制作机构展示前端，但不包含内容管理、客户账户、邮件投递或询盘后台。

资源包只有一个正式入口 index.html，没有 npm 配置和构建命令。Bootstrap 样式已经合并在 css/styles.css，少量页面行为位于 js/scripts.js，图片按首屏、作品、时间线、团队和客户 Logo 分组放在 assets/img。因此，修改时可以直接从静态 HTML、CSS 和 JavaScript 文件入手，不需要先搭建组件框架或路由系统。

单页结构如何串起机构介绍与作品展示

导航中的 Services、Portfolio、About、Team 和 Contact 都指向当前页面内的锚点，没有独立详情页。这样的信息架构适合完成“认识机构—了解服务—查看案例—了解团队—发起咨询”的连续浏览，但不适合直接承担博客、项目分类、客户门户或多语言内容管理等需要独立路由的场景。

作品区用 Bootstrap Modal 展开六个案例详情

作品区在桌面宽度下采用三列网格，较窄屏幕会收缩为两列或单列。每张作品卡带有悬停遮罩和加号图标，点击后打开对应的 Bootstrap Modal；弹窗可以展示大图、项目简介、客户和类别，并提供关闭操作。六个弹窗都写在同一个 HTML 文件中，访客不需要跳转到新页面。

定制作品时要同时替换卡片缩略图、标题、分类和对应弹窗，避免列表信息与详情内容不一致。如果案例数量持续增加，反复复制 Modal 会让单页文件变得臃肿，此时可以考虑改用 JSON 或后端数据生成内容，或者为每个案例拆分独立详情页。

固定导航、ScrollSpy 和移动菜单提供基础响应式交互

主题脚本会监听滚动位置：离开页面顶部后，固定导航会加入收缩样式；Bootstrap ScrollSpy 则根据当前可见区块切换导航状态。移动端展开菜单后，点击任一导航项会自动触发折叠，避免菜单继续遮挡正文。这些交互已经写在前端脚本中，不依赖额外的页面框架。

样式表包含 Bootstrap 的 576、768、992、1200 和 1400 像素断点，并为首屏、作品网格、时间线、导航和弹窗补充响应式规则。时间线在窄屏采用单侧排列，较宽屏再切换为左右交错布局；导航在 992 像素以上显示完整菜单，更小宽度则使用折叠按钮。

联系表单需要配置服务才能接收询盘

联系区域包含姓名、邮箱、电话和留言字段，并提供必填与邮箱格式验证提示；页面还加载了一段外部表单脚本。但当前 data-sb-form-api-token 仍是 API_TOKEN 占位值，源码没有可用的自有提交地址，下载后不能直接收取真实询盘。

可以根据项目需要配置兼容的表单服务，或改成向自有 API 提交。无论选择哪种方案，都需要补充服务端校验、反垃圾策略、失败提示、重复提交处理、隐私同意和真实成功回执。客户 Logo、社交按钮、Privacy Policy 与 Terms of Use 目前也使用占位链接，上线前必须替换或删除。

修改静态文件和部署前应检查哪些内容

1. 先在 index.html 中统一替换机构名称、服务、案例、时间线、团队、联系方式和页脚链接。
2. 按照现有文件名替换 assets/img 中的首屏、作品、团队和时间线图片，或同步调整 HTML 引用路径。
3. 在 css/styles.css 中调整 --bs-primary、字体、区块间距和首屏背景，保持新的品牌视觉一致。
4. 保留导航收缩、ScrollSpy 和移动菜单逻辑；删除区块时同步清理导航锚点与对应的作品弹窗。
5. 配置联系表单并替换所有 #! 占位链接，同时确认客户 Logo、人物照片和项目图片具备使用许可。
6. 部署到静态主机前检查 Font Awesome、Google Fonts、Bootstrap JS 和表单脚本等外部依赖是否能加载，再在手机、平板和桌面尺寸下复核页面。