Bootstrap3
日本語リファレンス

広告

レスポンシブ・ユーティリティ  Responsive utilities


class属性を指定するだけで、ブラウザの表示幅に基づくブレーク・ポイントごとに、表示/非表示、表示方法(blockinlineinline-block)を切り替えることができる。


表示幅ごとの表示/非表示一覧表
Extra small devices
モバイル
Small devices
タブレット
Medium devices
デスクトップ
Large devices
デスクトップ
表示幅 ~767px 768px~991px 992px~1199px 1200px~
.visible-xs-* 表示 非表示 非表示 非表示
.visible-sm-* 非表示 表示 非表示 非表示
.visible-md-* 非表示 非表示 表示 非表示
.visible-lg-* 非表示 非表示 非表示 表示
.hidden-xs 非表示 表示 表示 表示
.hidden-sm 表示 非表示 表示 表示
.hidden-md 表示 表示 非表示 表示
.hidden-lg 表示 表示 表示 非表示
クラス別表示方法対応表
class CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;
サンプル
  • visible-xs-block
  • visible-sm-block
  • visible-md-block
  • visible-lg-block
ソースコード
<ul class="list-group">
	<li class="list-group-item visible-xs-block">visible-xs-block</li>
	<li class="list-group-item visible-sm-block">visible-sm-block</li>
	<li class="list-group-item visible-md-block">visible-md-block</li>
	<li class="list-group-item visible-lg-block">visible-lg-block</li>
</ul>
サンプル
  • hidden-md
ソースコード
<ul class="list-group">
	<li class="list-group-item hidden-xs">hidden-xs</li>
	<li class="list-group-item hidden-sm">hidden-sm</li>
	<li class="list-group-item hidden-md">hidden-md</li>
	<li class="list-group-item hidden-lg">hidden-lg</li>
</ul>
サンプル
ソースコード
<button class="btn btn-default visible-lg-inline visible-md-inline visible-sm-inline visible-xs-inline">lg md sm xs</button>
<button class="btn btn-default visible-lg-inline visible-md-inline visible-sm-inline">lg md sm</button>
<button class="btn btn-default visible-lg-inline visible-md-inline">lg md</button>
<button class="btn btn-default visible-lg-inline">lg</button>
サンプル
ソースコード
<button class="btn btn-default visible-lg-inline visible-md-inline visible-sm-block visible-xs-block">A</button>
<button class="btn btn-default visible-lg-inline visible-md-inline visible-sm-block visible-xs-block">B</button>
<button class="btn btn-default visible-lg-inline visible-md-inline visible-sm-block visible-xs-block">C</button>

広告