レスポンシブ・ユーティリティ Responsive utilities
class属性を指定するだけで、ブラウザの表示幅に基づくブレーク・ポイントごとに、表示／非表示、表示方法（block、inline、inline-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-*-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-*
サンプル
ソースコード
<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>
visible-*-inline
サンプル
ソースコード
<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>
blockとinlineを切替
サンプル
ソースコード
<button class="btn btn-default visible-lg-inline visible-md-inline visible-sm-block visible-xs-block">Ａ</button> <button class="btn btn-default visible-lg-inline visible-md-inline visible-sm-block visible-xs-block">Ｂ</button> <button class="btn btn-default visible-lg-inline visible-md-inline visible-sm-block visible-xs-block">Ｃ</button>