ブートストラップ-レスポンシブユーティリティ

Bootstrapは、モバイルフレンドリーな開発を高速化するために、いくつかのヘルパークラスを提供します。これらは、大、小、中のデバイスと組み合わせて、メディアクエリを介してデバイスごとにコンテンツを表示および非表示にするために使用できます。

これらは慎重に使用し、同じサイトのまったく異なるバージョンを作成しないようにしてください。 Responsive utilities are currently only available for block and table toggling。

クラス	デバイス
.visible-xs	非常に小さい（768px未満）が表示されます
.visible-sm	小さい（最大768ピクセル）表示
.visible-md	中（768ピクセルから991ピクセル）が表示されます
.visible-lg	大きい（992ピクセル以上）表示
.hidden-xs	極小（768px未満）非表示
.hidden-sm	小さい（最大768ピクセル）非表示
.hidden-md	中（768ピクセルから991ピクセル）非表示
.hidden-lg	大きい（992ピクセル以上）非表示

印刷クラス

次の表に、印刷クラスを示します。これらを使用して、印刷するコンテンツを切り替えます。

クラス	印刷
.visible-print	はい目に見える
.hidden-print	印刷しないようにブラウザにのみ表示されます。

例

次の例は、上記のヘルパークラスの使用法を示しています。ブラウザのサイズを変更するか、さまざまなデバイスにサンプルをロードして、レスポンシブユーティリティクラスをテストします。

<div class = "container" style = "padding: 40px;">
   <div class = "row visible-on">
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-xs">Extra small</span>
         <span class = "visible-xs">✔ Visible on x-small</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-sm">Small</span>
         <span class = "visible-sm">✔ Visible on small</span>
      </div>
      
      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-md">Medium</span>
         <span class = "visible-md">✔ Visible on medium</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-lg">Large</span>
         <span class = "visible-lg">✔ Visible on large</span>
      </div>
      
   </div>  
</div>

Checkmarks 要素が現在のビューポートに表示されていることを示します。