ブートストラップ応答性ユーティリティ
Bootstrap は、モバイル対応の開発を迅速化するためのいくつかのヘルパー クラスを提供します。これらをメディア クエリを通じて大、中、小のデバイスと組み合わせて、デバイス上でコンテンツを表示および非表示にすることができます。
これらのツールは、同じサイトのまったく異なるバージョンを作成しないように注意して使用する必要があります。 レスポンシブユーティリティは現在、ブロックとテーブルの切り替えでのみ機能します。
| 超小さい画面 携帯電話 (<768px) | 小さい画面 タブレット (≥768px) | 中画面 デスクトップ (≥992px) | 大画面 デスクトップ (≥1200px) | |
|---|---|---|---|---|
| .visible-xs-* | visible | 隠す | 隠す | 隠す |
| .visible-sm-* | 隠す | 隠す | 非表示 | |
| .visible-md-* | 非表示 | 非表示 | 表示 | 非表示 |
| .visible-lg-* | 非表示 | 非表示 | 非表示 | 見える |
| .hidden-xs | hidden | visible | visible | visible |
| .hidden-sm | visible | hidden | visible | visible..hidden-md |
| 表示 | 非表示 | 表示 | .hidden-lg | |
| 表示 | 表示 | 非表示 |
.visible-*-inline
| .visible-*-inline-block | display: inline-block; 小さい画面 (xs) を例にとります。 visible-*-* クラスは、.visible-xs-block、.visible-xs-inline、および .visible-xs-inline-block です。 |
|---|---|
| 次の表に、印刷クラスを示します。これらのトグルを使用してコンテンツを印刷します。 | |
| クラス | ブラウザ |
| hide | 例次の例は、上記のヘルパー クラスの使用法を示しています。ブラウザ ウィンドウのサイズを変更するか、別のデバイスにインスタンスをロードして、応答性の高いユーティリティ クラスをテストします。 <!DOCTYPE html> <html> <head> <title>ブートストラップの例 - レスポンシブ ユーティリティ</title> <link href="http://libs.baidu .com/ bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min .js" ></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> < ;/head> ; <body> <div class="container" style="padding: 40px;"> <div class="rowvisible-on"> <div class="col-xs -6col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class ="hidden -xs">非常に小さい</span> class="col-xs-6col-sm-3" style="background-color: #dedef8; " box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> < ;span class="hidden-sm">Small</span> div class="clearfixvisible-xs"></div> > div ;"> /div> |
|---|
