Bootstrap3 ThumbnailsとMediaObjectの使い方

Tweet

Pocket

ThumbnailsとMediaObjectはブログの新着記事一覧や、事業案内などでサムネイルと合わせてリンクを表示したり、Webサイトの中でも特によく使われるコンポーネントの１つです。

書き方はやや複雑なので全部手書きは大変ですが、コードエディターの拡張機能にあるスニペット機能を使えばclass名を入力するだけで簡単にテンプレートを出力してくれるのでオススメ。

Bootstrap3 Thumbnailsの使い方

Thumbnailsは画像だけでなく、動画コンテンツを表示したり、テキストのみの表示なども可能。使い方次第で様々な表示のさせ方ができるコンポーネントです。

Thumbnailsはaタグと合わせて使うことでコンポーネント全体にリンクをつけることができます。

<!-- 通常のThumbnail -->
<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>サムネイルの見出し</h3>
        <p>サムネイルのテキスト</p>
        <p><a href="#" class="btn btn-primary" role="button">続きを見る</a></p>
      </div>
    </div>
  </div>
</div>

<!-- aタグと合わせて使える -->
<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>サムネイルの見出し</h3>
        <p>サムネイルのテキスト</p>
      </div>
    </a>
  </div>
</div>

デモページはこちら

Bootstrap3のMediaObjectの使い方

MediaObjectはブログのコメントなどによく使われるコンポーネントです。Thumbnailsは画像とテキストが縦に並んでましたが、Mediaは横並びになってるのがポイント。画像は左右どちらにも置くことができます。

<!-- 左にサムネイルを表示 -->
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">見出しタイトル</h4>
    テキスト
  </div>
</div>

<!-- 右にサムネイルを表示 -->
<div class="media">
  <div class="media-body">
    <h4 class="media-heading">見出しタイトル</h4>
    テキスト
  </div>
  <div class="media-right">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
</div>

MediaObjectのサムネイル位置を変更する

.media-left、.media-rightと一緒に使うことでサムネイル画像の位置を変更することができます。

<!-- サムネイルの位置を中央に -->
<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">見出しタイトル</h4>
    テキスト
  </div>
</div>

MediaObjectをコメントのようにリスト表示する

ブログコメントのようにリスト表示する場合は、ulタグに.media-listをつけて、liタグに.mediaを使用します。通常のulと同様入れ子構造を作ることも可能。

<!-- コメントのようなリスト表示 -->
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">見出しタイトル</h4>
      テキスト
    </div>
  </li>
</ul>

デモページはこちら