Bootstrap 表示/非表示
設定値
|
Extra small devices スマートフォン (<768px) |
Small devices タブレット (≥768px) |
Medium devices デスクトップPC (≥992px) |
Large devices デスクトップPC (≥1200px) |
|
|---|---|---|---|---|
.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 |
ノーマル表示(Bootstrap利用無し)
<div class=”mydiv”> </div>
スマホ時のみ表示
visible-xs-block
visible-xs-inline
visible-xs-inline-block
※↑画面サイズによってはココに<div>が表示される。
<div class="visible-xs-block">visible-xs-block</div>
<div class="visible-xs-inline">visible-xs-inline</div>
<div class="visible-xs-inline-block">visible-xs-inline-block</div>
スマホ時のみ非表示
※↑画面サイズによってはココに<div>が表示される。
<div class="hidden-xs">hidden-xs</div>
Follow me!
