標籤：
原文:Bootstrap<基礎二十七> 多媒體對象（Media Object）Bootstrap 中的多媒體對象（Media Object）。這些抽象的對象樣式用於建立各種類型的組件（比如：部落格評論），我們可以在組件中使用圖文混排，映像可以靠左對齊或者靠右對齊。媒體對象可以用更少的代碼來實現媒體對象與文字的混排。
媒體對象輕量標記、易於擴充的特性是通過向簡單的標記應用 class 來實現的。你可以在 HTML 標籤中添加以下兩種形式來設定媒體對象：
讓我們來看看下面這個有關預設的媒體對象 .media 的執行個體：
<!DOCTYPE html><html><head> <title>Bootstrap 執行個體 - 預設的媒體對象</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script></head><body><div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/wp-content/uploads/2014/06/64.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="/wp-content/uploads/2014/06/64.jpg" alt="媒體對象"> </a> <div class="media-body"> <h4 class="media-heading">媒體標題</h4> 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒體對象"> </a> <div class="media-body"> <h4 class="media-heading">媒體標題</h4> 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 </div> </div> </div></div></body></html>
結果如下所示：
讓我們來看看下面這個有關媒體對象列表 .media-list 的執行個體：
<!DOCTYPE html><html><head> <title>Bootstrap 執行個體 - 媒體對象列表</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script></head><body><ul class="media-list"> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="通用的預留位置映像"> </a> <div class="media-body"> <h4 class="media-heading">媒體標題</h4> <p>這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。</p> <!-- 嵌套的媒體對象 --> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="通用的預留位置映像"> </a> <div class="media-body"> <h4 class="media-heading">嵌套的媒體標題</h4> 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 <!-- 嵌套的媒體對象 --> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="通用的預留位置映像"> </a> <div class="media-body"> <h4 class="media-heading">嵌套的媒體標題</h4> 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 </div> </div> </div> </div> <!-- 嵌套的媒體對象 --> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="通用的預留位置映像"> </a> <div class="media-body"> <h4 class="media-heading">嵌套的媒體標題</h4> 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 </div> </div> </div> </li> <li class="media"> <a class="pull-right" href="#"> <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="通用的預留位置映像"> </a> <div class="media-body"> <h4 class="media-heading">媒體標題</h4> 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 這是一些樣本文本。這是一些樣本文本。 </div> </li></ul></body></html>
結果如下所示：
系列文章：Bootstrap <基礎一> css 概覽Bootstrap<基礎二>網路系統
Bootstrap<基礎三>排版
Bootstrap<基礎四> 代碼
Bootstrap <基礎五>表格
Bootstrap<基礎六> 表單
Bootstrap <基礎七>按鈕
Bootstrap <基礎八>圖片
Bootstrap<基礎九>輔助類
Bootstrap<基礎十> 響應式工具 + 生產力
Bootstrap<基礎十一>字型表徵圖(Glyphicons)
Bootstrap <基礎十二>下拉式功能表（Dropdowns）
Bootstrap<基礎十三> 按鈕組
Bootstrap<基礎十四> 按鈕下拉式功能表
Bootstrap<基礎十五> 輸入框組
Bootstrap<基礎十六> 導航元素
Bootstrap<基礎十七>導覽列Bootstrap <基礎十八>麵包屑導航（Breadcrumbs）Bootstrap <基礎十九>分頁Bootstrap<基礎二十> 標籤Bootstrap <基礎二十一>徽章（Badges）Bootstrap <基礎二十二>超大螢幕（Jumbotron）Bootstrap <基礎二十三>頁面標題（Page Header）Bootstrap<基礎二十四> 縮圖Bootstrap <基礎二十五>警告（Alerts）Bootstrap <基礎二十六>進度條Bootstrap<基礎二十七> 多媒體對象（Media Object）Bootstrap<基礎二十七> 多媒體對象（Media Object）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
