# Bootstrap 多媒體對象(Media Object)
本章我們將講解 Bootstrap 中的多媒體對象(Media Object)。這些抽象的對象樣式用于創建各種類型的組件(比如:博客評論),我們可以在組件中使用圖文混排,圖像可以左對齊或者右對齊。媒體對象可以用更少的代碼來實現媒體對象與文字的混排。
媒體對象輕量標記、易于擴展的特性是通過向簡單的標記應用 class 來實現的。你可以在 HTML 標簽中添加以下兩種形式來設置媒體對象:
* **.media**:該 class 允許將媒體對象里的多媒體(圖像、視頻、音頻)浮動到內容區塊的左邊或者右邊。
* **.media-list**:如果你需要一個列表,各項內容是無序列表的一部分,可以使用該 class。可用于評論列表與文章列表。
讓我們來看看下面這個有關默認的媒體對象 .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="img/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="img/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="img/64.jpg"
alt="媒體對象">
</a>
<div class="media-body">
<h4 class="media-heading">媒體標題</h4>
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
</div>
</div>
</div>
</div>
</body>
</html>
```
[](/try/tryit.php?filename=bootstrap3-mediaobject)
結果如下所示:

讓我們來看看下面這個有關媒體對象列表 .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="img/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="img/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="img/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="img/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="img/64.jpg"
alt="通用的占位符圖像">
</a>
<div class="media-body">
<h4 class="media-heading">媒體標題</h4>
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
</div>
</li>
</ul>
</body>
</html>
```
[](/try/tryit.php?filename=bootstrap3-mediaobject-list)
結果如下所示:

- Bootstrap 簡介
- Bootstrap 簡介
- Bootstrap 環境安裝
- Bootstrap CSS
- 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 列表組
- Bootstrap 面板(Panels)
- Bootstrap Wells
- Bootstrap 插件
- Bootstrap 插件概覽
- Bootstrap 過渡效果(Transition)插件
- Bootstrap 模態框(Modal)插件
- Bootstrap 下拉菜單(Dropdown)插件
- Bootstrap 滾動監聽(Scrollspy)插件
- Bootstrap 標簽頁(Tab)插件
- Bootstrap 工具提示(Tooltip)插件
- Bootstrap 彈出框(Popover)插件
- Bootstrap 警告框(Alert)插件
- Bootstrap 按鈕(Button)插件
- Bootstrap 折疊(Collapse)插件
- Bootstrap 輪播(Carousel)插件
- Bootstrap 附加導航(Affix)插件
- Bootstrap 其它
- Bootstrap UI 編輯器
- Bootstrap HTML編碼規范
- Bootstrap CSS編碼規范
- 免責聲明