选项卡 bootstrap_使Bootstrap选项卡与砌体一起发挥作用-CSDN博客

选项卡 bootstrap

Bootstrap是最广泛采用的开源前端框架之一。 将Bootstrap包含在您的项目中，您将能够立即生成响应式网页。 如果您尝试将Masonry与Bootstrap Tabs小部件（Bootstrap必须提供的众多JavaScript组件之一）一起使用，那么您可能会偶然发现了某种令人讨厌的行为。

在砌体网站上，我们看到砌体是……

JavaScript网格布局库。它通过根据可用的垂直空间将元素放置在最佳位置来工作，就像砌墙的石匠一样。

我做到了，本文重点介绍了问题所在以及解决该问题的方法。

引导标签说明

Bootstrap选项卡组件包括两个关键的相关部分：一个选项卡式导航元素和多个内容面板。在页面加载时，第一个面板上应用了.active类。默认情况下，这使面板可见。通过JavaScript使用此类，可通过选项卡式导航链接触发的事件来切换面板的可见性：如果存在.active ，则面板可见，否则面板被隐藏。

如果您有一些最好以单独的块形式呈现的Web内容，而不是全部塞满，Bootstrap选项卡组件可能会派上用场。

为什么要砌石？

在某些情况下，每个面板内的内容都适合在响应网格布局中显示。例如，一系列产品，服务和投资组合项目是可以以网格格式显示的内容类型。

但是，如果网格单元的高度不同，则可能会发生以下情况。

没有砌体的网格布局

较大的间隙将两行内容分隔开，并且布局似乎已损坏。

如今，Bootstrap通过基于Flexbox的全新卡组件解决了等宽问题。仅将card-deck 类添加到一组卡组件中就足以实现等宽列。

如果您希望卡片的长度不均匀，则可以使用CSS3多列布局。（毕竟，即使存在一些浏览器支持错误，总的来说还是不错的。）这是card组件随附的新card column选项的基础。但是，如果您仍然喜欢Masonry JavaScript库提供的精美动画以及其广泛的浏览器兼容性，那么在这种情况下，JavaScript仍然是可行的选择。

设置演示页面

启动并运行演示页面有助于说明如何将Bootstrap Tabs与Masonry集成起来并不像人们期望的那么简单。

本文的演示页面基于Bootstrap网站上提供的入门模板。

以下是“引导程序”选项卡组件的标记的框架：

<ul class="nav nav-tabs" id="myTab" role="tablist">

  <!-- nav item 1 -->
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>

  <!-- nav item 2 -->
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>

  <!-- nav item 3 -->
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>

nav nav-tabs类负责赋予选项卡其独特的外观。 href属性的值形成单个选项卡及其对应的选项卡式内容之间的关系。例如， href值为#home会与带有id="home"的选项卡式内容创建关系：单击该特定选项卡将显示id为home的div的内容。

另外，请注意Bootstrap如何注意可访问性属性，例如role ， aria-controls等。

这是一个代码片段，用于说明选项卡式内容的结构：

<!-- content 1 -->
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
  <h3>Tab 1 Content</h3>
<div class="card-group">

  <!-- first card -->
  <div class="card">
    <img class="card-img-top" src="path/to/img" alt="Card image cap">
    <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>

  <!-- second card -->
  <div class="card">
    <!-- card markup here -->
  </div&lgt;

  <!-- third card -->
  <div class="card">
    <!-- card markup here -->
  </div>

  </div>
</div>

只需为每个选项卡式内容部分添加与您上面编码的选项卡元素相对应的类似结构即可。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

有关完整代码，请查看CodePen演示。

添加砌体库

您可以通过单击下载masonry.pkgd.min.js按钮从官方网站下载Masonry 。

为了避免布局问题，该库的作者建议将Masonry与imagesLoaded插件一起使用。

Masonry不需要jQuery库即可工作。但是，由于Bootstrap JavaScript组件已经使用jQuery，因此我将为自己简化生活并以jQuery方式初始化Masonry。

这是使用jQuery和imagesLoaded初始化Masonry的代码片段：

var $container = $('.masonry-container');
$container.imagesLoaded( function () {
  $container.masonry({
    columnWidth: '.card',
    itemSelector: '.card'
  });   
});

上面的代码缓存div ，该div将所有卡元素包装在一个名为$container的变量$container 。

接下来，使用几个推荐的选项在$container上初始化Masonry。 columnWidth选项指示水平网格的列的宽度。在这里，通过使用其类别名称将其设置为单个卡片项目的宽度。 itemSelector选项指示哪些子元素将用作项目元素。在这里，它也设置为单个卡片项目。

现在该测试代码了。

糟糕！隐藏面板怎么了？

在不使用“引导程序选项卡”的网页上，以上代码的工作原理就像一个超级按钮。但是，在这种情况下，您很快就会意识到一种有趣的行为发生了。

首先，这看起来不错，因为正确显示了默认活动选项卡面板中的网格：

包含砌体的第一个活动选项卡面板

但是，如果单击选项卡式导航链接以显示隐藏面板的内容，则会发生以下情况：

最初包含石工隐藏的内部面板网格

窥视源代码可以发现Masonry已按预期射击，但每个物品的位置都无法正确计算：网格物品都像一叠纸牌一样彼此堆叠。

不仅如此。调整浏览器窗口的大小会使网格项目正确定位。

让我们修复布局错误

由于单击选项卡式导航链接后会出现意外的布局错误，因此让我们更仔细地研究Bootstrap选项卡引发的事件。

事件列表很短。这里是。

show.bs.tab在选项卡显示时触发，但在显示新选项卡之前
显示标签后， bs.tab会在标签显示上触发
当显示一个新标签时， hide.bs.tab会触发（因此，前一个活动标签将被隐藏）
显示新标签页后， hidden.bs.tab将触发（因此，先前的活动标签页将被隐藏）。

由于在显示选项卡后砌体布局会混乱，因此请进入shown.bs.tab事件。这是代码，您可以将其放置在上一个代码片段的正下方：

$('a[data-toggle=tab]').each(function () {
  var $this = $(this);

  $this.on('shown.bs.tab', function () {
    $container.imagesLoaded( function () {
      $container.masonry({
        columnWidth: '.card',
        itemSelector: '.card'
      });   
    });  
  });
});

这是上面的代码中发生的事情：

jQuery .each()函数在每个选项卡式导航链接上循环，并侦听shown.bs.tab事件。当事件触发时，面板将变为可见状态，并且在完成所有图像的加载后，将重新初始化石工。