Bootstrap_媒體對象

標籤：

一、基本媒體對象
　　媒體對象一般是成組出現，而一組媒體對象常常包括以下幾個部分：

　　? 媒體對像的容器：常使用“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="" style="height: 170px;width:300px">  </a>  <div class="media-body">    <h4 class="media-heading">系列：十天精通CSS3</h4>    <div>全方位深刻詳解CSS3模組知識，經典案例分析，代碼同步調試，讓網頁穿上絢麗裝備！</div>  </div></div>

 

二、媒體對象的嵌套

<div class="media">  <a class="pull-left" href="#">    <img class="media-object"  style="height: 50px;width: 50px">  </a>  <div class="media-body">    <h4 class="media-heading">我是LOGO</h4>    <div>我在寫Bootstrap框中的媒體對象測試案例</div>    <div class="media">      <a class="pull-left" href="#">        <img class="media-object" style="height: 50px;width: 50px">      </a>      <div class="media-body">        <h4 class="media-heading">嵌套</h4>        <div>嵌套</div>        <div class="media">          <a class="pull-left" href="#">            <img class="media-object" style="height: 50px;width: 50px">          </a>          <div class="media-body">            <h4 class="media-heading">W3cplus</h4>            <div>W3cplus站上還有很多教程....</div>          </div>        </div>      </div>    </div>  </div></div>

 

三、媒體對象列表

　　媒體對象的嵌套僅是媒體對象中一個簡單應用效果之一，在很多時候，我們還會碰到一個列表，每個清單項目都和媒體對象長得差不多。

　　Bootstrap架構提供了一個列表展示的效果，在寫結構的時候可以使用ul，並且在ul上添加類名“media-list”，而在li上使用“media”。

<ul class="media-list">  <li class="media">    <a class="pull-left" href="#">      <img class="media-object" style="height: 50px;width: 50px">    </a>    <div class="media-body">      <h4 class="media-heading">LOGO</h4>      <div>Bootstrap框中的媒體對象測試案例</div>    </div>  </li>  <li class="media">    <a class="pull-left" href="#">      <img class="media-object" style="height: 50px;width: 50px">    </a>    <div class="media-body">      <h4 class="media-heading">列表</h4>      <div>列表</div>    </div>  </li>  <li class="media">    <a class="pull-left" href="#">      <img class="media-object" style="height: 50px;width: 50px">    </a>    <div class="media-body">      <h4 class="media-heading">W3cplus</h4>      <div>W3cplus站上還有很多教程....</div>    </div>  </li></ul>

Bootstrap_媒體對象