Bootstrap基本チュートリアル

Bootstrapプラグイン

Bootstrap ギフティコン(Glyphicons)Bootstrap アシスタントクラス

Bootstrap レスポンシブユーティリティ

Bootstrapは、モバイルデバイスに最適な開発をより迅速に行うために、いくつかの補助クラスを提供しています。これらはメディアクエリと大、小、中型デバイスを組み合わせて、コンテンツのデバイスへの表示と非表示を実現します。

これらのツールは慎重に使用し、同じサイトで完全に異なるバージョンを作成しないようにしてください。レスポンシブユーティリティは現在、ブロックとテーブル切り替えにのみ適用されています。

	超小画面スマートフォン（<768px)	小画面タブレット（≥768px)	中画面デスクトップ（≥992px)	大画面デスクトップ（≥1200px)
.visible-xs-*	表示	非表示	非表示	非表示
.visible-sm-*	非表示	表示	非表示	非表示
.visible-md-*	非表示	非表示	表示	非表示
.visible-lg-*	非表示	非表示	非表示	表示
.hidden-xs	非表示	表示	表示	表示
.hidden-sm	表示	非表示	表示	表示
.hidden-md	表示	表示	非表示	表示
.hidden-lg	表示	表示	表示	非表示

v3.2.0バージョンから、.visibleの形式で-*-* のクラスは各スクリーンサイズに3つのバリエーションがあり、それぞれがCSSの異なるdisplay属性に対応しています。以下のリストに示されています：

クラスグループ	CSS表示
.visible-*-ブロック	display: block;
.visible-*-インライン	display: inline;
.visible-*-インライン-ブロック	display: inline-ブロック;

したがって、超小さいスクリーン(xs)の場合、利用可能な .visible-*-* クラスは：.visible-xs-ブロック、.visible-xs-インラインと .visible-xs-インライン-ブロック。

.visible-xs、.visible-sm、.visible-md と .visible-lg クラスと同時に存在します。しかし、v3.2.0 バージョンから推奨されなくなりました。ただし、<table> に関連する要素の特別な場合を除いて、それらは .visible-*-ブロックは基本的には同じです。

印刷クラス

以下のテーブルに印刷クラスを示します。これらのスイッチを使用して印刷内容を切り替えます。

class	ブラウザ	プリンター
.visible-プリント-ブロック .visible-プリント-インライン .visible-プリント-インライン-ブロック	非表示	表示
.hidden-プリント	表示	非表示

オンラインサンプル

以下のサンプルは、上記に示したヘルパークラスの使用法を示しています。ブラウザのウィンドウサイズを変更したり、異なるデバイスでサンプルをロードして、レスポンシブユーティリティクラスをテストしてください。

オンラインサンプル

サンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">
	<title>Bootstrap サンプル　-　レスポンシブユーティリティツール/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container"　style="padding:　40px;">
	<div　class="row　visible-on">
		<div　class="col-xs-6　col-sm-3"　style="背景-color: #dedef8;ボックス-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444">
			<span　class="hidden-xs">非常に小さい/span>
			<span　class="visible-xs">✔　非常に小さいデバイスで見える</span>
		</div>
		<div　class="col-xs-6　col-sm-3"　style="背景-color: #dedef8;ボックス-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444">
			<span　class="hidden-sm">小型</span>
			<span　class="visible-sm">✔　小型デバイスで見える</span>
		</div>
		<div　class="clearfix　visible-xs"></div>
		<div　class="col-xs-6　col-sm-3"　style="背景-color: #dedef8;ボックス-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444">
			<span　class="hidden-md">中型</span>
			<span　class="visible-md">✔　中型デバイスで見える</span>
		</div>
		<div　class="col-xs-6　col-sm-3"　style="背景-color: #dedef8;ボックス-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444">
			<span　class="hidden-lg">大規模</span>
			<span　class="visible-lg">✔　大規模デバイスで見える</span>
		</div>
	</div>
</div>
</body>
</html>

テストを見てみる ‹/›

以下の結果が表示されます：

チェックマーク（✔） 要素が現在のビューポート内に見えることを示します。

Bootstrap ギフティコン(Glyphicons)Bootstrap アシスタントクラス