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

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

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

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

  ?  媒體對象的標題：常使用“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模塊知識，經(jīng)典案例分析，代碼同步調(diào)試，讓網(wǎng)頁穿上絢麗裝備！</div>
    </div>
</div>

運行效果如下：

原理分析：

媒體對象樣式相對來說比較簡單，只是設(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;
}