Bootstrapマルチメディアオブジェクト
この章では、Bootstrapのメディアオブジェクトについて説明します。これらの抽象的なオブジェクトスタイルは、さまざまなコンポーネントタイプ（例：ブログコメント）を想定するために使用されます。コンポーネント内で画像とテキストを混在させることができ、画像は左揃えまたは右揃えにできます。メディアオブジェクトは、より少ないコードでメディアオブジェクトとテキストの混在を実現できます。
HTMLタグに以下の2つの形式を追加して、メディアオブジェクトを設定できます。
- .media: このクラスは、メディアオブジェクト内のマルチメディア（画像、ビデオ）をコンテンツブロックの左または右にフロートさせることを許可します。
- .media-list: リストが必要で、各項目が順序なしリストの一部である場合、このクラスを使用できます。コメントリストや記事リストに使用できます。
以下では、メディアオブジェクトの.mediaクラスを使用した例を見てみましょう。
<div class="media">
<a class="pull-left" href="../index.html">
<img class="media-object" src="../bootstrap/images/64.jpg.html"
alt="Media Object">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
<div class="media">
<a class="pull-left" href="../index.html">
<img class="media-object" src="../bootstrap/images/64.jpg.html"
alt="Media Object">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
<div class="media">
<a class="pull-left" href="../index.html">
<img class="media-object" src="../bootstrap/images/64.jpg.html"
alt="Media Object">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</div>
上記の例の表示効果は以下の通りです。
以下では、メディアオブジェクトの.media-listクラスを使用した例を見てみましょう。
<ul class="media-list">
<li class="media">
<a class="pull-left" href="../index.html">
<img class="media-object" src="../bootstrap/images/64.jpg.html"
alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<p>This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.</p>
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="../index.html">
<img class="media-object" src="../bootstrap/images/64.jpg.html"
alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="../index.html">
<img class="media-object" src="../bootstrap/images/64.jpg.html"
alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="../index.html">
<img class="media-object" src="../bootstrap/images/64.jpg.html"
alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</li>
<li class="media">
<a class="pull-right" href="../index.html">
<img class="media-object" src="../bootstrap/images/64.jpg.html"
alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</li>
</ul>
上記の例の表示効果は以下の通りです。
