bootstrap中的媒體對象

標籤：媒體   bootstrap   

媒體對象

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

650) this.width=650;" class="alignnone size-medium wp-image-236 img-responsive" src="http://www.seashen.cn/wp-content/uploads/2015/11/mmm-300x70.png" alt="mmm" width="300" height="70" style="vertical-align:middle;border-style:none;height:auto;" />

我們常常把這樣的效果稱為媒體對象。可以說他是一種抽像的樣式，可以用來構建不同類型的組件。這些組件都具有開篇所說的樣式風格。那麼在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>

運行效果如下：

650) this.width=650;" class="alignnone size-medium wp-image-237 img-responsive" src="http://www.seashen.cn/wp-content/uploads/2015/11/dddda-300x84.png" alt="dddda" width="300" height="84" style="vertical-align:middle;border-style:none;height:auto;" />

原理分析：

媒體對象樣式相對來說比較簡單，只是設定他們之間的間距，如下所示：

/*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 class="pull-left" href="#">        <img class="media-object" src="…" alt="...">    </a>    <div class="media-body">        <h4 class="media-heading">Media Heading</h4>        <div>…</div>        <div class="media">            <a class="pull-left" href="#">                <img class="media-object" src="…" alt="...">            </a>            <div class="media-body">                <h4 class="media-heading">Media Heading</h4>                <div>…</div>                <div class="media">                    <a class="pull-left" href="#">                        <img class="media-object" src="…" alt="...">                    </a>                    <div class="media-body">                        <h4 class="media-heading">Media Heading</h4>                        <div>...</div>                    </div>                </div>            </div>        </div>    </div></div>

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

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

650) this.width=650;" class="alignnone wp-image-238 img-responsive" src="http://www.seashen.cn/wp-content/uploads/2015/11/sssss213-300x171.png" alt="sssss213" width="682" height="389" style="vertical-align:middle;border-style:none;height:auto;" />

使用方法：

針對的媒體對象列表效果，Bootstrap架構提供了一個列表展示的效果，在寫結構的時候可以使用ul，並且在ul上添加類名“media-list”，而在li上使用“media”，範例程式碼如下：

<ul class="media-list">    <li class="media">        <a class="pull-left" href="#">            <img class="media-object" src=\‘#\‘" /a>        <div class="media-body">            <h4 class="media-heading">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;}

bootstrap中的媒體對象