Bootstrap中的媒體對象

媒體對象

在Web頁面或者說移動頁面製做中，經常看到這樣的效果，左邊居左（或居右），內容居右（或居左）排列，以下圖所示：

咱們經常把這樣的效果稱爲媒體對象。能夠說他是一種抽像的樣式，能夠用來構建不一樣類型的組件。這些組件都具備開篇所說的樣式風格。那麼在Bootstrap框架中特地將些部分提取出來作來一個組件介紹。其對應的版本文件：

☑ LESS版本：對應的源文件是media.less

☑ Sass版本：對應的源文件是_media.scss

☑ 編譯後版本：對應bootstrap.css文件第4792行～第4819行

媒體對象--默認媒體對象

媒體對象通常是成組出現，而一組媒體對象經常包括如下幾個部分：

☑   媒體對像的容器：常使用「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://img.mukewang.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; }

媒體對象--媒體對象的嵌套

在評論系統中，經常能看到：

從外往裏看，這裏有三個媒體對象，只不過是一個嵌套在另外一個的裏面。那麼在Bootstrap框架中的媒體對象也具有這樣的功能，只須要將另外一個媒體對象結構放置在媒體對象的主體內「media-body」，以下所示：

<div class="media">     <a href="#">         <img src="…" alt="...">     </a>     <div>         <h4>Media Heading</h4>         <div>…</div>         <div class="media">             <a href="#">                 <img src="…" alt="...">             </a>             <div>                 <h4>Media Heading</h4>                 <div>…</div>                 <div class="media">                     <a href="#">                         <img src="…" alt="...">                     </a>                     <div>                         <h4>Media Heading</h4>                         <div>...</div>                     </div>                 </div>             </div>         </div>     </div> </div>

媒體對象--媒體對象列表

媒體對象的嵌套僅是媒體對象中一個簡單應用效果之一，在不少時候，咱們還會碰到一個列表，每一個列表項都和媒體對象長得差很少，一樣用評論系統來講事：

使用方法：

針對上圖的媒體對象列表效果，Bootstrap框架提供了一個列表展現的效果，在寫結構的時候可使用ul，而且在ul上添加類名「media-list」，而在li上使用「media」，示例代碼以下：

<ul class="media-list">     <li class="media">         <a href="#">             <img src=" " alt="...">         </a>         <div>             <h4>Media Header</h4>             <div>…</div>         </div>     </li>     <li class="media">…</li>     <li class="media">…</li> </ul>

原理分析：

媒體對象列表，在樣式上也並無作過多的特殊處理，只是把列表的左間距置０以及去掉了項目列表符號：

/*bootstrap.css文件第4816行～第4819行*/ .media-list {   padding-left: 0;   list-style: none; }