Bootstrap 多媒體對象

本章節我們將討論Bootstrap中的多媒體對象。這些抽象的對象樣式用於建議多種組件類型（如：博客評論），我們可以在組件中使用圖文混排，圖片可以左對齊或者右對齊。媒體對象可以用更少的代碼來實現多媒體對象與文字的混排。

你可以在HTML標籤中添加以下兩種形式來設置媒體對象：

• .media: 該類允許將媒體對象裏的多媒體（圖像，視頻）浮動到內容區塊的左邊或者右邊。
• .media-list: 如果你需要一個列表，各項內容是無序列表的一部分，可以使用該類。可用於評論列表與文章列表。

以下讓我們來看下使用多媒體對象.media類的實例：

<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>

以上實例顯示效果如下：

以下讓我們來看下使用多媒體對象.media-list類的實例：

<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>

以上實例顯示效果如下：