ブートストラップメディアオブジェクト
メディアオブジェクト
Bootstrapは、メディアオブジェクト（画像やビデオなど）をコンテンツの左側または右側に配置する簡単な方法を提供します。これは、ブログのコメントやツイートなどを表示するために使用できます。
JohnDoe投稿日：2016年2月19日
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
JaneDoe投稿日：2016年2月20日
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
AliciaKeyes投稿日：2016年2月25日
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。ショーの前に犯罪や便利さの恐れはありません。
基本的なメディアオブジェクト
ジョン・ドウ
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
ジョン・ドウ
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
例
<!-- Left-aligned -->
<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Right-aligned -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="media-right">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
</div>
例の説明
クラスで<div>要素を使用して.media、メディアオブジェクトのコンテナを作成します。
クラスを使用し.media-leftてメディアオブジェクト（画像）を左に.media-right揃えるか、クラスを使用してメディアオブジェクト（画像）を右に揃えます。
画像の横に表示されるはずのテキストは、class = " media-body"のコンテナ内に配置されます。
.media-headingさらに、見出しに使用できます。
上、中、または下の配置
media-topメディアオブジェクトは、、、 media-middleまたはmedia-bottomクラスに合わせて上、中、下に配置することもできます。
メディアトップ
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
メディアミドル
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
メディアボトム
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
例
<!-- Media top -->
<div class="media">
<div class="media-left media-top">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<div class="media-left media-middle">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<div class="media-left media-bottom">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>
メディアオブジェクトのネスト
メディアオブジェクトはネストすることもできます（メディアオブジェクト内のメディアオブジェクト）：
例
JohnDoe投稿日：2016年2月19日
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
JohnDoe投稿日：2016年2月20日
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
JohnDoe投稿日：2016年2月21日
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
ネスティングの別の例
例
JohnDoe投稿日：2016年2月19日
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
JohnDoe投稿日：2016年2月20日
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
JohnDoe投稿日：2016年2月21日
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
JaneDoe投稿日：2016年2月20日
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。
JaneDoe投稿日：2016年2月19日
痛み自体は、主な生態学的問題である痛みへの愛情ですが、私はこの種の時間を与えて倒れるので、いくつかの大きな痛みと痛みがあります。