Responsive utilities

デバイス別に利用できるユーティリティクラスです。
各クラスを指定することにより、デバイス表示サイズ別にVisible(表示)・Hidden(非表示)を制御することが可能です。

Responsive utilitiesの設定

Extra small devices
携帯電話
Small devices
タブレット
Medium devices
デスクトップPC
Large devices
デスクトップPC
.visible-xs-* Visible Hidden Hidden Hidden
.visible-sm-* Hidden Visible Hidden Hidden
.visible-md-* Hidden Hidden Visible Hidden
.visible-lg-* Hidden Hidden Hidden Visible
.hidden-xs Hidden Visible Visible Visible
.hidden-sm Visible Hidden Visible Visible
.hidden-md Visible Visible Hidden Visible
.hidden-lg Visible Visible Visible Hidden

サンプル01-Visible設定

機能

Visible設定

コーディング
.visible-*-*

サンプル02-Hidden設定

機能

Hidden設定

コーディング
.hidden-*