ブートストラップを使用してレスポンシブ レイアウトで要素を非表示にする方法

Bootstrap を使用してレスポンシブ レイアウトで要素を非表示にする

お気づきのとおり、Bootstrap は、小さい画面でのナビゲーション メニュー項目の折りたたみをネイティブ サポートしています。ただし、同様の状況で、ページ上の他の要素を非表示にしたい場合もあります。

Bootstrap の可視性クラスの紹介

このニーズに対処するために、Bootstrap は可視性のセットを提供します。画面サイズに基づいて要素の存在を制御できるクラス。これらのクラスは次のとおりです:

• visible-xs-block、hidden-xs: 非常に小さなデバイス (768 ピクセル未満) で要素を非表示にします。
• visible-sm-block、hidden-sm: 小型デバイス (768px 以上) で要素を非表示にします。
• visible-md-block、hidden-md: 中型デバイスで要素を非表示にしますデバイス (992 ピクセル以上).
• visible-lg-block、hidden-lg: 大きなデバイス (1200 ピクセル以上) で要素を非表示にします。

使用法

小さな画面で要素を非表示にするには、適切な非表示クラスを要素に追加するだけです。たとえば、あなたが言及したナビゲーション ピルを非表示にするには、次を使用できます。

<code class="html"><ul class="nav nav-pills navbar-right hidden-sm">
  ...
</ul></code>

追加オプション

Bootstrap 4 には、さらに 2 つのタイプの可視性クラス:

• hidden-*-up: ビューポートが指定されたブレークポイント以上にある場合に要素を非表示にします。
• hidden-* -down: ビューポートが指定されたブレークポイント以下の場合に要素を非表示にします。

注: Bootstrap の古いバージョンでは、.hidden-phone や .hidden-phone などのクラスが使用されていました。

結論

Bootstrap の可視性クラスを利用することで、さまざまな画面サイズでの要素の表示を効果的に管理できます。この多用途性により、さまざまなデバイスの寸法に適切に適応するレスポンシブなレイアウトを作成できます。

以上がブートストラップを使用してレスポンシブ レイアウトで要素を非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。