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

Agency 适合案例数量不多、希望在一页讲清服务与团队的创意工作室。首屏引出机构定位，接着展示服务、六个作品、发展历程和成员，最后留下联系入口。随包版本为 Agency 7.0.4，使用 Bootstrap 5.0.1，只有一个正式入口 index.html，没有 npm 配置或构建步骤。

导航里的服务、作品、关于、团队和联系都跳向页内区块。访客看完服务可以直接接着看案例，再了解是谁负责交付。对于业务集中、内容变化不频繁的小团队，这样的结构容易整理；需要持续发布文章、大量项目分类或客户门户时，则要扩展独立页面与内容管理。

首屏行动按钮跳到服务区。三项服务之后是作品集，关于区有四段发展时间线，团队区展示三位成员，客户区放了四个 Logo。机构内容不多时，这条路径便于集中介绍。

三项服务卡片不必沿用演示中的电商、响应式设计和安全。可以按自己的交付内容重写，让服务与下方案例对应。发展时间线、人物、客户 Logo 和项目描述也都是模板内容，应该换成真实资料；没有对应经历的区块，可以直接删减。

六个作品弹窗，修改时先找到对应关系

作品区在宽屏使用三列网格，较窄时缩成两列或单列。卡片悬停会出现遮罩与加号，点击后由 Bootstrap Modal 展开大图、简介、客户和类别。详情仍写在同一个 HTML 文件中，访客关闭弹窗就能继续浏览其他作品。

卡片的 href="#portfolioModal1" 等值对应弹窗的 id。替换一个项目时，可以按下面的顺序处理：

1. 找到作品卡片及其对应弹窗，确认链接值与弹窗 ID 配对。
2. 同步修改卡片图片、标题、分类，以及弹窗中的大图、简介、客户和类别。
3. 如果新增作品，为新卡片和弹窗设置新的配对 ID；如果删除作品，也移除对应弹窗。直接复制而不改 ID，可能打开原来的详情。

弹窗适合篇幅较短的作品说明。如果一个案例需要交代目标、过程、对比和成果，独立详情页会更好安排内容。案例不断增加时，继续复制 HTML 和 Modal 也会增加维护负担，可以改为由共享数据生成，或接入内容管理系统。

品牌视觉要连同首屏、按钮和导航一起改

首屏使用背景图配合大字号文字，黄色 #ffc800 用在按钮、链接与作品遮罩等位置。Montserrat 承担主要标题和导航，Roboto Slab 用于部分正文与副标题，两组字体通过 Google Fonts 加载。整体更适合鲜明、直接的机构展示，换成安静的摄影或编辑设计风格时，背景图、强调色与文字排版值得一起调整。

• 首屏背景：css/styles.css 的 header.masthead 引用 assets/img/header-bg.jpg，从这里替换图片。
• 按钮、链接与作品遮罩：样式表已合并编译后的 Bootstrap，部分颜色写成具体色值。只改顶部 --bs-primary 不会让所有地方同步换色，可追加覆盖样式，并处理悬停与焦点状态。
• 导航行为：js/scripts.js 负责滚动后收缩导航、ScrollSpy 与移动端点击后收起菜单。删除区块时，也要整理导航锚点。

导航在 992px 以下使用折叠按钮，时间线则从宽屏的左右交错变成窄屏的单侧排列。替换成长中文标题或不同尺寸的照片时，这两处也值得关注。

联系表单要有真实的收件出口

联系区询问姓名、邮箱、电话和留言，带有必填与邮箱格式验证，并加载外部表单脚本。当前 data-sb-form-api-token 仍是 API_TOKEN 占位符，下载后不能直接收取消息。可以配置对应服务，也可以换成自己的提交接口；成功回执、错误反馈、服务端校验、反垃圾与隐私告知需要随之完成。

客户 Logo、社交按钮、隐私政策与使用条款还有占位链接，定制时要替换成有效入口，或移除不用的项。首屏、作品、时间线和团队图片存放在 assets/img，替换成有使用权的素材后，保持相对路径即可继续从静态文件修改。部署时还需要确认外部字体、Font Awesome、Bootstrap JS 与表单脚本的加载情况。