Bootstrap本身不提供带缩放、拖拽、全屏等交互功能的图片预览组件，仅靠CSS无法实现真正预览页；需结合JS或第三方库补足事件绑定、键盘控制、懒加载、手势等能力。
Bootstrap 本身不提供专门的图片预览组件（比如带缩放、拖拽、全屏的 Lightbox），直接用它的栅格和工具类只能做静态展示，真要实现“预览页”效果，得自己补逻辑或引入第三方库。
为什么不能只靠 bootstrap.css 实现完整预览功能
Bootstrap 的 .img-fluid、.card、modal 等可以快速搭出结构，但缺这些关键能力：
- 点击小图弹出大图（需 JS 绑定事件）
- 键盘控制（← → ESC）切换/关闭（原生 modal 不支持）
- 图片懒加载、错误占位、宽高比保持（
object-fit: contain得手动加） - 移动端手势（双指缩放、滑动切换）完全没覆盖
所以纯 Bootstrap 只能做「静态图片展示页」，不是真正意义上的「预览页」。
用 bootstrap-modal + 简单 JS 实现基础预览
如果你只需要点击放大、点击遮罩关闭、支持键盘 ESC，可以复用 Bootstrap 的 Modal 组件，避免额外依赖：
<!-- 小图列表 -->
<div class="row">
<div class="col-3">
<a href="big1.jpg" data-bs-toggle="modal" data-bs-target="#imageModal">
<img src="thumb1.jpg" class="img-fluid rounded" alt="怎么用Bootstrap制作图片预览页" >
</a>
</div>
<div class="col-3">
<a href="big2.jpg" data-bs-toggle="modal" data-bs-target="#imageModal">
<img src="thumb2.jpg" class="img-fluid rounded" alt="怎么用Bootstrap制作图片预览页" >
</a>
</div>
</div>
<p><!-- 预览 Modal -->
<div class="modal fade" id="imageModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-body d-flex justify-content-center align-items-center p-0">
<img id="modalImage" class="img-fluid" style="max-width:90%" alt="怎么用Bootstrap制作图片预览页" >
</div>
</div>
</div>
</div>再加一段轻量 JS 处理点击源和图片替换：
document.querySelectorAll('[data-bs-target="#imageModal"]').forEach(el => {
el.addEventListener('click', function(e) {
e.preventDefault();
const imgSrc = this.href;
document.getElementById('modalImage').src = imgSrc;
});
});注意点：
-
object-fit: contain必须显式写，否则大图可能被拉伸或裁剪 -
max-height: 80vh比固定高度更适应不同屏幕 - Modal 默认不阻止 ESC 关闭，但若页面有其他监听，可能冲突
遇到 TypeError: Cannot read property 'show' of undefined 怎么办
这是最常见的报错，基本都是因为：
- Bootstrap JS 未正确加载（检查是否漏了
bootstrap.bundle.min.js或少了 Popper） - JS 执行时 DOM 还没就绪（把脚本放
