本章我們將說明 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中文網其他相關文章！
