ホームページ >ウェブフロントエンド >CSSチュートリアル >Bootstrapタブをメーソンリーでうまく再生するようにします

Bootstrapタブをメーソンリーでうまく再生するようにします

Lisa Kudrowオリジナル: 2025-02-15 08:31:11765ブラウズ

Getting Bootstrap Tabs to Play Nice with Masonry

キーポイント

BootstrapとMasonryはどちらも強力なWeb開発ツールですが、同時にそれらを使用すると、特にタブを非表示にする場合はレイアウトエラーを引き起こす可能性があります。

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

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

であると読みました

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

私はこの問題に遭遇しましたが、この記事では、問題がどこにあるのか、どの解決策が得られるかに焦点を当てています。

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

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

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

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

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

Getting Bootstrap Tabs to Play Nice with Masonry Bootstrapは、FlexBoxに基づいて新しいカードコンポーネントでMonospaceの問題を解決します。カードデッキクラスを一連のカードコンポーネントに追加するだけで、モノスペース列を実装するのに十分です。

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

デモページを設定します

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

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

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

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

<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>

さらに、Bootstrapが役割、ARIA制御などのアクセシビリティプロパティに焦点を当てている方法に注意してください。

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

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

<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.pkgd.min.jsをダウンロード」ボタンをクリックして、公式WebサイトからMasonryをダウンロードできます。

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

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

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

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

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

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

コードをテストする時が来ました。

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

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

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

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

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

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

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

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

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

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

shown.bs.tab triggers
hide.bs.tabは、新しいタブを表示するときに起動されます（したがって、前のアクティブタブが非表示になります）
hidden.bs.tabは、新しいタブが表示された後に起動されます（したがって、前のアクティブタブが非表示になります）。

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

jQuery .each（）関数は、各タブナビゲーションリンクをループし、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>

テストコード

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

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

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

結論

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

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

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

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

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

以上がBootstrapタブをメーソンリーでうまく再生するようにしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript jquery bootstrap css3 前端框架循环堆 JS 事件 href

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：15のブートストラップツールと遊び場次の記事：15のブートストラップツールと遊び場

続きを見る