サムネイル　　Thumbnails

---

サムネイル（縮小表示）に最適なコンポーネント。

ウィンドウ幅やグリッド・システムに応じて、レスポンシブに大きさが変化する。

---

使い方

ポイントは１つだけ。

1. class属性にthumbnailを指定した要素で、img要素を括る。

<div class="row">
	<div class="col-xs-6 col-md-3">
		<a href="http://bootstrap3.cyberlab.info/img/sample-256x256.png" class="thumbnail">
			<img src="http://bootstrap3.cyberlab.info/img/sample-256x256.png">
		</a>
	</div>
	・・・
</div>

リンク付きサムネイル

表示サンプル

ソースコード

<div class="row">
	<div class="col-xs-6 col-md-3">
		<a href="http://bootstrap3.cyberlab.info/img/sample-256x256.png" class="thumbnail" target="_blank">
			<img src="http://bootstrap3.cyberlab.info/img/sample-256x256.png">
		</a>
	</div>
	<div class="col-xs-6 col-md-3">
		<a href="http://bootstrap3.cyberlab.info/img/sampleB-256x256.png" class="thumbnail" target="_blank">
			<img src="http://bootstrap3.cyberlab.info/img/sampleB-256x256.png">
		</a>
	</div>
	<div class="col-xs-6 col-md-3">
		<a href="http://bootstrap3.cyberlab.info/img/sampleC-256x256.png" class="thumbnail" target="_blank">
			<img src="http://bootstrap3.cyberlab.info/img/sampleC-256x256.png">
		</a>
	</div>
	<div class="col-xs-6 col-md-3">
		<a href="http://bootstrap3.cyberlab.info/img/sampleD-256x256.png" class="thumbnail" target="_blank">
			<img src="http://bootstrap3.cyberlab.info/img/sampleD-256x256.png">
		</a>
	</div>
</div>

カスタム・コンテンツ

サムネイルだけでなく、見出し、段落、ボタンなどを含めることもできる。

表示サンプル

ソースコード

<div class="row">
	<div class="col-xs-6 col-md-3">
		<div class="thumbnail">
			<img src="http://bootstrap3.cyberlab.info/img/sample-256x256.png">
			<div class="caption">
				<h3>サムネイル・ラベル</h3>
				<p>段落。</p>
				<p>...</p>
				<p><a href="http://bootstrap3.cyberlab.info/img/sample-256x256.png" class="btn btn-default" role="button" target="_blank">ボタン</a></p>
			</div>
		</div>
	</div>
	<div class="col-xs-6 col-md-3">
		<div class="thumbnail">
			<img src="http://bootstrap3.cyberlab.info/img/sampleB-256x256.png">
			<div class="caption">
				<h3>サムネイル・ラベル</h3>
				<p>段落。</p>
				<p>...</p>
				<p><a href="http://bootstrap3.cyberlab.info/img/sampleB-256x256.png" class="btn btn-default" role="button" target="_blank">ボタン</a></p>
			</div>
		</div>
	</div>
	<div class="col-xs-6 col-md-3">
		<div class="thumbnail">
			<img src="http://bootstrap3.cyberlab.info/img/sampleC-256x256.png">
			<div class="caption">
				<h3>サムネイル・ラベル</h3>
				<p>段落。</p>
				<p>...</p>
				<p><a href="http://bootstrap3.cyberlab.info/img/sampleC-256x256.png" class="btn btn-default" role="button" target="_blank">ボタン</a></p>
			</div>
		</div>
	</div>
	<div class="col-xs-6 col-md-3">
		<div class="thumbnail">
			<img src="http://bootstrap3.cyberlab.info/img/sampleD-256x256.png">
			<div class="caption">
				<h3>サムネイル・ラベル</h3>
				<p>段落。</p>
				<p>...</p>
				<p><a href="http://bootstrap3.cyberlab.info/img/sampleD-256x256.png" class="btn btn-default" role="button" target="_blank">ボタン</a></p>
			</div>
		</div>
	</div>
</div>