メディアオブジェクト

ブログコメント、ツイートなどの非常に反復的なコンポーネントを構築する Bootstrap のメディアオブジェクトのドキュメントと例。

例

メディアオブジェクトは、一部のメディアが、そのメディアを囲んでいないコンテンツと一緒に配置される、複雑で反復的なコンポーネントを構築するのに役立ちます。さらに、flexbox のおかげで、必要な 2 つのクラスだけでこれを実行できます。

以下は、単一のメディアオブジェクトの例です。.media必要なのは、コンテンツのラッピングと.media-body周囲の 2 つのクラスだけです。オプションのパディングとマージンは、スペーシングユーティリティで制御できます。

メディアの見出し

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vulputate の前庭, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ファウシバスのドネクラシニア・コンゲ・フェリス。

<div class="media">
  <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>

Flexbug #12: インライン要素がフレックスアイテムとして扱われない

Internet Explorer 10-11 は、リンクや画像 (または疑似要素) などのインライン要素をフレックス項目として::beforeレンダリングしません。::after唯一の回避策は、インライン以外のdisplay値 ( block、inline-block、などflex) を設定することです。簡単な修正として、表示ユーティリティ.d-flexの 1 つであるを使用することをお勧めします。

出典: GitHub の Flexbugs

ネスティング

メディアオブジェクトは無限にネストできますが、どこかで停止することをお勧めします。親メディアオブジェクト.media内にネストして配置します。.media-body

メディアの見出し

<div class="media">
  <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    <div class="media mt-3">
      <a class="pr-3" href="#">
        <img src=".../64x64" alt="Generic placeholder image">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>

アライメント

メディアオブジェクト内のメディアは、フレックスボックスユーティリティを使用して、コンテンツの先頭 (デフォルト)、中間、または末尾に配置できます.media-body。

上揃えのメディア

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nasceturridiculus mus.

<div class="media">
  <img class="align-self-start mr-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Top-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

中央揃えのメディア

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nasceturridiculus mus.

<div class="media">
  <img class="align-self-center mr-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Center-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

下揃えのメディア

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nasceturridiculus mus.

<div class="media">
  <img class="align-self-end mr-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Bottom-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

注文

HTML 自体を変更するか、カスタムフレックスボックス CSS を追加してorderプロパティを (選択した整数に) 設定することにより、メディアオブジェクト内のコンテンツの順序を変更します。

メディアオブジェクト

<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Media object</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
  <img class="ml-3" src=".../64x64" alt="Generic placeholder image">
</div>

メディア一覧

メディアオブジェクトには構造上の要件がほとんどないため、これらのクラスをリスト HTML 要素で使用することもできます。<ul>または<ol>で、を追加して.list-unstyledブラウザのデフォルトリストスタイルを削除し、に適用.mediaします<li>。いつものように、微調整が必要な場合はいつでもスペーシングユーティリティを使用してください。

リストベースのメディアオブジェクト
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vulputate の前庭, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ファウシバスのドネクラシニア・コンゲ・フェリス。
リストベースのメディアオブジェクト
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vulputate の前庭, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ファウシバスのドネクラシニア・コンゲ・フェリス。
リストベースのメディアオブジェクト
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vulputate の前庭, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ファウシバスのドネクラシニア・コンゲ・フェリス。

<ul class="list-unstyled">
  <li class="media">
    <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media my-4">
    <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media">
    <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
</ul>

メディア オブジェクト

例

メディアの見出し

Flexbug #12: インライン要素がフレックス アイテムとして扱われない

ネスティング

メディアの見出し

メディアの見出し

アライメント

上揃えのメディア

中央揃えのメディア

下揃えのメディア

注文

メディア オブジェクト

メディア一覧

リストベースのメディア オブジェクト

リストベースのメディア オブジェクト

リストベースのメディア オブジェクト

メディアオブジェクト

Flexbug #12: インライン要素がフレックスアイテムとして扱われない

メディアオブジェクト

リストベースのメディアオブジェクト

リストベースのメディアオブジェクト

リストベースのメディアオブジェクト