使用Bootstrap 5栅格布局与modal实现响应式画廊，需统一缩略图尺寸、动态注入主图src、添加懒加载及优化移动端滑动交互。
用 bootstrap 的栅格 + modal 实现基础响应式画廊
直接套用 bootstrap 5 的 container-fluid 和 row + col-* 就能撑起响应式布局，但关键在于图片尺寸控制和模态框触发逻辑。别用 img-fluid 简单加在缩略图上——它会让小图拉伸变形。缩略图应统一设为 width: 100% + height: auto，主图在 modal 里用 max-width: 90vw 防溢出。
实操建议：
- 缩略图容器用
col-6 col-sm-4 col-md-3 col-lg-2，保证小屏双列、大屏六列 - 每个缩略图包裹在
<a href="#modal" data-bs-toggle="modal" data-bs-target="#imageModal"></a>中，不要用button—— 屏幕阅读器对链接的语义更明确 - modal 的
modal-dialog加modal-dialog-centered，否则大图在移动端容易被顶到顶部看不见
data-bs-target 动态绑定主图 src 的坑怎么填
Bootstrap 原生 modal 不支持动态换图，硬写多个 modal 会冗余且难维护。必须用 JS 监听点击事件，把缩略图的 src 或 data-large-src 注入到 modal 里的 <img>。
常见错误现象：Uncaught TypeError: Cannot set property 'src' of null —— 因为 modal 内容还没渲染完就操作 DOM，或 selector 写错。
实操建议：
- 缩略图加自定义属性：
data-large-src="path/to/fullsize.jpg" - modal 图片标签写成：
<img src="" class="modal-img" alt=""> - JS 里监听
show.bs.modal事件（不是click），确保 modal 已初始化再赋值：document.addEventListener('show.bs.modal', event => { const button = event.relatedTarget; const largeSrc = button.getAttribute('data-large-src'); const img = event.target.querySelector('.modal-img'); if (img && largeSrc) img.src = largeSrc; });
缩略图预览滚动条卡顿、加载慢的优化点
几十张图全量加载缩略图，首屏卡顿明显，尤其弱网环境。Bootstrap 不管懒加载，得自己补。
使用场景：画廊超过 12 张图时，必须做懒加载；如果后端支持 WebP，优先用 srcset 切换格式。
实操建议：
- 缩略图
src先设为空或 placeholder，用data-src存真实路径 - 用原生
IntersectionObserver替代 jQuery 插件，轻量且兼容性够（IE 不支持，但 Bootstrap 5 本就不支持 IE） - 避免在
scroll事件里直接操作 DOM，观察器回调里才触发img.src = img.dataset.src - 给缩略图加
loading="lazy"（现代浏览器支持，作为兜底）
移动端触摸滑动切换图片要避开 Bootstrap 的 modal 拦截
默认 modal 在移动端点击背景关闭，但用户想左右滑动切图时，手指一滑就关掉了 modal —— 这是因为 Bootstrap 的 modal 绑定了 touchstart 事件来判断是否点在 backdrop 上。
性能影响：强行禁用 backdrop 关闭，会牺牲无障碍体验；不处理则交互断裂。
实操建议：
- 在 modal 显示后，给
.modal-content加临时类no-backdrop-close - CSS 里写：
.no-backdrop-close ~ .modal-backdrop { pointer-events: none; } - 滑动逻辑用
touchstart/touchmove/touchend计算位移，只在Math.abs(deltaX) > 30时触发切换，避免误触 - 切换完成后，手动恢复 backdrop 的
pointer-events，否则用户无法点背景关闭
缩略图数量多、图片体积大、触摸交互细节多——这些地方没显式写进 Bootstrap 文档，但实际项目里几乎必踩。留心 data-bs-target 和 show.bs.modal 的配合时机，比写 CSS 更容易出问题。
