媒體對(duì)象一般是成組出現(xiàn)，而一組媒體對(duì)象常常包括以下幾個(gè)部分：

  ?   媒體對(duì)像的容器：常使用“media”類名表示，用來容納媒體對(duì)象的所有內(nèi)容

  ?  媒體對(duì)像的對(duì)象：常使用“media-object”表示，就是媒體對(duì)象中的對(duì)象，常常是圖片

  ?  媒體對(duì)象的主體：常使用“media-body”表示，就是媒體對(duì)像中的主體內(nèi)容，可以是任何元素，常常是圖片側(cè)邊內(nèi)容

  ?  媒體對(duì)象的標(biāo)題：常使用“media-heading”表示，就是用來描述對(duì)象的一個(gè)標(biāo)題，此部分可選

如下圖所示：

除了上面四個(gè)部分之外，在Bootstrap框架中還常常使用“pull-left”或者“pull-right”來控制媒體對(duì)象中的對(duì)象浮動(dòng)方式。

在具體使用中如下所示：

<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模塊知識(shí)，經(jīng)典案例分析，代碼同步調(diào)試，讓網(wǎng)頁穿上絢麗裝備！</div>
    </div>
</div>

運(yùn)行效果如下：

原理分析：

媒體對(duì)象樣式相對(duì)來說比較簡(jiǎn)單，只是設(shè)置他們之間的間距，如下所示：

/*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;
}