Bootstrap3
日本語リファレンス

広告

サムネイル  Thumbnails


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

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

サンプル

ポイントは1つだけ。

  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>

広告