Bootstrap每天必學之媒體對象_javascript技巧

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

我們常常把這樣的效果稱為媒體物件。可以說他是一種抽象的樣式，可以用來建構不同類型的元件。這些組件都具有開篇所說的樣式風格。那麼在Bootstrap框架中刻意將些部分提取出來做來一個組件介紹。其對應的版本檔：

☑ LESS版本：對應的來源檔案是media.less

☑ Sass版本：對應的來源檔案是_media.scss

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

1、媒體物件–預設媒體物件

媒體物件一般是成組出現，而一組媒體物件常常包括以下幾個部分：

☑ 媒體物件的容器：常使用「media」類別名稱表示，用來容納媒體物件的所有內容

☑ 媒體對象的對象：常使用「media-object」表示，就是媒體對象的對象，常常是圖片

☑ 媒體物件的主體：常使用「media-body」表示，就是媒體物件中的主體內容，可以是任何元素，常常是圖片側邊內容

☑ 媒體物件的標題：常使用「media-heading」表示，就是用來描述物件的一個標題，此部分可選

如下圖：

除了上面四個部分之外，在Bootstrap框架中也常常使用「pull-left」或「pull-right」來控制媒體物件中的物件浮動方式。

在具體使用中如下所示：

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object lazy"  src="/static/imghwm/default1.png"  data-src="imgs/1.jpg"  alt="Bootstrap每天必學之媒體對象_javascript技巧">
  </a>
  <div class="media-body">
    <h4 id="系列-十天精通CSS">系列：十天精通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;
}

2、媒體物件–媒體物件的巢狀

在評論系統中，常常能看到下圖的效果：

從外往裡看，這裡有三個媒體對象，只不過是一個嵌套在另一個的里面。那麼在Bootstrap框架中的媒體物件也具備這樣的功能，只需要將另一個媒體物件結構放置在媒體物件的主體內“media-body”，如下所示：

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object lazy"  src="/static/imghwm/default1.png"  data-src="…"  alt="Bootstrap每天必學之媒體對象_javascript技巧">
  </a>
  <div class="media-body">
    <h4 id="Media-Heading">Media Heading</h4>
    <div>…</div>
    <div class="media">
      <a class="pull-left" href="#">
        <img class="media-object lazy"  src="/static/imghwm/default1.png"  data-src="…"  alt="Bootstrap每天必學之媒體對象_javascript技巧">
      </a>
      <div class="media-body">
        <h4 id="Media-Heading">Media Heading</h4>
        <div>…</div>
        <div class="media">
          <a class="pull-left" href="#">
            <img class="media-object lazy"  src="/static/imghwm/default1.png"  data-src="…"  alt="Bootstrap每天必學之媒體對象_javascript技巧">
          </a>
          <div class="media-body">
            <h4 id="Media-Heading">Media Heading</h4>
            <div>Bootstrap每天必學之媒體對象_javascript技巧</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

在確保你的結構沒有嵌套錯的情況下，能直接看到下圖這樣的效果：

3、媒體物件–媒體物件清單

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

使用方法：

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

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object lazy"  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201511/20151130100003233.jpg&#63;2015103010012?x-oss-process=image/resize,p_40"  alt="Bootstrap每天必學之媒體對象_javascript技巧">
    </a>
    <div>
      <h4 id="Media-Header">Media Header</h4>
      <div>…</div>
    </div>
  </li>
  <li>…</li>
  <li>…</li>
</ul>

運作效果如下：

原理分析：

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

/bootstrap.css檔案第4816行～第4819行/

.media-list {
 padding-left: 0;
 list-style: none;
}

以上就是本文的全部內容，幫助大家學習Bootstrap媒體對象，希望對大家的學習有所幫助。