Manuel chinois Bootstrap
/ Bootstrap 多媒體對象
Bootstrap 多媒體對象
Bootstrap 多媒體對象（Media Object）
本章我們將講解 Bootstrap 中的多媒體對象（Media Object）。這些抽象的對象樣式用于創(chuàng)建各種類型的組件（比如：博客評論），我們可以在組件中使用圖文混排，圖像可以左對齊或者右對齊。媒體對象可以用更少的代碼來實(shí)現(xiàn)媒體對象與文字的混排。
媒體對象輕量標(biāo)記、易于擴(kuò)展的特性是通過向簡單的標(biāo)記應(yīng)用 class 來實(shí)現(xiàn)的。你可以在 HTML 標(biāo)簽中添加以下兩種形式來設(shè)置媒體對象：
.media：該 class 允許將媒體對象里的多媒體（圖像、視頻、音頻）浮動到內(nèi)容區(qū)塊的左邊或者右邊。
.media-list：如果你需要一個列表，各項內(nèi)容是無序列表的一部分，可以使用該 class?？捎糜谠u論列表與文章列表。
讓我們來看看下面這個有關(guān)默認(rèn)的媒體對象 .media 的實(shí)例：
實(shí)例
<!DOCTYPE html> <html> <head> <title>Bootstrap 實(shí)例 - 默認(rèn)的媒體對象</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/upload/course/000/000/010/5806d6ddb047c281.png" alt="媒體對象"> </a> <div class="media-body"> <h4 class="media-heading">媒體標(biāo)題</h4> 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 </div> </div> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/upload/course/000/000/010/5806d6ddb047c281.png" alt="媒體對象"> </a> <div class="media-body"> <h4 class="media-heading">媒體標(biāo)題</h4> 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/upload/course/000/000/010/5806d6ddb047c281.png" alt="媒體對象"> </a> <div class="media-body"> <h4 class="media-heading">媒體標(biāo)題</h4> 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 </div> </div> </div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
讓我們來看看下面這個有關(guān)媒體對象列表 .media-list 的實(shí)例：
實(shí)例
<!DOCTYPE html> <html> <head> <title>Bootstrap 實(shí)例 - 媒體對象列表</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/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">媒體標(biāo)題</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">嵌套的媒體標(biāo)題</h4> 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 <!-- 嵌套的媒體對象 --> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/upload/course/000/000/010/5806d6ddb047c281.png" alt="通用的占位符圖像"> </a> <div class="media-body"> <h4 class="media-heading">嵌套的媒體標(biāo)題</h4> 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 </div> </div> </div> </div> <!-- 嵌套的媒體對象 --> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/upload/course/000/000/010/5806d6ddb047c281.png" alt="通用的占位符圖像"> </a> <div class="media-body"> <h4 class="media-heading">嵌套的媒體標(biāo)題</h4> 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 </div> </div> </div> </li> <li class="media"> <a class="pull-right" href="#"> <img class="media-object" src="/upload/course/000/000/010/5806d6ddb047c281.png" alt="通用的占位符圖像"> </a> <div class="media-body"> <h4 class="media-heading">媒體標(biāo)題</h4> 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 </div> </li> </ul> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例