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-*