facebook twitter hatena line google mixi email

Html/bootstrap/bootstrap3/端末サイズ別表示切り替え

提供: 初心者エンジニアの簡易メモ
移動: 案内検索

xs (phones), sm (tablets), md (desktops), and lg (larger desktops)

非表示

<div class="hidden-xs">
    .hidden-xs
     (スマホ ~767pxで非表示)
</div>
<div class="hidden-sm">
    .hidden-sm
    (タブレット 768px~991pxで非表示)
</div>
<div class="hidden-md">
    .hidden-md
     (PC 992px~1199pxで非表示)
</div>
<div class="hidden-lg">
    .hidden-lg
     (PC 1200px~で非表示)
</div>

表示

<div class="visible-xs-block">
 .visible-xs-block
 (スマホ ~767pxで表示)
</div>
<div class="visible-sm-block">
 .visible-sm-block
 (タブレット 768px~991pxで表示)
</div>
<div class="visible-md-block">
 .visible-md-block
 (PC 992px~1199pxで表示)
</div>
<div class="visible-lg-block">
 .visible-lg-block
 (PC 1200px~で表示)
</div>

表示幅ごとの表示/非表示一覧表

http://bootstrap3.cyberlab.info/css/responsiveUtilities.html