7-15 媒体对象--默认媒体对象

媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分：

  ☑   媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容

  ☑  媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片

  ☑  媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容

  ☑  媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选

如下图所示：

除了上面四个部分之外，在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。

在具体使用中如下所示：

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="http://img1.sycdn.imooc.com//52e1d29d000161fe06000338-300-170.jpg" alt="...">
    </a>
    <div class="media-body">
        <h4 class="media-heading">系列：十天精通CSS3</h4>
        <div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>
    </div>
</div>

运行效果如下：

原理分析：

媒体对象样式相对来说比较简单，只是设置他们之间的间距，如下所示：

/*bootstrap.css文件第4792行～4815行*/
.media,
.media-body {
  overflow: hidden;
  zoom: 1;
}
.media,
.media .media {
  margin-top: 15px;
}
.media:first-child {
  margin-top: 0;
}
.media-object {
  display: block;
}
.media-heading {
  margin: 0 0 5px;
}
.media > .pull-left {
  margin-right: 10px;
}
.media > .pull-right {
  margin-left: 10px;
}