Bootstrap 媒體物件
媒體物件
Bootstrap 提供了一種簡單的方法，可以將媒體物件（如圖片或影片）對齊到某些內容的左側或右側。這可以用於顯示部落格評論、推文等
John Doe 釋出於 2016 年 2 月 19 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
Jane Doe 釋出於 2016 年 2 月 20 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
Alicia Keyes 釋出於 2016 年 2 月 25 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla vel metus scelerisque ante sollicitudin commodo。
基本媒體物件
John Doe
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
John Doe
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
示例
<!-- 左對齊 -->
<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- 右對齊 -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="media-right">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
</div>
自己動手試一試 »
示例說明
使用帶有 .media 類的 <div> 元素建立媒體物件的容器。
使用 .media-left 類將媒體物件（圖片）左對齊，或使用 .media-right 類將其右對齊。
應出現在圖片旁邊的文字，放置在帶有 class="media-body" 的容器中。
此外，您可以使用 .media-heading 用於標題。
頂部、中部或底部對齊
媒體物件也可以使用 media-top、media-middle 或 media-bottom 類進行頂部、中部或底部對齊
媒體頂部
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
媒體中部
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
媒體底部
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
示例
<!-- 媒體頂部 -->
<div class="media">
<div class="media-left media-top">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">媒體頂部</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- 媒體中部 -->
<div class="media">
<div class="media-left media-middle">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">媒體中部</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- 媒體底部 -->
<div class="media">
<div class="media-left media-bottom">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">媒體底部</h4>
<p>Lorem ipsum...</p>
</div>
</div>
自己動手試一試 »
巢狀媒體物件
媒體物件也可以巢狀（媒體物件內部包含媒體物件）
示例
John Doe 釋出於 2016 年 2 月 19 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
John Doe 釋出於 2016 年 2 月 20 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
John Doe 釋出於 2016 年 2 月 21 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
巢狀的另一個示例
示例
John Doe 釋出於 2016 年 2 月 19 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
John Doe 釋出於 2016 年 2 月 20 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
John Doe 釋出於 2016 年 2 月 21 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
Jane Doe 釋出於 2016 年 2 月 20 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
Jane Doe 釋出於 2016 年 2 月 19 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
