キーポイント

• BootstrapとMasonryはどちらも強(qiáng)力なWeb開発ツールですが、同時(shí)にそれらを使用すると、特にタブを非表示にする場合はレイアウトエラーを引き起こす可能性があります。
JavaScriptグリッドレイアウトライブラリであるMasonryは、特定のブラウザー互換性の問題がある場合でも、不平等のあるカードグリッドを作成するための実行可能なソリューションです。
ブートストラップタブと石積みを統(tǒng)合するのは簡単ではありません。デフォルトのアクティブタブパネル內(nèi)のグリッドは正しく表示される場合がありますが、タブナビゲーションリンクをクリックして、隠されたパネルの內(nèi)容を表示すると、グリッドアイテムが誤って積み重なる場合があります。
レイアウトエラーの解決策は、各パネルが表示された後に石積みライブラリを再現(xiàn)することです。これは、「shown.bs.tab」イベントを使用することで実現(xiàn)できます。このソリューションを使用すると、優(yōu)れたタイルレイアウトを作成する方が簡単です。

ブートストラップは、最も広く採用されているオープンソースのフロントエンドフレームワークの1つです。プロジェクトにブートストラップを含めると、すぐにレスポンシブWebページを作成できます。 Bootstrap Tabウィジェット（Bootstrapが提供する多くのJavaScriptコンポーネントの1つ）でMasonryを使用しようとすると、おそらく何らかの迷惑な動作に遭遇する可能性があります。

石積みのウェブサイトでは、石積みが…

であると読みました

JavaScriptグリッドレイアウトライブラリ。利用可能な垂直空間に基づいて、要素を最適な位置に配置することで機(jī)能します。

私はこの問題に遭遇しましたが、この記事では、問題がどこにあるのか、どの解決策が得られるかに焦點(diǎn)を當(dāng)てています。

ブートストラップタブの詳細(xì)な説明ブートストラップタブコンポーネントには、タブナビゲーション要素と複數(shù)のコンテンツパネルの2つの重要な関連部品が含まれています。ページが読み込まれると、最初のパネルは.activeクラスを適用します。これにより、デフォルトでパネルが表示されます。このクラスは、JavaScriptを介して使用され、タブナビゲーションリンクの連絡(luò)先イベントを介してパネルの可視性を切り替えます。.Activeが存在する場合、パネルが表示されます。

すべてが1か所で絞られるのではなく、個(gè)別のブロックでレンダリングされるのが最適なWeb??コンテンツがある場合、Bootstrap Tabコンポーネントは役立つ場合があります。

なぜ石工を選ぶのですか？

場合によっては、各パネル內(nèi)のコンテンツは、レスポンシブグリッドレイアウトの表示に適しています。たとえば、さまざまな製品、サービス、ポートフォリオプロジェクトは、グリッド形式で表示できるコンテンツタイプです。 ただし、グリッドセルの高さが等しくない場合、以下が発生する可能性があります。

2つのコンテンツラインの間には大きなギャップがあり、レイアウトは破損しているように見えます。

Bootstrapは、FlexBoxに基づいて新しいカードコンポーネントでMonospaceの問題を解決します。カードデッキクラスを一連のカードコンポーネントに追加するだけで、モノスペース列を?qū)g裝するのに十分です。

カードの長さを一貫性のないものにしたい場合は、CSS3マルチコラムレイアウトを使用できます。 （結(jié)局のところ、一部のブラウザの互換性の問題がある場合でも、全體的にかなり優(yōu)れています。）これは、カードコンポーネントで利用可能な新しいカード列オプションの基礎(chǔ)です。ただし、Masonry JavaScriptライブラリの箱から外れている美しいアニメーションとその広範(fàn)なブラウザの互換性がまだ好きなら、JavaScriptはこの場合でも実行可能なオプションです。

デモページを設(shè)定します

デモページを開始すると、ブートストラップタブと石積みの統(tǒng)合が予想ほど単純ではないことを説明するのに役立ちます。

この記事のデモページは、Bootstrap Webサイトで提供されるスターターテンプレートに基づいています。

以下は、ブートストラップタブコンポーネントでマークされたフレームワークです。

NAV NAV-TABSクラスは、カーキにユニークな外観を與える責(zé)任があります。 HREF屬性の値は、単一のタブと対応するタブコンテンツとの関係を形成します。たとえば、https：//www.miracleart.cn/link/6fbb2c2ee065c77a193d0057aab8fa11のhref値は、ホームのID値を持つDivのタブのコンテンツとの関係を確立します：特定のタブをクリックすると、Divのコンテンツが表示されます。 。

<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="http://www.miracleart.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="http://www.miracleart.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="http://www.miracleart.cn/link/18fb150bb65a5825c83969a59f3febc1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>

さらに、Bootstrapが役割、ARIA制御などのアクセシビリティプロパティに焦點(diǎn)を當(dāng)てている方法に注意してください。

