Bootstrap 多媒體對象
本章我們將講解Bootstrap 中的多媒體對象（Media Object）。 這些抽象的對像樣式用於創建各種類型的組件（比如：博客評論），我們可以在組件中使用圖文混排，圖像可以左對齊或者右對齊。 媒體對象可以用更少的代碼來實現媒體對象與文字的混排。
媒體對象輕量標記、易於擴展的特性是通過向簡單的標記應用class 來實現的。 你可以在HTML 標籤中添加以下兩種形式來設置媒體對象：
- .media ：該class允許將媒體對象裡的多媒體（圖像、視頻、音頻）浮動到內容區塊的左邊或者右邊。
- .media-list ：如果你需要一個列表，各項內容是無序列表的一部分，可以使用該class。可用於評論列表與文章列表。
讓我們來看看下面這個有關默認的媒體對象.media 的實例：
實例
< 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 >
嘗試一下»
結果如下所示：
讓我們來看看下面這個有關媒體對象列表.media-list 的實例：
實例
< 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 >
嘗試一下»
結果如下所示：
