Responsive utilities
状態:学習中
閲覧数:1,982
投稿日:2016-01-09
更新日:2016-01-09
メディアクエリを介してデバイスに応じてコンテンツを表示したり非表示したりするため、これらのユーティリティクラスを使用します
use these utility classes for showing and hiding content by device via media query
使用頻度が高いレスポンシブユーティリティクラス ／ 一覧表
使用頻度が高いユーティリティクラス
タブレット以上で表示。スマホでは非表示
.hidden-sm-down
スマホでのみ表示。タブレット以上では非表示
.hidden-md-up
感想
・直感的に分かりづらい
・しかも思い出しづらい
一覧表
一覧表
・一覧表
| - | Extra small devices 小型スマホ | Small devices 大型スマホ | Medium devices タブレット | Large devices デスクトップ | Extra large devices デスクトップ |
|---|---|---|---|---|---|
| 表示幅 | 34em未満 | 34em以上48em未満 | 48em以上62em未満 | 62em以上75em未満 | 75em以上 |
| .hidden-xs-down | 非表示 | 表示 | 表示 | 表示 | 表示 |
| .hidden-sm-down | 非表示 | 非表示 | 表示 | 表示 | 表示 |
| .hidden-md-down | 非表示 | 非表示 | 非表示 | 表示 | 表示 |
| .hidden-lg-down | 非表示 | 非表示 | 非表示 | 非表示 | 表示 |
| .hidden-sm-up | 表示 | 非表示 | 非表示 | 非表示 | 非表示 |
| .hidden-md-up | 表示 | 表示 | 非表示 | 非表示 | 非表示 |
| .hidden-lg-up | 表示 | 表示 | 表示 | 非表示 | 非表示 |
| .hidden-xl-up | 表示 | 表示 | 表示 | 表示 | 非表示 |
・Bootstrap4移行ガイド
・Bootstarap3のレスポンシブ・ユーティリティ