Bootstrap-v3-组件-媒体对象

媒体对象

这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。

1、默认样式

默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。

1.1 在内容块的左边添加图片

<!-- 默认样式的媒体对象 -->
<div class="media">
  <div class="media-left">
    <a href="#"><img src="./img/cat.jpg" style="width: 100px; height: 100px;"></a>
  </div>
  <div class="media-body">
    <h4>新闻标题</h4>
    <p>
      新闻的描述性文字。Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 
    </p>
  </div>
</div>

1.2 在内容块的右边添加图片

<!-- 默认样式的媒体对象 -->
<div class="media">
  <!-- 在内容块的左边展示一个图片 -->
  <div class="media-body">
    <h4>新闻标题</h4>
    <p>
      新闻的描述性文字。Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 
    </p>
  </div>
  <!-- 在内容块的右边展示一个图片 -->
  <div class="media-right">
    <a href="#"><img src="./img/cat.jpg" style="width: 100px; height: 100px;"></a>
  </div>
</div>

1.3 在内容块的左边和右边添加图片

<!-- 默认样式的媒体对象 -->
<div class="media">
  <!-- 在内容块的左边展示一个图片 -->
  <div class="media-left">
    <a href="#"><img src="./img/cat.jpg" style="width: 100px; height: 100px;"></a>
  </div>
  <!-- 内容块 -->
  <div class="media-body">
    <h4>新闻标题</h4>
    <p>
      新闻的描述性文字。Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 
    </p>
  </div>
  <!-- 在内容块的右边展示一个图片 -->
  <div class="media-right">
    <a href="#"><img src="./img/cat.jpg" style="width: 100px; height: 100px;"></a>
  </div>
</div>

2、媒体对象的对齐

图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。

<!-- 媒体对象的对齐 -->
<div class="media">
  <!-- 中间对齐 -->
  <div class="media-left media-middle">
    <a href="#"><img src="./img/cat.jpg" style="width: 50px; height: 50px;" class="media-object"></a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">新闻标题</h4>
    <p>
      新闻的描述性文字。Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 
    </p>
  </div>
</div>
<div class="media">
  <!-- 底部对齐 -->
  <div class="media-left media-bottom">
    <a href="#"><img src="./img/cat.jpg" style="width: 50px; height: 50px;" class="media-object"></a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">新闻标题</h4>
    <p>
      新闻的描述性文字。Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 
    </p>
  </div>
</div>

3、媒体对象列表

用一点点额外的标记，就能在列表内使用媒体对象组件（对评论或文章列表很有用）。

<!-- 媒体对象列表 -->
<ul class="media-list">
  <li class="meida">
    <div class="media-left">
      <a href="#"><img src="./img/cat.jpg" style="width: 64px; height: 64px;"></a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Monica</h4>
      <p>这是一个很好用的app，我希望可以完善它，并取得更好的商业价值，谢谢！</p>
    </div>
  </li>
  <li class="meida" style="margin-left: 64px;">
    <div class="media-left">
      <a href="#"><img src="./img/cat.jpg" class="media-object" style="width: 64px; height: 64px;"></a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Monica</h4>
      <p>这是一个很好用的app，我希望可以完善它，并取得更好的商业价值，谢谢！</p>
    </div>
  </li>
</ul>