レスポンシブ・ユーティリティ
モバイルフレンドリーな開発を素早く行うために、media queryを通じてデバイス毎にコンテンツを表示・非表示するのに、 これらユーティリティクラスを使用します。 印刷用にコンテンツを入れ替えるためのユーティリティクラスも含まれます。
これらは限定的に使用して、同じサイト内全体で異なるバージョンが存在することが無いようにしてください。 代わりに、各デバイス表示を補完するのにこれらを使用します。
利用クラス
ビューポートの区切りを跨いだ際にコンテンツを切り替えるために、利用可能なクラスを単一または組み合わせて使用します。
|
より小型な 端末 携帯 (<768px) |
小型端末 タブレット (≥768px) |
中型端末 デスクトップ (≥992px) |
大型端末 デスクトップ (≥1200px) |
|
|---|---|---|---|---|
.visible-xs-* |
表示 | 非表示 | 非表示 | 非表示 |
.visible-sm-* |
非表示 | 表示 | 非表示 | 非表示 |
.visible-md-* |
非表示 | 非表示 | 表示 | 非表示 |
.visible-lg-* |
非表示 | 非表示 | 非表示 | 表示 |
.hidden-xs |
非表示 | 表示 | 表示 | 表示 |
.hidden-sm |
表示 | 非表示 | 表示 | 表示 |
.hidden-md |
表示 | 表示 | 非表示 | 表示 |
.hidden-lg |
表示 | 表示 | 表示 | 非表示 |
v3.2.0では、各区切りに対して3つのバリエーションを持つ.visible-*-*クラスが追加され、
それぞれのCSSのdisplayプロパティの値は下記の一覧のとおりです。
| クラスのグループ | displayの値 |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
例として、より小さな(xs)端末に対しては、.visible-*-*クラスは、
.visible-xs-block、.visible-xs-inline、.visible-xs-inline-blockになります。
.visible-xs、.visible-sm、.visible-md、.visible-lgのクラスはまだ存在していますが、
v3.2.0で非推奨になりました。
これらは、<table>に関連する要素の切り替えのための特別なケースを除き、
概ね.visible-*-blockに相当します。
印刷クラス
通常のレスポンシブクラスと同様に、印刷のためにコンテンツを切り替えるのに使用します。
| クラス | ブラウザ | 印刷 |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block
|
非表示 | 表示 |
.hidden-print |
表示 | 非表示 |
.visible-printのクラスもまだ存在していますが、
v3.2.0で非推奨になりました。
これらは、<table>に関連する要素の切り替えのための特別なケースを除き、
概ね.visible-print-blockに相当します。
テストケース
レスポンシブなユーティリティクラスのテストを行うために、ブラウザのサイズを変更するか、異なるデバイスで読み込んでください。
表示
緑のチェックマークは、あなたの現在のビューポートで表示される要素を示しています。
表示
ここでは、緑のチェックマークは、あなたの現在のビューポートで非表示となる要素を示しています。
docs CC BY 3.0
このページは、ページトップのリンク先のBootstrap公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。
- 元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
- "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。