创意机构单页网站模板：Bootstrap 5 作品集与询盘页面 – Agency

Agency 是一套把机构介绍、服务说明、作品集和联系入口串在同一页面中的 Bootstrap 5 模板，适合创意工作室、设计机构和小型服务企业作为官网前端起点。资源包采用 Agency 7.0.4 与 Bootstrap 5.0.1，只有一个正式入口 index.html，不包含内容管理、客户账户、邮件投递或询盘后台。

单页如何完成机构介绍与作品展示

页面导航中的 Services、Portfolio、About、Team 和 Contact 都指向当前页面内的锚点，浏览路径是“认识机构—了解服务—查看案例—了解团队—发起咨询”。各区域承担的任务并不相同，定制时应优先替换与业务决策直接相关的信息。

这套结构适合用一个页面建立信任并承接咨询，但不适合直接扩展成博客、项目分类、客户门户或多语言内容系统。后者需要独立路由、内容数据和后台管理能力，不能只靠继续增加锚点解决。

六个作品卡片怎样展开项目详情

作品区按照响应式网格排列，桌面端可以使用三列，较窄屏幕会调整为两列或单列。每张卡片带有悬停遮罩和加号提示，点击后通过 Bootstrap Modal 打开对应详情；大图、项目简介、客户和类别都可以放在弹窗中，不必跳转到新的 HTML 页面。

修改案例时，缩略图、标题、分类和对应 Modal 必须成组更新，否则列表名称与弹窗内容会错位。六个案例写在同一个文件中，适合项目数量有限的机构站；如果案例持续增长，应考虑用 JSON 或后端数据生成内容，或为每个案例建立独立详情页，避免 index.html 过度膨胀。

固定导航、ScrollSpy 和移动菜单已经绑定

js/scripts.js 会在离开页面顶部后为导航添加收缩样式，Bootstrap ScrollSpy 根据当前可见区块更新导航状态。移动端菜单展开后，点击导航项会触发折叠按钮，减少菜单遮挡正文的情况。这些是当前静态文件中已经存在的前端行为，不依赖额外的路由框架。

样式表包含 Bootstrap 的 576、768、992、1200 和 1400 像素断点，并针对首屏、作品网格、时间线、导航和弹窗增加布局规则。时间线在窄屏改为单侧排列，较宽屏再恢复左右交错；导航在 992 像素以上显示完整菜单，更小尺寸则使用折叠按钮。删减区块时要同步检查对应的锚点和移动端间距。

联系表单不能直接收取询盘

联系区包含姓名、邮箱、电话和留言字段，并提供必填与邮箱格式校验。页面还加载了外部表单脚本，但 data-sb-form-api-token 仍然是 API_TOKEN 占位符，也没有可用的自有提交地址，因此下载后不能直接证明会收到询盘。

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

文件结构和静态部署检查点

资源包的样式集中在 css/styles.css，页面交互位于 js/scripts.js，图片按首屏、作品、时间线、团队和客户 Logo 分类保存在 assets/img。Bootstrap 样式已经合并到 CSS 文件中，没有 npm 配置或构建命令，适合直接从静态文件开始修改和部署。

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

文件头将主题和 Bootstrap 代码标注为 MIT License；分发源码或重要代码部分时应保留相应版权与许可声明。本文依据静态文件结构说明页面能力，没有把占位表单、社交链接或演示内容写成已完成的生产服务。