【Bootstrap】デバイスに応じた表示／非表示の指定
Bootstrapで、デバイスに応じて表示・非表示を指定する方法
例えばヘッダーにある問い合わせなどのサブメニュー画像を、デバイス（ＰＣ・スマホ等）毎に表示／非表示を切り替える際に使用します。
visible-{prefix} … モニターが当該のサイズになると表示
hidden-{prefix} … モニターが当該のサイズになると非表示
まとめると以下の通り。使い勝手がよくはありませんが仕方ありません。
| -xs | -sm | -md | -lg | |
|---|---|---|---|---|
|
Extra small devices モバイル |
Small devices タブレット |
Medium devices デスクトップ |
Large devices デスクトップ |
|
| 表示幅 | ～767px | 768px～991px | 992px～1199px | 1200px～ |
| .visible-xs | 表示 | 非表示 | 非表示 | 非表示 |
| .visible-sm | 非表示 | 表示 | 非表示 | 非表示 |
| .visible-md | 非表示 | 非表示 | 表示 | 非表示 |
| .visible-lg | 非表示 | 非表示 | 非表示 | 表示 |
| .hidden-xs | 非表示 | 表示 | 表示 | 表示 |
| .hidden-sm | 表示 | 非表示 | 表示 | 表示 |
| .hidden-md | 表示 | 表示 | 非表示 | 表示 |
| .hidden-lg | 表示 | 表示 | 表示 | 非表示 |
この投稿へのトラックバック
トラックバックはありません。