搜索

首页 >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 Bootstrap Tools and Playgrounds下一篇：Game AI: The Bots Strike Back!

相关文章

查看更多