サムネイル(thumbnail)コンポーネントを使用したBootstrapのグリッドシステムを拡張して、 画像、動画、テキスト等を簡単にグリッド表示します。

もし、Pinterestのように様々な高さ・幅でサムネイルを表示したいのであれば、 Masonry、 Isotope、 Salvattoreのようなサードパーティのプラグインを使用する必要があります。

• デフォルトの例
• コンテンツのカスタマイズ

デフォルトの例

デフォルトでは、Bootstrapのサムネイルは最低限必要なマークアップのみで、 リンクされた画像が披露されるように設計されています。

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

コンテンツのカスタマイズ

マークアップを少しだけ拡張して、見出し、段落、ボタンのような幾つかのHTMLコンテンツをサムネイルへ追加することが可能です。

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

 Back to top