搜尋

首頁 >web前端 >css教學 >讓bootstrap選項卡與磚石配合使用

讓bootstrap選項卡與磚石配合使用

Lisa Kudrow
Lisa Kudrow原創
2025-02-15 08:31:11765瀏覽

Getting Bootstrap Tabs to Play Nice with Masonry

關鍵要點

  • Bootstrap 和 Masonry 都是強大的 Web 開發工具，但同時使用它們可能會導致佈局錯誤，尤其是在隱藏選項卡的情況下。
  • Masonry，一個 JavaScript 網格佈局庫，即使存在某些瀏覽器兼容性問題，也是創建具有不等長卡片網格的可行方案。
  • 將 Bootstrap 選項卡與 Masonry 集成並非易事。默認活動選項卡面板內的網格可能顯示正確，但單擊選項卡導航鏈接以顯示隱藏面板的內容可能會導致網格項目堆疊不正確。
  • 佈局錯誤的解決方案是在每個面板可見後重新初始化 Masonry 庫。這可以通過使用“shown.bs.tab”事件來實現。有了這個解決方案，創建出色的平鋪佈局就更容易了。

Bootstrap 是最廣泛採用的開源前端框架之一。在您的項目中包含 Bootstrap，您將能夠立即創建響應式網頁。如果您嘗試將 Masonry 與 Bootstrap 選項卡小部件（Bootstrap 提供的眾多 JavaScript 組件之一）一起使用，您很可能會遇到某種令人討厭的行為。

在 Masonry 網站上，我們讀到 Masonry 是……

一個 JavaScript 網格佈局庫。它的工作原理是根據可用的垂直空間將元素放置在最佳位置，有點像泥瓦匠將石頭砌在牆上。

我確實遇到了這個問題，本文重點介紹了問題所在以及您可以採取的解決方法。

Bootstrap 選項卡詳解

Bootstrap 選項卡組件包含兩個關鍵的相關部分：選項卡導航元素和多個內容面板。頁面加載時，第一個面板應用了 .active 類。這使得面板默認可見。此類通過 JavaScript 使用，通過選項卡導航鏈接觸發的事件來切換面板的可見性：如果存在 .active，則面板可見，否則面板隱藏。

如果您有一些 Web 內容最好以單獨的塊呈現，而不是全部擠在一個地方，則 Bootstrap 選項卡組件可能派上用場。

為什麼選擇 Masonry？

在某些情況下，每個面板內的內容適合以響應式網格佈局顯示。例如，一系列產品、服務和作品集項目是可以以網格格式顯示的內容類型。

但是，如果網格單元格的高度不相等，則可能會發生如下情況。

Getting Bootstrap Tabs to Play Nice with Masonry

兩個內容行之間存在很大的間隙，佈局看起來已損壞。

如今，Bootstrap 使用基於 Flexbox 的全新卡片組件解決了等寬問題。只需向一組卡片組件添加 card-deck 類就足以實現等寬列。

如果您希望卡片長度不一致，可以使用 CSS3 多列佈局。 （畢竟，即使存在一些瀏覽器兼容性問題，總體而言它還是相當不錯的。）這是與卡片組件一起提供的新的卡片列選項的基礎。但是，如果您仍然喜歡 Masonry JavaScript 庫開箱即用的精美動畫及其廣泛的瀏覽器兼容性，那麼在這種情況下，JavaScript 仍然是一個可行的選擇。

設置演示頁面

啟動一個演示頁面有助於說明將 Bootstrap 選項卡與 Masonry 集成並非像預期的那樣簡單。

本文的演示頁面基於 Bootstrap 網站上提供的入門模板。

以下是 Bootstrap 選項卡組件標記的框架：

<code class="language-html"><ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="https://www.php.cn/link/6fbb2c2ee065c77a193d0057aab8fa11" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="https://www.php.cn/link/0bd97cb91b8d57dad18542081fb8f2b1" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="https://www.php.cn/link/18fb150bb65a5825c83969a59f3febc1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul></code>

nav nav-tabs 類負責賦予選項卡其特有的外觀。 href 屬性的值形成了單個選項卡與其對應的選項卡內容之間的關係。例如，href 值為 https://www.php.cn/link/6fbb2c2ee065c77a193d0057aab8fa11 會與 id 值為 home 的 div 內的選項卡內容建立關係：單擊該特定選項卡將顯示該 div 內的內容。

此外，請注意 Bootstrap 如何關注輔助功能屬性，例如 role、aria-controls 等。

以下代碼片段說明了選項卡內容的結構：

<code class="language-html"><div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
  <h3>Tab 1 Content</h3>
  <div class="card-group">
    <div class="card">
      <img src="https://img.php.cn/" alt="Getting Bootstrap Tabs to Play Nice with Masonry ">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Card text here.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      </div>
    <div class="card">
      </div>
  </div>
