Bootstrap3 ThumbnailsとMediaObjectの使い方

Pocket

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

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

Bootstrap3 Thumbnailsの使い方

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

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

Class名 概要
.thumbnail サムネイルコンポーネントの表示
.thumbnail > .caption キャプションボックスを作る
<!-- 通常の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は横並びになってるのがポイント。画像は左右どちらにも置くことができます。

Class名 概要
.media Mediaコンポーネントを表示
.media > .media-left サムネイル画像を左に表示
.media > .media-right サムネイル画像を右に表示
.media-object サムネイルのimgタグに追加
.media > .media-body テキストを表示する場合に使用
.media-body > .media-heading bodyタグ内に見出しを表示する場合に使用
<!-- 左にサムネイルを表示 -->
<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と一緒に使うことでサムネイル画像の位置を変更することができます。

Class名 概要
.media-top Mediaコンポーネントを表示
.media-middle Mediaコンポーネントを表示
.media-bottom Mediaコンポーネントを表示
<!-- サムネイルの位置を中央に -->
<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と同様入れ子構造を作ることも可能。

Class名 概要
ul.media-list ulタグに追加
li.media liタグに追加
<!-- コメントのようなリスト表示 -->
<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>

デモページはこちら