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

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

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

可視クラス:

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

隠しクラス:

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

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

...

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

...

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

Bootstrap のレスポンシブ ユーティリティ クラスの詳細については、http://getbootstrap.com/css/#sensitive-utilities.