<!--
media 图文混排
media-left(right) 图片的区域 在左边显示(右边)
media-body 内容区域
media-heading 内容区域里的标题
media-middle 图片居中
media-bottom 图片居下
-->
<div class="container">
<div class="row" style="width:500px">
<div class="media">
<a href="#" class="media-left media-middle media-bottom">
<img src="user_photo.png" width="100"/>
</a>
<div class="media-body">
<h4 class="media-heading">bootstrap</h4>
<p>bootstrapbootstrapbootstrapbootstrapbootstrapbootstrap
</p>
</div>
</div>
</div>
<!-- 图片在右边显示-->
<div class="row" style="width:500px">
<div class="media">
<div class="media-body">
<h4 class="media-heading">bootstrap</h4>
<p>bootstrapbootstrapbootstrapbootstrapbootstrap
</p>
</div>
<a href="#" class="media-right">
<img src="user_photo.png" width="100"/>
</a>
</div>
</div>

<!-- 左右都有图片-->
<div class="row" style="width:500px">
<div class="media">
<a href="#" class="media-left">
<img src="user_photo.png" width="100"/>
</a>
<div class="media-body">
<h4 class="media-heading">bootstrap</h4>
<p>bootstrapbootstrapbootstrapbootstrap
</p>
</div>
<a href="#" class="media-right">
<img src="user_photo.png" width="100"/>
</a>
</div>
</div>

<!-- 类似留言引用 右侧内容又嵌套了一个media-->
<div class="row" style="width:500px">
<div class="media">
<a href="#" class="media-left">
<img src="user_photo.png" width="100"/>
</a>
<div class="media-body">
<h4 class="media-heading">bootstrap</h4>
<p>bootstrapbootstrapbootstrapbootstrap
</p>
<div class="media">
<a href="#" class="media-left">
<img src="user_photo.png" width="100"/>
</a>
<div class="media-body">
<h4 class="media-heading">bootstrap</h4>
<p>bootstrapbootstrapbootstrapbootstrapbootstrapbootstrap
</p>
</div>
</div>
</div>
</div>
</div>
</div>

媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象：

• .media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
• .media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。