Bootstrap 基礎(chǔ)教程
Bootstrap 環(huán)境安裝
Bootstrap 教程
Bootstrap CSS
Bootstrap CSS 概覽
Bootstrap 按鈕
Bootstrap 表單
Bootstrap 表格
Bootstrap 代碼
Bootstrap 輔助類(lèi)
Bootstrap 排版
Bootstrap 圖片
Bootstrap 網(wǎng)格系統(tǒng)
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：堆疊的水平
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備
Bootstrap 響應(yīng)式實(shí)用工具
Bootstrap 布局組件
Bootstrap Well
Bootstrap 按鈕下拉菜單
Bootstrap 按鈕組
Bootstrap 標(biāo)簽
Bootstrap 超大屏幕（Jumbotron）
Bootstrap 導(dǎo)航欄
Bootstrap 導(dǎo)航元素
Bootstrap 多媒體對(duì)象（Media Object）
Bootstrap 分頁(yè)
Bootstrap 徽章（Badges）
Bootstrap 進(jìn)度條
Bootstrap 警告（Alerts）
Bootstrap 列表組
Bootstrap 面板（Panels）
Bootstrap 面包屑導(dǎo)航（Breadcrumbs）
Bootstrap 輸入框組
Bootstrap 縮略圖
Bootstrap 下拉菜單（Dropdowns）
Bootstrap 頁(yè)面標(biāo)題（Page Header）
Bootstrap 字體圖標(biāo)(Glyphicons)
Bootstrap 插件
Bootstrap 按鈕（Button）
Bootstrap 標(biāo)簽頁(yè)（Tab）
Bootstrap 插件概覽
Bootstrap 彈出框（Popover）
Bootstrap 附加導(dǎo)航（Affix）
Bootstrap 滾動(dòng)監(jiān)聽(tīng)（Scrollspy）
Bootstrap 過(guò)渡效果（Transition）
Bootstrap 警告框（Alert）
Bootstrap 輪播（Carousel）
Bootstrap 模態(tài)框（Modal）插件
Bootstrap 提示工具（Tooltip）
Bootstrap 下拉菜單（Dropdown）
Bootstrap 折疊（Collapse）
Bootstrap 附錄
Bootstrap CSS編碼規(guī)范
Bootstrap HTML編碼規(guī)范
Bootstrap UI 編輯器
?
This document uses PHP Chinese website manual Release
characters
Bootstrap 多媒體對(duì)象（Media Object）
本章我們將講解 Bootstrap 中的多媒體對(duì)象（Media Object）。這些抽象的對(duì)象樣式用于創(chuàng)建各種類(lèi)型的組件（比如：博客評(píng)論），我們可以在組件中使用圖文混排，圖像可以左對(duì)齊或者右對(duì)齊。媒體對(duì)象可以用更少的代碼來(lái)實(shí)現(xiàn)媒體對(duì)象與文字的混排。
媒體對(duì)象輕量標(biāo)記、易于擴(kuò)展的特性是通過(guò)向簡(jiǎn)單的標(biāo)記應(yīng)用 class 來(lái)實(shí)現(xiàn)的。你可以在 HTML 標(biāo)簽中添加以下兩種形式來(lái)設(shè)置媒體對(duì)象：
- .media：該 class 允許將媒體對(duì)象里的多媒體（圖像、視頻、音頻）浮動(dòng)到內(nèi)容區(qū)塊的左邊或者右邊。
- .media-list：如果你需要一個(gè)列表，各項(xiàng)內(nèi)容是無(wú)序列表的一部分，可以使用該 class?？捎糜谠u(píng)論列表與文章列表。
讓我們來(lái)看看下面這個(gè)有關(guān)默認(rèn)的媒體對(duì)象 .media 的實(shí)例：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 默認(rèn)的媒體對(duì)象</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="媒體對(duì)象">
</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="/wp-content/uploads/2014/06/64.jpg"
alt="媒體對(duì)象">
</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="/wp-content/uploads/2014/06/64.jpg"
alt="媒體對(duì)象">
</a>
<div class="media-body">
<h4 class="media-heading">媒體標(biāo)題</h4>
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
</div>
</div>
</div>
</div>
</body>
</html>
結(jié)果如下所示：
讓我們來(lái)看看下面這個(gè)有關(guān)媒體對(duì)象列表 .media-list 的實(shí)例：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 媒體對(duì)象列表</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">媒體標(biāo)題</h4>
<p>這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。</p>
<!-- 嵌套的媒體對(duì)象 -->
<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>
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
<!-- 嵌套的媒體對(duì)象 -->
<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>
</div>
</div>
</div>
<!-- 嵌套的媒體對(duì)象 -->
<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>
</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">媒體標(biāo)題</h4>
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
</div>
</li>
</ul>
</body>
</html>
結(jié)果如下所示：
