怎么用Bootstrap制作图片预览页-Bootstrap教程-PHP中文网

Bootstrap本身不提供带缩放、拖拽、全屏等交互功能的图片预览组件，仅靠CSS无法实现真正预览页；需结合JS或第三方库补足事件绑定、键盘控制、懒加载、手势等能力。

怎么用bootstrap制作图片预览页

Bootstrap 本身不提供专门的图片预览组件（比如带缩放、拖拽、全屏的 Lightbox），直接用它的栅格和工具类只能做静态展示，真要实现“预览页”效果，得自己补逻辑或引入第三方库。

为什么不能只靠 `bootstrap.css` 实现完整预览功能

Bootstrap 的 .img-fluid、.card、modal 等可以快速搭出结构，但缺这些关键能力：

点击小图弹出大图（需 JS 绑定事件）
键盘控制（← → ESC）切换/关闭（原生 modal 不支持）
图片懒加载、错误占位、宽高比保持（object-fit: contain 得手动加）
移动端手势（双指缩放、滑动切换）完全没覆盖

所以纯 Bootstrap 只能做「静态图片展示页」，不是真正意义上的「预览页」。

用 `bootstrap-modal` + 简单 JS 实现基础预览

如果你只需要点击放大、点击遮罩关闭、支持键盘 ESC，可以复用 Bootstrap 的 Modal 组件，避免额外依赖：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

<!-- 小图列表 -->
<div class="row">
  <div class="col-3">
    <a href="big1.jpg" data-bs-toggle="modal" data-bs-target="#imageModal">
      @@##@@
    </a>
  </div>
  <div class="col-3">
    <a href="big2.jpg" data-bs-toggle="modal" data-bs-target="#imageModal">
      @@##@@
    </a>
  </div>
</div>
<p><!-- 预览 Modal -->
</p><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">
@@##@@
</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;
  });
});

注意点：