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

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

これらは控えめに使用し、同じサイトのまったく異なるバージョンを作成しないでください。 現在、レスポンシブユーティリティはブロックとテーブルの切り替えにのみ使用可能です。

Classes	Devices
.visible-xs	Extra small (less than 768px) visible
.visible-sm	Small (up to 768 px) visible
.visible-md	Medium (768 px to 991 px) visible
.visible-lg	Larger (992 px and above) visible
.hidden-xs	Extra small (less than 768px) hidden
.hidden-sm	Small (up to 768 px) hidden
.hidden-md	Medium (768 px to 991 px) hidden
.hidden-lg	Larger (992 px and above) hidden

印刷クラス

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

Classes	Print
.visible-print	Yes Visible
.hidden-print	Visible only to browser not to 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>

チェックマーク*は、要素が現在のビューポートに表示されていることを示します。

Bootstrap-responsive-utilities

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

印刷クラス

例