表示・非表示を切り替えます。例えばヘッダー画像をPC用、タブレット用、モバイル用と用意しておき、それぞれ表示させるケースなど。
visible - モニターが当該のサイズになると表示
hidden - モニターが当該のサイズになると非表示
大変失礼だけど、非常に判り難い
例えば、このサイト上部にあるテーマ変更はタブレットサイズになると隠れるようにしてます。
その為に指定しているのは visible-lg visible-md これだと自分でタブレット以下では非表示にするというコードを書いた方が一発でいけますね。
-xs | -sm | -md | -lg | |
---|---|---|---|---|
.visible-xs | 表示 | 非表示 | 非表示 | 非表示 |
.visible-sm | 非表示 | 表示 | 非表示 | 非表示 |
.visible-md | 非表示 | 非表示 | 表示 | 非表示 |
.visible-lg | 非表示 | 非表示 | 非表示 | 表示 |
.hidden-xs | 非表示 | 表示 | 表示 | 表示 |
.hidden-sm | 表示 | 非表示 | 表示 | 表示 |
.hidden-md | 表示 | 表示 | 非表示 | 表示 |
.hidden-lg | 表示 | 表示 | 表示 | 非表示 |
hidden-lg
hidden-md
hidden-sm
hidden-xs
visible-lg
visible-md
visible-sm
visible-xs
hidden-lg
hidden-md
hidden-sm
hidden-xs
visible-lg
visible-md
visible-sm
visible-xs