使用Bootstrap組件創建模態圖像庫

有沒有看到單擊圖像的網頁打開更大的版本，並配有導航以瀏覽其他照片？它通常稱為Lightbox或彈出窗口，但我們將使用Bootstrap的模態功能進行構建。為什麼要自舉？

• 現有集成：如果您的網站已經使用Bootstrap，則添加此功能可以避免額外的資源加載。
• 自定義：與許多模態插件相比，Bootstrap對視覺方面提供了更大的控制。
• 簡單性：對於這項相對簡單的任務，利用Bootstrap比從頭開始構建更有效。

這是最終結果：[鏈接到演示 - 如果可用，請替換為實際的演示鏈接]

讓我們逐步分解過程。

步驟1：構建圖片庫網格

我們將使用Bootstrap的網格系統來創建圖像佈局。最初，我們有一個簡單的圖像網格：

<div id="gallery" data-toggle="modal" data-target="#exampleModal">
  <div><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174416821533132.jpg" class="lazy" alt="使用Bootstrap組件創建模態圖像庫"></div>
  <div><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174416821688127.jpg" class="lazy" alt="使用Bootstrap組件創建模態圖像庫"></div>
  <div><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174416821696309.jpg" class="lazy" alt="使用Bootstrap組件創建模態圖像庫"></div>
  <div><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174416821747008.jpg" class="lazy" alt="使用Bootstrap組件創建模態圖像庫"></div>
</div>

關鍵補充：

1. data-toggle="modal"和data-target="#exampleModal"畫廊容器（ #gallery ）觸發模態。 #exampleModal是我們模態的ID。
2. data-target="https://www.php.cn/link/6c76b077da2c70369698bfef9bfb5be7"和每個圖像上的data-slide-to屬性鏈接鏈接到旋轉木馬的鏈接，並定義了滑動順序。 https://www.php.cn/link/6c76b077da2c70369698bfef9bfb5be7是模態內旋轉木馬的ID。

步驟2：創建功能模式

這涉及將引導旋轉木馬嵌入自舉模式中。該代碼主要來自Bootstrap文檔，並進行了關鍵調整：

1. 模態ID（ #exampleModal ）與圖庫中的data-target匹配。
2. 輪播ID（ https://www.php.cn/link/6c76b077da2c70369698bfef9bfb5be7 ）與圖像標籤中的data-target匹配。
3. 旋轉木馬幻燈片鏡像畫廊圖像，保持相同的順序。

這是模態標記的簡化版本（完整代碼很長，在原始文章中可用）：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <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">
        <div id="carouselExample" class="carousel slide" data-ride="carousel">
          
          <a class="carousel-control-prev" href="https://www.php.cn/link/6c76b077da2c70369698bfef9bfb5be7" role="button" data-slide="prev">以前的</a>
          <a class="carousel-control-next" href="https://www.php.cn/link/6c76b077da2c70369698bfef9bfb5be7" role="button" data-slide="next">下一個</a>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
      </div>
    </div>
  </div>
</div>

記得用<div class="carousel-item">包含全尺寸圖像的元素。<h3 id="步驟-一致的圖像尺寸-可選">步驟3：一致的圖像尺寸（可選）</h3> <p>為了保持視覺一致性，尤其是如果圖像具有不同的尺寸，請使用CSS裁剪它們。原始文章使用SASS，但該概念轉化為標準CSS：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> #gallery img { / *響應式圖像尺寸 */ } .carousel-item img { / *旋轉木旋的響應式圖像尺寸 */ }</pre><div class="contentsignin">登入後複製</div></div> <h3 id="步驟-圖像優化">步驟4：圖像優化</h3> <p>在畫廊（ <code>/image-1-small.jpg等）中使用較低分辨率的圖像，並在旋轉木馬內使用更高分辨率的版本，以實現最佳性能。這是頁面加載時間的重大改進。

這種簡化的解釋提供了核心步驟。有關完整的代碼和更詳細的說明，請參閱原始文章。請記住，要包含必要的引導CSS和JavaScript文件，以使其正常運行。

以上是使用Bootstrap組件創建模態圖像庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！