Bootstrap媒體對象的詳解

        本章我們將說明 Bootstrap 中的多媒體物件（Media Object）。這些抽象的物件樣式用於創建各種類型的元件（例如：部落格評論），我們可以在元件中使用圖文混排，圖像可以左對齊或右對齊。媒體物件可以用更少的程式碼來實現媒體物件與文字的混排。

媒體物件輕量標記、易於擴展的特性是透過向簡單的標記應用 class 來實現的。你可以在HTML 標籤中加入以下兩種形式來設定媒體物件：

.media：該class 允許將媒體物件裡的多媒體（圖像、視訊、音訊）浮動到內容區塊的左邊或右邊。

.media-list：如果你需要一個列表，各項內容是無序列表的一部分，可以使用該 class。可用於評論清單與文章清單。

預設樣式

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

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

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

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

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

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

　　[註]在html 結構中， .media-right 應當放在 .media-body 的後面

　　媒體物件樣式相對來說比較簡單，只是設定他們之間的間距

.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-left {
  margin-right: 10px;
}.media-right {
  margin-left: 10px;
}

<div class="media"><a class="media-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>好的代码像粥一样，都是用时间熬出来的</div></div></div>

 

嵌套

　　在評論系統中，常會有媒體物件嵌套的需求。在Bootstrap框架中的媒體物件也具備這樣的功能，只需要將另一個媒體物件結構放置在媒體物件的主體內「media-body」

<div class="media"><a class="media-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>好的代码像粥一样，都是用时间熬出来的</div><div class="media"><a class="pull-left" href="#"><img class="media-object" src="http://via.placeholder.com/100x100" alt="..."></a><div class="media-body"><h4 class="media-heading">我是小火柴</h4><div>好巧啊，我也叫小火柴</div><div class="media"><a class="pull-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>是的</div></div></div></div></div></div></div><div class="media"><a class="media-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div>

 

對齊方式

　　圖片或其他媒體類型可以在頂部、中間或底部對齊。預設頂部對齊。透過.media-middle或.media-bottom來設定

.media-middle {vertical-align: middle;
}.media-bottom {vertical-align: bottom;
}

<div class="media"><a class="media-left" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div><div class="media"><a class="media-left media-middle" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div><div class="media"><a class="media-left media-bottom" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div>

 

媒體物件列表

　　媒體物件的嵌套僅是媒體物件中一個簡單應用效果之一，在很多時候，我們還會碰到一個列表，每個列表項目都和媒體物件長得差不多。 Bootstrap框架提供了一個列表展示的效果，在寫入結構的時候可以使用ul，並且在ul上添加類別名稱“media-list”，而在li上使用“media”

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

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

<ul class="media-list">
  <li class="media"><a class="media-left" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div>
  </li>
  <li class="media"><a class="media-left" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>好的代码像粥一样，都是用时间熬出来的</div></div>
  </li>  </ul>

# 

以上是Bootstrap媒體對象的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！