Bootstrap 多媒体对象
多媒体对象
Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等:
John Doe Posted on February 19, 2016
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。
Jane Doe Posted on February 20, 2016
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。
Alicia Keyes Posted on February 25, 2016
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。 Nulla vel metus scelerisque ante sollicitudin commodo.
基础多媒体对象
John Doe
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。
John Doe
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。
实例
<!-- 左对齐 -->
<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- 右对齐 -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。</p>
</div>
<div class="media-right">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
</div>
亲自试一试 »
实例解析
<div> 元素使用 .media 类为媒体对象创建容器。
使用 .media-left 类将媒体对象（图像）向左对齐，或使用 .media-right 类将其向右对齐。
应该出现在图像旁边的文本被放置在带有 class="media-body" 的容器中。
此外，您还可以使用 .media-heading 作为标题。
顶部、中间或底部对齐
我们可以使用 media-top, media-middle or media-bottom 相关类来设置多媒体对象的图片显示位置:
媒体置顶
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。
媒体居中
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。
媒体置底
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。
实例
<!-- 媒体顶部 -->
<div class="media">
<div class="media-left media-top">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- 媒体中间 -->
<div class="media">
<div class="media-left media-middle">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- 媒体底部 -->
<div class="media">
<div class="media-left media-bottom">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>
亲自试一试 »
多媒体对象嵌套
多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）:
实例
John Doe Posted on February 19, 2016
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。
John Doe Posted on February 20, 2016
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。
John Doe Posted on February 21, 2016
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。
多媒体对象嵌套的另一个例子
实例
John Doe Posted on February 19, 2016
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。
John Doe Posted on February 20, 2016
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。
John Doe Posted on February 21, 2016
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。
Jane Doe Posted on February 20, 2016
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。
Jane Doe Posted on February 19, 2016
这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本，这是一些示例文本。
