文章目录[隐藏]
Bootstrap 中的多媒体对象（Media Object），这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象：
.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。
默认样式
默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。
Media heading
Cras sit amet nibh libero, in gravida nulla.
Media heading
Cras sit amet nibh libero, in gravida nulla.
Nested media heading
Cras sit amet nibh libero, in gravida nulla.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
Media heading
Cras sit amet nibh libero, in gravida nulla.Nulla vel metus scelerisque ante
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。
对齐
图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。
Top aligned media
Cras sit amet nibh libero, in gravida nulla.
Middle aligned media
Cras sit amet nibh libero, in gravida nulla.
Bottom aligned media
Cras sit amet nibh libero, in gravida nulla.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>媒体对象列表
用一点点额外的标记，就能在列表内使用媒体对象组件（对评论或文章列表很有用）。
-
Media heading
Cras sit amet nibh libero, in gravida nulla.
Nested media heading
Cras sit amet nibh libero, in gravida nulla.
Nested media heading
Cras sit amet nibh libero, in gravida nulla.
Nested media heading
Cras sit amet nibh libero, in gravida nulla.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>