原文链接：http://www.jianshu.com/p/6443be21efbd
一个媒体对象由以下及部分组成
- 父容器
.media - 媒体部分
.media-left或者.media-right，其内部包含图像使用<img>同时设置.media-object - 内容部分
.media-body，其内部包含标题<h1>同时设置.media-heading，还可以设置小标题<small>
<div class="media">
<div class="media-left">
<a href="#">
<img src="/images/girls.jpg" class="media-object" alt="Sample Image">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">大标题 <small><i>小标题</i></small></h4>
<p> .......</p>
</div>
</div>媒体对象
如何让媒体对象的图片变成圆角或者圆形样式 ？
给 <img> 添加一个 .img-circle 或者 .img-round 样式
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" ......>
</a>
</div>
<div class="media-body">
......
</div>
</div>圆角
媒体对象中文本和图像在水平方向上怎样对齐 ？
如果图片高度大，文字高度小，则图片和文字顶部顶部对齐；如果图片高度小，文字高度大，则
- 默认情况下是顶部对齐
- 在
.media-left或.media-right上使用.media-middle则水平居中对齐 - 在
.media-left或.media-right上使用.media-bottom则底部对齐
<div class="media">
<div class="media-left media-middle">
......
</div>
<div class="media-body">
......
</div>
</div>对齐方式
媒体对象列表是什么东东？如何创建？
媒体对象列表就是一堆媒体对象，使用列表的好处是可以嵌套
- 最外层使用
<ul>元素设置.media-list创建媒体对象列表 - 第一层的媒体对象使用
<li>设置.media创建，其它层还是使用<div>创建 - 嵌套媒体对象在
.media-body部分创建
<ul class="media-list">
<!-- 第一层嵌套 -->
<li class="media">
<div class="media-left">
......
</div>
<div class="media-body">
......
<!-- 第二层嵌套 -->
<div class="media">
<div class="media-left">
......
</div>
<div class="media-body">
......
<!-- 第三层嵌套 -->
<div class="media">
<div class="media-left">
......
</div>
<div class="media-body">
......
</div>
</div>
</div>
</div>
<!-- 第二层嵌套 -->
<div class="media">
<div class="media-left">
......
</div>
<div class="media-body">
......
</div>
</div>
</div>
</li>
<!-- 第一层嵌套 -->
<li class="media">
<div class="media-left">
......
</div>
<div class="media-body">
......
</div>
</li>
</ul>文／勤劳的悄悄（简书作者）
原文链接：http://www.jianshu.com/p/6443be21efbd
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。