標籤：
Bootstrap 多媒體對象（Media Object）本章我們將講解 Bootstrap 中的多媒體對象（Media Object）。這些抽象的對象樣式用於建立各種類型的組件（比如：部落格評論），我們可以在組件中使用圖文混排，映像可以靠左對齊或者靠右對齊。媒體對象可以用更少的代碼來實現媒體對象與文字的混排。
媒體對象輕量標記、易於擴充的特性是通過向簡單的標記應用 class 來實現的。你可以在 HTML 標籤中添加以下兩種形式來設定媒體對象：
讓我們來看看下面這個有關預設的媒體對象 .media 的執行個體：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap曆練執行個體：預設的媒體對象</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div style="padding:20px">
<div class="media">
<a href="#" class="pull-left"><img src="Images/logo.png" alt="媒體對象" /></a>
<div class="media-body">
<h4 class="media-heading">媒體標題</h4>
<p>這是一些樣本文本。這是一些樣本文本。這是一些樣本文本。這是一些樣本文本。這是一些樣本文本。這是一些樣本文本。這是一些樣本文本。這是一些樣本文本。</p>
<div class="media">
<a href="#" class="pull-left"><img src="Images/logo.png" alt="媒體對象" /></a>
<div class="media-body">
<h4 class="media-heading">媒體標題</h4>
<p>這是一些樣本文本。這是一些樣本文本。這是一些樣本文本。這是一些樣本文本。這是一些樣本文本。這是一些樣本文本。這是一些樣本文本。這是一些樣本文本。</p>
<div class="media">
<a href="#" class="pull-left"><img src="Images/logo.png" alt="媒體對象" /></a>
<div class="media-body">
<h4 class="media-heading">媒體標題</h4>
<p>這是一些樣本文本。這是一些樣本文本。這是一些樣本文本。這是一些樣本文本。這是一些樣本文本。這是一些樣本文本。這是一些樣本文本。這是一些樣本文本。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap曆練執行個體：預設的媒體對象
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
