Bootstrap 媒体对象
媒体对象
Bootstrap 提供了一种简单的方法来将媒体对象（如图片或视频）与一些内容左对齐或右对齐。这可以用于显示博客评论、推文等。
John Doe 发布日期：2016 年 2 月 19 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Jane Doe 发布日期：2016 年 2 月 20 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Alicia Keyes 发布日期：2016 年 2 月 25 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla vel metus scelerisque ante sollicitudin commodo.
基本媒体对象
John Doe
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
John Doe
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
示例
<!-- 左对齐 -->
<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="media-right">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
</div>
亲自尝试 »
示例解释
使用带有 .media 类的 <div> 元素来创建媒体对象的容器。
使用 .media-left 类将媒体对象（图像）左对齐，或使用 .media-right 类将其右对齐。
应该出现在图像旁边的文本，放置在带有类 "media-body" 的容器中。
此外，您可以使用 .media-heading 用于标题。
顶部、中间或底部对齐
媒体对象也可以使用 media-top、media-middle 或 media-bottom 类与顶部、中间或底部对齐
媒体顶部
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
媒体中间
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
媒体底部
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
示例
<!-- 媒体顶部 -->
<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">媒体顶部</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">媒体中间</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">媒体底部</h4>
<p>Lorem ipsum...</p>
</div>
</div>
亲自尝试 »
嵌套媒体对象
媒体对象也可以嵌套（一个媒体对象在另一个媒体对象内）
示例
John Doe 发布日期：2016 年 2 月 19 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
John Doe 发布日期：2016 年 2 月 20 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
John Doe 发布日期：2016 年 2 月 21 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
嵌套的另一个示例
示例
John Doe 发布日期：2016 年 2 月 19 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
John Doe 发布日期：2016 年 2 月 20 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
John Doe 发布日期：2016 年 2 月 21 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Jane Doe 发布日期：2016 年 2 月 20 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Jane Doe 发布日期：2016 年 2 月 19 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
