レスポンシブユーティリティブートストラップ
ブートストラップは、フレンドリー速いモバイルデバイス用の開発を達成するために、いくつかのヘルパークラスを提供します。 これらのクエリは、表示と非表示するために、デバイスの内容を実現するために、メディアを通じて、大中小の機器を組み合わせることができます。
これらのツールを使用すると、同じサイトの完全に異なるバージョンを作成しないように注意する必要があります。応答性のユーティリティは、現在のブロックと、テーブルの切り替えでのみ使用可能です。
| 超小型画面 電話番号（<768px） | 小さな画面 タブレット（≥768px） | ミディアムスクリーン デスクトップ（≥992px） | 大画面 デスクトップ（≥1200px） | |
|---|---|---|---|---|
| .visible-XS- * | 目に見えます | 隠します | 隠します | 隠します |
| .visible-SM-* | 隠します | 目に見えます | 隠します | 隠します |
| .visible-MD-* | 隠します | 隠します | 目に見えます | 隠します |
| .visible-lg- * | 隠します | 隠します | 隠します | 目に見えます |
| .hidden-XS | 隠します | 目に見えます | 目に見えます | 目に見えます |
| .hidden-SM | 目に見えます | 隠します | 目に見えます | 目に見えます |
| .hidden-MD | 目に見えます | 目に見えます | 隠します | 目に見えます |
| .hidden-LG | 目に見えます | 目に見えます | 目に見えます | 隠します |
.visibleのような形をV3.2.0のリリースから、 - * - 各画面の*クラスのサイズは、次のように異なるCSSのdisplayプロパティリストのそれぞれがあり、3つの変種があります。
| クラスタ | CSSの表示 |
|---|---|
| .visible - * - ブロック | 表示：ブロック; |
| .visible - * - インライン | 表示：インライン; |
| .visible - * - インラインブロック | 表示：インラインブロック; |
そのため、超小型スクリーン（XS）、例えば、利用可能.visible - * - *クラスは次のとおりです。.visible-XS-ブロック、.visible-XS-インラインと.visible-XS-インラインブロック。
.visible-XS、.visible-SM、.visible-MDと.visible-LGクラスも存在します。 しかし始まるV3.2.0バージョンから推奨されていません。 特殊なケースの外側に関連する<表>要素では、彼らは.visible - * - ブロックと同じ。
印刷カテゴリ
次の表は、印刷のカテゴリを示しています。 印刷コンテンツを切り替えるには、これらを使用してください。
| クラス | ブラウザ | プリンタ |
|---|---|---|
| .visible-印刷ブロック .visible-印刷インライン .visible-印刷インラインブロック | 隠します | 目に見えます |
| .hidden印刷 | 目に見えます | 隠します |
例
次の例は、ヘルパークラスの使用方法上記示しています。 ブラウザウィンドウのサイズを調整し、または別のデバイス上のインスタンスをロードし、応答性のユーティリティクラスをテストします。
例
»をお試しください
結果は以下の通りであります：
チェックマーク（✔）要素が現在のビューポートに表示されていることを示しています。