Bootstrap<基礎二十七> 多媒體對象（Media Object）Bootstrap 中的多媒體對象（Media Object）。這些抽象的對象樣式用于建立各種類型的元件（比如：部落格評論），我們可以在元件中使用圖文混排，圖像可以左對齊或者右對齊。媒體對象可以用更少的代碼來實作媒體對象與文字的混排。

媒體對象輕量标記、易于擴充的特性是通過向簡單的标記應用 class 來實作的。你可以在 HTML 标簽中添加以下兩種形式來設定媒體對象：

.media：該 class 允許将媒體對象裡的多媒體（圖像、視訊、音頻）浮動到内容區塊的左邊或者右邊。

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

讓我們來看看下面這個有關預設的媒體對象 .media 的執行個體：

結果如下所示：

讓我們來看看下面這個有關媒體對象清單 .media-list 的執行個體：

系列文章：

<a href="http://www.cnblogs.com/lansy/p/4334611.html%20" target="_blank">Bootstrap &lt;基礎一&gt; css 概覽</a>

<a href="http://www.cnblogs.com/lansy/p/4337381.html%20" target="_blank">Bootstrap&lt;基礎二&gt;網絡系統</a>

<a href="http://www.cnblogs.com/lansy/p/4339002.html%20" target="_blank">Bootstrap&lt;基礎三&gt;排版</a>

<a href="http://www.cnblogs.com/lansy/p/4341498.html%20" target="_blank">Bootstrap&lt;基礎四&gt; 代碼</a>

<a href="http://www.cnblogs.com/lansy/p/4343823.html%20" target="_blank">Bootstrap &lt;基礎五&gt;表格</a>

<a href="http://www.cnblogs.com/lansy/p/4346492.html">Bootstrap&lt;基礎六&gt; 表單</a>

<a href="http://www.cnblogs.com/lansy/p/4355913.html%20" target="_blank">Bootstrap &lt;基礎七&gt;按鈕</a>

<a href="http://www.cnblogs.com/lansy/p/4380536.html%20" target="_blank">Bootstrap &lt;基礎八&gt;圖檔</a>

<a href="http://www.cnblogs.com/lansy/p/4395706.html" target="_blank">Bootstrap&lt;基礎九&gt;輔助類</a>

<a href="http://www.cnblogs.com/lansy/p/4397409.html%20" target="_blank">Bootstrap&lt;基礎十&gt; 響應式實用工具</a>

<a href="http://www.cnblogs.com/lansy/p/4401476.html%20" target="_blank">Bootstrap&lt;基礎十一&gt;字型圖示(Glyphicons)</a>

<a href="http://www.cnblogs.com/lansy/p/4408654.html%20" target="_blank">Bootstrap &lt;基礎十二&gt;下拉菜單（Dropdowns）</a>

<a href="http://www.cnblogs.com/lansy/p/4413528.html%20" target="_blank">Bootstrap&lt;基礎十三&gt; 按鈕組</a>

<a href="http://www.cnblogs.com/lansy/p/4423945.html%20" target="_blank">Bootstrap&lt;基礎十四&gt; 按鈕下拉菜單</a>

<a href="http://www.cnblogs.com/lansy/p/4427558.html%20" target="_blank">Bootstrap&lt;基礎十五&gt; 輸入框組</a>

<a href="http://www.cnblogs.com/lansy/p/4430985.html%20" target="_blank">Bootstrap&lt;基礎十六&gt; 導航元素</a>

<a href="http://www.cnblogs.com/lansy/p/4433938.html%20" target="_blank">Bootstrap&lt;基礎十七&gt;導航欄</a>

<a href="http://www.cnblogs.com/lansy/p/4440639.html%20" target="_blank">Bootstrap &lt;基礎十八&gt;面包屑導航（Breadcrumbs）</a>

<a href="http://www.cnblogs.com/lansy/p/4440639.html%20" target="_blank">Bootstrap &lt;基礎十九&gt;分頁</a>

<a href="http://www.cnblogs.com/lansy/p/4446365.html%20" target="_blank">Bootstrap&lt;基礎二十&gt; 标簽</a>

<a href="http://www.cnblogs.com/lansy/p/4449345.html%20" target="_blank">Bootstrap &lt;基礎二十一&gt;徽章（Badges）</a>

<a href="http://www.cnblogs.com/lansy/p/4452409.html%20" target="_blank">Bootstrap &lt;基礎二十二&gt;超大螢幕（Jumbotron）</a>

<a href="http://www.cnblogs.com/lansy/p/4458972.html%20" target="_blank">Bootstrap &lt;基礎二十三&gt;頁面标題（Page Header）</a>

<a href="http://www.cnblogs.com/lansy/p/4462048.html%20" target="_blank">Bootstrap&lt;基礎二十四&gt; 縮略圖</a>

<a href="http://www.cnblogs.com/lansy/p/4475377.html%20" target="_blank">Bootstrap &lt;基礎二十五&gt;警告（Alerts）</a>

<a href="http://www.cnblogs.com/lansy/p/4478334.html%20" target="_blank">Bootstrap &lt;基礎二十六&gt;進度條</a>

<a href="http://www.cnblogs.com/lansy/p/4481088.html%20" target="_blank">Bootstrap&lt;基礎二十七&gt; 多媒體對象（Media Object）</a>