Bootstrap-media-object

ブートストラップ-メディアオブジェクト

この章では、Mediaオブジェクトについて説明します。 これらは、テキストコンテンツに沿って左揃えまたは右揃えの画像を特徴とするさまざまなタイプのコンポーネント（ブログコメント、ツイートなど）を構築するための抽象的なオブジェクトスタイルです。 メディアオブジェクトの目的は、これらの情報ブロックを開発するためのコードを大幅に短くすることです。

メディアオブジェクトの目標（ライトマークアップ、簡単な拡張性）は、いくつかの単純なマークアップにクラスを適用することによって達成されます。 メディアオブジェクトには2つの形式があります-

• .media -このクラスは、コンテンツブロックの左または右にメディアオブジェクト（画像、ビデオ、およびオーディオ）をフロートさせることができます。
• .media-list -アイテムが順不同リストの一部となるリストを準備している場合は、クラスを使用します。 コメントスレッドまたは記事リストに役立ちます。

デフォルトのメディアオブジェクトの例を見てみましょう-

<div class = "media">
   <a class = "pull-left" href = "#">
      <img class = "media-object" src = "/bootstrap/images/64.jpg" 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 = "#">
      <img class = "media-object" src = "/bootstrap/images/64.jpg" 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 = "#">
            <img class = "media-object" src = "/bootstrap/images/64.jpg" 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>

私たちはメディアリストの例を見てみましょう-

<ul class = "media-list">
   <li class = "media">
      <a class = "pull-left" href = "#">
         <img class = "media-object" src = "/bootstrap/images/64.jpg" 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 = "#">
               <img class = "media-object" src = "/bootstrap/images/64.jpg"
                  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 = "#">
                     <img class = "media-object" src = "/bootstrap/images/64.jpg"
                        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 = "#">
               <img class = "media-object" src = "/bootstrap/images/64.jpg"
                  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 = "#">
         <img class = "media-object" src = "/bootstrap/images/64.jpg"
            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>