</div></code>

只需為上面編寫的選項卡元素對應的每個選項卡內容部分添加類似的結構即可。

有關完整代碼，請查看 CodePen 演示。

添加 Masonry 庫

您可以通過單擊“下載 masonry.pkgd.min.js”按鈕從官方網站下載 Masonry。

為了避免佈局問題，庫的作者建議將 Masonry 與 imagesLoaded 插件一起使用。

Masonry 不需要 jQuery 庫即可工作。但是，由於 Bootstrap JavaScript 組件已經使用 jQuery，因此我將使生活更輕鬆，並以 jQuery 方式初始化 Masonry。

以下是使用 jQuery 和 imagesLoaded 初始化 Masonry 的代碼片段：

<code class="language-javascript">var $container = $('.masonry-container');
$container.imagesLoaded( function () {
  $container.masonry({
    columnWidth: '.card',
    itemSelector: '.card'
  });   
});  </code>

上面的代碼將包裝所有卡片元素的 div 緩存在名為 $container 的變量中。

接下來，使用幾個推薦的選項在 $container 上初始化 Masonry。 columnWidth 選項指示水平網格列的寬度。在這裡，它通過使用其類名設置為單個卡片項目的寬度。 itemSelector 選項指示要將哪些子元素用作項目元素。在這裡，它也設置為單個卡片項目。

現在是測試代碼的時候了。

哎呀！隱藏面板怎麼了？

在不使用 Bootstrap 選項卡的網頁上，上面的代碼運行良好。但是，在這種情況下，您很快就會意識到會發生某種奇怪的行為。

首先，它看起來還不錯，因為默認活動選項卡面板內的網格顯示正確：

Getting Bootstrap Tabs to Play Nice with Masonry

但是，如果您單擊選項卡導航鏈接以顯示隱藏面板的內容，則會發生以下情況：

Getting Bootstrap Tabs to Play Nice with Masonry

查看源代碼會發現 Masonry 已按預期觸發，但每個項目的位置計算不正確：網格項目像一疊卡片一樣全部堆疊在一起。

而且不止如此。調整瀏覽器窗口大小會導致網格項目正確地定位自身。

讓我們修復佈局錯誤

由於意外的佈局錯誤在單擊選項卡導航鏈接後變得明顯，讓我們更仔細地研究一下 Bootstrap 選項卡觸發的事件。

事件列表非常短。這是它。

  • show.bs.tab 在選項卡顯示時觸發，但在新選項卡顯示之前
  • shown.bs.tab 在選項卡顯示後觸發
  • hide.bs.tab 在要顯示新選項卡時觸發（因此之前的活動選項卡將被隱藏）
  • hidden.bs.tab 在顯示新選項卡後觸發（因此之前的活動選項卡被隱藏）。

因為在顯示選項卡後 Masonry 佈局會變得混亂，所以選擇 shown.bs.tab 事件。這是您可以將其放在前面代碼片段正下方的代碼：

<code class="language-html"><ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="https://www.php.cn/link/6fbb2c2ee065c77a193d0057aab8fa11" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="https://www.php.cn/link/0bd97cb91b8d57dad18542081fb8f2b1" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="https://www.php.cn/link/18fb150bb65a5825c83969a59f3febc1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul></code>

以下是上面代碼中發生的情況：

jQuery .each() 函數循環遍歷每個選項卡導航鏈接並偵聽 shown.bs.tab 事件。當事件觸發時，面板變得可見，並且在所有圖像加載完成後重新初始化 Masonry。

測試代碼

如果您一直在關注，請在瀏覽器中啟動您的演示，或嘗試下面的 CodePen 演示以查看結果：

CodePen 演示鏈接

單擊選項卡導航鏈接，並註意這次網格項目如何均勻地適應每個內容面板。調整瀏覽器大小會導致項目以精美的動畫效果正確地重新定位自身。

就是這樣，工作完成了！

結論

在本文中，我演示瞭如何將 Bootstrap 選項卡組件與 Masonry JavaScript 庫集成。

這兩個腳本都易於使用且功能強大。但是，將它們放在一起，您將面臨一些影響隱藏選項卡的煩人的佈局錯誤。如上所示，訣竅是在每個面板可見後重新初始化 Masonry 庫。

有了這個解決方案，創建出色的平鋪佈局將輕而易舉。

祝您 Bootstrap 使用愉快！

Bootstrap 選項卡和 Masonry 的常見問題解答 (FAQ)

(此處應插入FAQ部分，內容與原文FAQ部分一致，並根據需要進行輕微改寫，保持語義不變)

以上是讓bootstrap選項卡與磚石配合使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript jquery bootstrap css3 前端框架 循环 堆 JS 事件 href
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：15個引導工具和操場下一篇：15個引導工具和操場

相關文章

看更多