Bootstrap 5无内置画廊组件，需用栅格系统（.row+.col-）布局卡片网格，配合object-fit-cover防变形、h-100等高、g-3控间隙；点击缩略图通过data-bs-属性驱动模态框动态加载大图，并添加loading="lazy"优化性能。
Bootstrap 本身不提供“作品画廊”这种开箱即用的组件，但用 Bootstrap 5 的栅格系统、卡片（card）、模态框（modal）和少量 CSS 就能快速搭出响应式、可点击放大、适配手机的作品展示页——关键不是套模板，而是控制好图片尺寸、懒加载和点击交互逻辑。
用 card + row/col 布局作品网格，别用 carousel
摄影师作品需要并排浏览、自由点击，carousel 是轮播，不适合画廊。正确做法是用 row 包裹多组 col-*-*，每列放一个 card：
<div class="row g-3">
<div class="col-md-4 col-sm-6">
<div class="card h-100 border-0 shadow-sm overflow-hidden">
@@##@@
<div class="card-body p-3">
<h6 class="card-title mb-1">山间晨雾</h6>
<p class="text-muted small mb-0">2024.04｜富士 X-T4</p>
</div>
</div>
</div>
<!-- 更多 col -->
</div>
-
object-fit-cover是必须加的类，否则图片会被拉伸或留白；Bootstrap 5.3+ 默认支持，旧版需自行加 CSS -
h-100让卡片等高，避免因标题长度不同导致错位 -
g-3控制列间距，比默认g-2更宽松，适合作品呼吸感 - 不要给
img设固定width，让栅格系统控制宽度，只设height或用aspect-ratio
点击缩略图弹出高清大图，用 modal + data-bs-* 属性驱动
用户点小图要看到原图或更大尺寸，不用第三方库，纯 Bootstrap modal 就够用。核心是把大图地址存在 data-bs-* 里，点击时注入到 modal 的 img 中：
@@##@@ <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a> <p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p> </div> <a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div><div class="modal fade" id="photoModal" tabindex="-1"> <div class="modal-dialog modal-xl modal-dialog-centered"> <div class="modal-content border-0"> @@##@@ <div class="modal-body text-center p-3"> <p class="mb-0 text-muted small caption-text"></p> </div> </div> </div> </div>
- JS 只需监听 click，取
data-fullsrc和data-caption，填进 modal 对应元素：document.querySelector('.modal-img').src = fullSrc - 别用
modal-body放图，直接塞在modal-content里，避免 padding 挤压显示区域 -
object-fit: contain确保高清图完整可见，不会被裁切；若想居中裁切，改用cover并加background-size替代img标签
图片加载慢？加 loading="lazy" 和占位色块
作品图体积大，首屏外图片必须懒加载，否则影响 LCP。Bootstrap 不处理这个，得自己补：
- 所有作品
img标签加上loading="lazy"属性（现代浏览器原生支持） - 为防止布局抖动，在 CSS 里统一设占位：
.card-img-top { background: #f8f9fa; } - 如果服务端支持 WebP，用
picture+source切格式： - 慎用
width/height属性——它们会触发浏览器预分配空间，但若值不准反而造成重绘；优先用 CSSaspect-ratio: 4/3
真正难的不是布局，是图片资源管理：缩略图尺寸是否统一？原图路径是否可直链访问？点击后 modal 是否在 iOS Safari 上正确居中？这些细节不写 JS 或不测真机，上线就露馅。
