メディア

メディアオブジェクト

Bootstrapを使用すると、メディアオブジェクト(画像や動画など)をコンテンツの左または右に簡単に揃えることができます。これは、ブログのコメント、つぶやきなどを表示するために使用することができます。

基本のメディアオブジェクト

メディアオブジェクトのコンテナを作成するには、 .media クラスを適用した <div> 要素を使用します。
.media-left クラスを使用して、メディアオブジェクト(画像)を左に、または .media-right クラスを使用して右に揃えます。
画像の横に表示されるテキストは、 class="media-body" のコンテナの中に置かれます。
さらに、ヘッダーに .media-heading を使用することもできます。

左寄せ

山田太郎

私の名前は山田太郎です。架空の人物の名前によく使われます。


右寄せ

John Doe

私の名前は山田太郎です。架空の人物の名前によく使われます。

<p>左寄せ</p>
<div class="media">
  <div class="media-left">
    <img src="avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">山田太郎</h4>
    <p>私の名前は山田太郎です。架空の人物の名前によく使われます。</p>
  </div>
</div>
<br/>
<p>右寄せ</p>
<div class="media">
  <div class="media-body">
    <h4 class="media-heading">John Doe</h4>
    <p>私の名前は山田太郎です。架空の人物の名前によく使われます。</p>
  </div>
  <div class="media-right">
    <img src="avatar1.png" class="media-object" style="width:60px">
  </div>
</div>

メディアの位置

メディアオブジェクトは、 .media-top.media-middle 、または .media-bottom クラスを使用して、上、中、または下に配置することができます。

Media Top

私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。

Media Middle

私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。

Media Bottom

私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。

<!-- Media top -->
<div class="media">
  <div class="media-left media-top">
    <img src="avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media Top</h4>
    <p>私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。</p>
  </div>
</div>
<!-- Media middle -->
<div class="media">
  <div class="media-left media-middle">
    <img src="avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media Middle</h4>
    <p>私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。</p>
  </div>
</div>
<!-- Media bottom -->
<div class="media">
  <div class="media-left media-bottom">
    <img src="avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media Bottom</h4>
    <p>私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。私の名前は山田太郎です。架空の人物の名前によく使われます。</p>
  </div>
</div>

ネスティング

メディアオブジェクトはネストすることもできます。

山田太郎 Posted on 2017/04/10

私の名前は山田太郎です。架空の人物の名前によく使われます。

山田太郎 Posted on 2017/04/11

私の名前は山田太郎です。架空の人物の名前によく使われます。

山田太郎 Posted on 2017/04/12

私の名前は山田太郎です。架空の人物の名前によく使われます。

<div class="media">
  <div class="media-left">
    <img src="avatar1.png" class="media-object" style="width:45px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">山田太郎 <small><i>Posted on 2017/04/10</i></small></h4>
    <p>私の名前は山田太郎です。架空の人物の名前によく使われます。</p>
    <!-- Nested media object -->
    <div class="media">
      <div class="media-left">
        <img src="avatar1.png" class="media-object" style="width:45px">
      </div>
      <div class="media-body">
        <h4 class="media-heading">山田太郎 <small><i>Posted on 2017/04/11</i></small></h4>
        <p>私の名前は山田太郎です。架空の人物の名前によく使われます。</p>

        <!-- Nested media object -->
        <div class="media">
          <div class="media-left">
            <img src="avatar1.png" class="media-object" style="width:45px">
          </div>
          <div class="media-body">
            <h4 class="media-heading">山田太郎 <small><i>Posted on 2017/04/12</i></small></h4>
            <p>私の名前は山田太郎です。架空の人物の名前によく使われます。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>