Bootstrap虽无现成作品集模板，但可用栅格、card等组件构建响应式作品集；需按实际内容组织container→row→card结构，优先保证图片比例、懒加载和基础布局，再渐进增强交互。
Bootstrap 本身不提供“作品集模板”，但用它的栅格、卡片和组件能快速搭出响应式作品集——关键不是套模板，而是按内容结构组织好 container、row 和 card，再用自定义 CSS 控制图片比例和悬停效果。
怎么组织作品集的页面结构
别从“首页+关于+作品+联系”全盘照搬。先列清楚你实际要放什么：是 6 张图？带标题+描述+技术标签的 8 个项目？还是需要筛选分类？结构决定后续写法。
- 纯展示型（无交互）：用
container→row→ 多个col-md-4或col-lg-3包裹card - 带分类筛选：得加
button组 + JavaScript 过滤逻辑，Bootstrap 本身不处理这个，得自己写data-category和filter() - 单项目详情页：别塞在首页里，单独建
project-detail.html，用card-img-top放大图，card-body写技术栈和链接
为什么 card 比 jumbotron 或 list-group 更适合作品项
card 天然支持图片+文字+操作按钮的垂直流布局，且自带响应式断点类；而 jumbotron 是强调型大区块，list-group 缺少视觉分隔和图片承载能力。
- 每个作品用一个
card，图片用card-img-top（自动等宽拉伸），文字放card-body - 避免直接给
card-img-top设height，会导致图片变形；改用object-fit: cover+ 容器固定宽高比（比如用position: relative; padding-top: 75%配绝对定位图片） - 悬停放大效果别用
transform: scale()直接作用在图片上——会溢出卡片边界；应该加在card上，并设overflow: hidden
加载大量作品图时的性能坑
Bootstrap 不管图片懒加载，但用户滚动到作品区才加载图，能明显提升首屏速度。原生 loading="lazy" 在现代浏览器已可用，比 JS 插件更轻量。
- 所有作品图的
loading="lazy"属性 - 别用 Bootstrap 的
img-fluid就完事——它只做响应式缩放，不解决尺寸过大问题；上传前就该用工具把图压缩到宽度 ≤1200px、质量 70–80% - 如果作品图需要点击放大，别用
data-toggle="modal"套默认 Modal——它没图片预加载和手势支持；改用轻量库如lightgallery.js，只在需要时引入
真正卡住进度的往往不是 Bootstrap 类名记不住，而是图片尺寸没控好、悬停动效破坏布局、或过早引入复杂筛选逻辑。先让 6 个项目干净地排成三列，再逐个加交互。
