ブートストラップレスポンシブレイアウトで要素の可視性を制御するにはどうすればよいですか?

ブートストラップのレスポンシブ レイアウトで要素を非表示にする

さまざまな画面サイズでコンテンツの可視性を最適化することで、ブートストラップのデザインを強化します。 Bootstrap は、小型のデバイスにメニュー項目を表示するための機能を提供しますが、他のページ要素はどうなるのでしょうか?

これに対処するために、Bootstrap は、画面に基づいて要素を動的に表示または非表示にすることができる「表示」クラスと「非表示」クラスを提供します。サイズ。利用可能なクラスは次のとおりです:

可視クラス:

• .visible-xs-block: 極小デバイス (電話) に表示
• .visible-sm-block: 小型デバイス (タブレット) で表示
• .visible-md-block: 中型デバイス (デスクトップ) で表示
• .visible-lg-block: 大型デバイスで表示デバイス (デスクトップ)

非表示クラス:

• .hidden-xs: 極小デバイス (電話) で非表示
• .hidden-sm: 小型デバイス (タブレット) で非表示
• .hidden-md: 中型デバイス (デスクトップ) で非表示
• .hidden-lg: 大型デバイス (デスクトップ) で非表示

小さな画面でナビゲーション ピルを非表示にするには、.hidden-xs クラスをそれぞれのコンテナに追加するだけです。

<code class="html"><div class="nav-pills hidden-xs float-right">...</div></code>

あるいは、「hidden-*-down」を使用することもできます。 " クラス。指定されたブレークポイント以下の要素を非表示にします。

<code class="html"><div class="nav-pills hidden-sm-down float-right">...</div></code>

指定されたブレークポイント以上の要素を表示したい場合は、忘れずに「visible-*-up」クラスを使用してください。

Bootstrap のレスポンシブ ユーティリティ クラスの詳細については、http://getbootstrap.com/css/#sensitive-utilities にある公式ドキュメントを参照してください。

以上がブートストラップレスポンシブレイアウトで要素の可視性を制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。