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>