facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
2015年5月20日 (水) 03:10時点における127.0.0.1 (トーク)による版 (ページの作成:「xs (phones), sm (tablets), md (desktops), and lg (larger desktops) 非表示 <<nowiki />div class="hidden-xs"> .hidden-xs (スマホ ~767pxで非表示) <...」)

(差分) ←前の版 | 最新版 (差分) | 次の版→ (差分)
移動: 案内検索

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