使用 Bootstrap 组件创建模态图像库

您是否曾经点击网页上的图像，打开图像的更大版本并导航以查看其他照片？

有些人称之为弹出窗口。其他人称之为灯箱。 Bootstrap 称之为模态。 我提到 Bootstrap 是因为我想用它来做同样的事情。因此，从现在开始，我们称之为模态。

为什么使用 Bootstrap？ 你可能会问。好吧，有几个原因

• 我已经在我想使用此效果的网站上使用 Bootstrap 了，因此在加载资源方面没有额外的开销。
• 我想要一些我可以完全轻松控制美观的东西。与我遇到的大多数模态插件相比，Bootstrap 是一个干净的画布。
• 我需要的功能相当简单。从头开始编码一切没有太多好处。我认为使用 Bootstrap 框架节省的时间比任何潜在的缺点更有益。

这是我们将要达到的目标

让我们一步步地进行。

步骤 1：创建图像库网格

让我们从图像网格布局的标记开始。我们可以使用 Bootstrap 的 网格系统 来实现这一点。

<div class="row" id="gallery">
  <div class="col-12 col-sm-6 col-lg-3">
    <img class="w-100" src="/image-1">
  </div>
  <div class="col-12 col-sm-6 col-lg-3">
    <img class="w-100" src="/image-2">
  </div>
  <div class="col-12 col-sm-6 col-lg-3">
    <img class="w-100" src="/image-3">
  </div>
  <div class="col-12 col-sm-6 col-lg-3">
    <img class="w-100" src="/image-4">
  </div>
</div>

现在我们需要 数据属性 来使这些图像具有交互性。Bootstrap 查看数据属性以确定哪些元素应该具有交互性以及它们应该做什么。在这种情况下，我们将创建打开模态组件的交互，并允许使用 轮播组件 滚动浏览图像。

关于这些数据属性

1. 我们将添加 data-toggle="modal" 和 data-target="#exampleModal" 到父元素 (#gallery) 中。这使得点击画廊中的任何内容都会打开模态。我们还应该将 data-target 值 (#exampleModal) 添加为模态本身的 ID，但是我们会在到达模态标记时进行操作。
2. 让我们为每个图像添加 data-target="#carouselExample" 和一个 data-slide-to 属性。我们可以将它们添加到图像包装器中，但我们将在本文中使用图像。稍后，我们将需要使用 data-target 值 (#carouselExample) 作为轮播的 ID，因此请记住这一点，以便我们到达那里。data-slide-to 的值基于图像的顺序。

以下是我们将它们组合在一起时得到的内容

<div class="row" id="gallery" data-toggle="modal" data-target="#exampleModal">
  <div class="col-12 col-sm-6 col-lg-3">
    <img class="w-100" src="/image-1.jpg" data-target="#carouselExample" data-slide-to="0">
  </div>
  <div class="col-12 col-sm-6 col-lg-3">
    <img class="w-100" src="/image-2.jpg" data-target="#carouselExample" data-slide-to="1">
  </div>
  <div class="col-12 col-sm-6 col-lg-3">
    <img class="w-100" src="/image-3.jpg" data-target="#carouselExample" data-slide-to="2">
  </div>
  <div class="col-12 col-sm-6 col-lg-3">
    <img class="w-100" src="/image-4.jpg" data-target="#carouselExample" data-slide-to="3">
  </div>
</div>

有兴趣了解更多关于数据属性的信息吗？查看 CSS-Tricks 的指南。

步骤 2：使模态起作用

这是一个位于模态内部的轮播，两者都是标准的 Bootstrap 组件。我们只是在这里将它们嵌套在一起。几乎是 Bootstrap 文档 中的直接复制粘贴工作。

以下是一些需要注意的重要部分

1. 模态 ID 应该与画廊元素的 data-target 相匹配。
2. 轮播 ID 应该与画廊中图像的 data-target 相匹配。
3. 轮播幻灯片应该与画廊图像匹配，并且必须按相同的顺序排列。

以下是模态的标记，其中包含我们的属性

<!-- Modal markup: https://bootstrap.ac.cn/docs/4.4/components/modal/ -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        
      <!-- Carousel markup goes here -->


      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

我们可以将轮播标记直接放在那里，就像 Voltron 一样！

<!-- Modal markup: https://bootstrap.ac.cn/docs/4.4/components/modal/ -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        
      <!-- Carousel markup: https://bootstrap.ac.cn/docs/4.4/components/carousel/ -->
      <div id="carouselExample" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block w-100" src="/image-1.jpg">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="/image-2.jpg">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="/image-3.jpg">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="/image-4.jpg">
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

看起来有很多代码，对吧？再次强调，它基本上是直接来自 Bootstrap 文档的，只是包含了我们的属性和图像。

步骤 3：处理图像大小

这不是必需的，但如果轮播中的图像具有不同的尺寸，我们可以使用 CSS 对它们进行裁剪以保持一致性。请注意，我们在这里使用 Sass。

// Use Bootstrap breakpoints for consistency.
$bootstrap-sm: 576px;
$bootstrap-md: 768px;
$bootstrap-lg: 992px;
$bootstrap-xl: 1200px;


// Crop thumbnail images.
#gallery {
  img {
    height: 75vw;
    object-fit: cover;
    
    @media (min-width: $bootstrap-sm) {
      height: 35vw;
    }
    
    @media (min-width: $bootstrap-lg) {
      height: 18vw;
    }
  }
}


// Crop images in the coursel
.carousel-item {
  img {
    height: 60vw;
    object-fit: cover;
    
    @media (min-width: $bootstrap-sm) {
      height: 350px;
    }
  }
}

步骤 4：优化图像

您可能已经注意到，标记在画廊中使用与模态中相同的图像文件。没有必要这样做。实际上，最好在画廊中使用更小、性能更好的图像版本。我们将在模态中将图像放大到其完整尺寸版本，因此无需在前端使用最佳质量。

Bootstrap 方法的好处是，我们可以使用与模态中不同的图像在画廊中。它们并不相互排斥，不需要指向同一个文件。

因此，为此，我建议使用更低质量的图像更新画廊标记

<div class="row" id="gallery" data-toggle="modal" data-target="#exampleModal">
  <div class="col-12 col-sm-6 col-lg-3">
    <img class="w-100" src="/image-1-small.jpg" data-target="#carouselExample" data-slide-to="0">
  
  <!-- and so on... -->
</div>

就是这样！

我正在使用的网站已经 对 Bootstrap 进行了主题化。这意味着一切都已经按照规范进行了样式化。也就是说，即使您没有对 Bootstrap 进行主题化，您仍然可以轻松添加自定义样式！通过这种方法（Bootstrap 与插件），自定义非常简单，因为您可以完全控制标记，并且 Bootstrap 的样式相对稀疏。

以下是最终的演示