「Bootstrap ComponentsのThumbnails」のサンプル
「BootstrapのComponentsのサンプル：和訳」の「Thumbnails」のサンプルページです。
- 画像を囲むタグのclassに「thumbnail」を指定。
基本のサムネイル
実際のソース
<a href="#" class="thumbnail">
<img src="./images/sample_cat.png">
</a>複数のサムネイル
親要素で何かする
実際のソース
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail"><img src="./images/sample_cat.png"></a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail"><img src="./images/sample_cat.png"></a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail"><img src="./images/sample_cat.png"></a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail"><img src="./images/sample_cat.png"></a>
</div>
</div>サムネイルとの組合せ
サムネイル画像に説明やリンクボタンなどを組合せる。実際のソース
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="./images/sample_cat.png">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<a href="#" class="btn btn-primary bootstrap" role="button">Button</a>
<a href="#" class="btn btn-default bootstrap" role="button">Button</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="./images/sample_cat.png">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<a href="#" class="btn btn-primary bootstrap" role="button">Button</a>
<a href="#" class="btn btn-default bootstrap" role="button">Button</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="./images/sample_cat.png">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<a href="#" class="btn btn-primary bootstrap" role="button">Button</a>
<a href="#" class="btn btn-default bootstrap" role="button">Button</a>
</p>
</div>
</div>
</div>
</div>※クラス「bootstrap」は不要です（このサイトで使っているCSSで「a.btn」をすでに設定しているためbootstrap.cssと競合。その回避用につくったクラスです）