次のコードスニペットは、タブコンテンツの構(gòu)造を示しています：

上記のタブ要素に対応する各タブコンテンツパーツに同様の構(gòu)造を追加するだけです。

<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="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" 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>

完全なコードについては、CodePenデモをご覧ください。

メーソンライブラリ

を追加します 「masonry.pkgd.min.jsをダウンロード」ボタンをクリックして、公式WebサイトからMasonryをダウンロードできます。

レイアウトの問題を回避するために、図書館の著者は、畫像ロードされたプラグインで石積みを使用することをお勧めします。

石積みは、Jquery Libraryを機(jī)能させる必要はありません。ただし、Bootstrap JavaScriptコンポーネントは既にjQueryを使用しているため、私は人生を楽にし、Jqueryの方法で石積みを初期化します。

以下は、jQueryと畫像を使用してメーソンリーを初期化するスニペットです：

上記のコードは、すべてのカード要素を$ containerという変數(shù)に包むDivをキャッシュします。

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

次に、いくつかの推奨オプションを使用して、$ containerで石積みを初期化します。列幅オプションは、水平グリッド列の幅を示します。ここでは、クラス名を使用して、単一のカードアイテムの幅に設(shè)定されます。 ItemSelectorオプションは、プロジェクト要素として使用する子要素を示します。ここでは、単一のカードアイテムとしても設(shè)定されています。

コードをテストする時(shí)が來ました。

ああ！パネルを隠すことの何が問題になっていますか？

上記のコードは、ブートストラップタブを使用しないWebページで正常に動作します。しかし、この場合、あなたはすぐに何か奇妙なことが起こるだろうと気づくでしょう。

まず、デフォルトのアクティブタブパネル內(nèi)のグリッドが正しく表示されているため、かなり良さそうに見えます：

ただし、タブナビゲーションリンクをクリックして非表示パネルの內(nèi)容を表示すると、次のことが起こります。

ソースコードを表示すると、メーソンリーが予想どおりに発射されたことが明らかになりますが、各アイテムの位置は間違って計(jì)算されます。グリッドアイテムはすべて、カードのスタックのように一緒に積み重ねられます。

そしてそれ以上。ブラウザウィンドウを変更すると、グリッドアイテムが正しく配置されます。

レイアウトエラーを修正してみましょう

タブナビゲーションリンクをクリックした後に予期しないレイアウトエラーが明らかになるため、ブートストラップタブでトリガーされたイベントを詳しく見てみましょう。

イベントリストは非常に短いです。これはそれです。

show.bs.tabは、タブが表示されたときに発射されますが、新しいタブが表示される前は

• shown.bs.tab triggers
タブが表示された後。
• hide.bs.tabは、新しいタブを表示するときに起動されます（したがって、前のアクティブタブが非表示になります）
• hidden.bs.tabは、新しいタブが表示された後に起動されます（したがって、前のアクティブタブが非表示になります）。
タブが表示された後、石積みのレイアウトが亂雑になるため、show.bs.tabイベントを選択します。以下は、以前のコードスニペットのすぐ下に置くことができるコードです。

以下は上記のコードで起こることです。

jQuery .each（）関數(shù)は、各タブナビゲーションリンクをループし、shown.bs.tabイベントを聴きます。イベントが発砲すると、すべての畫像がロードされた後、パネルが表示され、石積みが再活性化されます。

<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="http://www.miracleart.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="http://www.miracleart.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="http://www.miracleart.cn/link/18fb150bb65a5825c83969a59f3febc1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>

テストコード

フォローしている場合は、ブラウザでデモを開始するか、以下のCodePenデモを試して結(jié)果を確認(rèn)してください。 Codepenデモリンク

タブナビゲーションリンクをクリックして、今回はグリッドプロジェクトが各コンテンツパネルに均等に適合する方法に注意してください。ブラウザのサイズを変更すると、プロジェクトは美しいアニメーション効果で正しく再配置されます。

それだけです、作業(yè)は行われました！

結(jié)論

この記事では、Bootstrap TabコンポーネントをMasonry JavaScriptライブラリと統(tǒng)合する方法を示しました。

両方のスクリプトは使いやすく、強(qiáng)力です。ただし、それらをまとめると、隠されたタブに影響を與える迷惑なレイアウトエラーに直面する可能性があります。上に示すように、トリックは、各パネルが表示された後に石積みライブラリを再発信することです。 このソリューションを使用すると、優(yōu)れたタイルレイアウトを作成することは簡単です。

ブートストラップの幸せな使用をお祈りします！

ブートストラップタブとメーソンリーのFAQ（FAQ）

（FAQパーツをここに挿入する必要があり、コンテンツは元のFAQパーツと一致しており、セマンティックを変更しておくために必要に応じてわずかに書き直されます）

以上がBootstrapタブをメーソンリーでうまく再生するようにしますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。