怎樣創建一個媒體對象 ？
一個媒體對象由以下及部分組成
- 父容器
.media - 媒體部分
.media-left或者.media-right，其內部包含圖像使用<img>同時設置.media-object - 內容部分
.media-body，其內部包含標題<h1>同時設置.media-heading，還可以設置小標題<small>
<div class="media">
<div class="media-left">
<a href="#">
<img src="/images/girls.jpg" class="media-object" alt="Sample Image">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">大標題 <small><i>小標題</i></small></h4>
<p> .......</p>
</div>
</div>
媒體對象
如何讓媒體對象的圖片變成圓角或者圓形樣式 ？
給 <img> 添加一個 .img-circle 或者 .img-round 樣式
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" ......>
</a>
</div>
<div class="media-body">
......
</div>
</div>
圓角
媒體對象中文本和圖像在水平方向上怎樣對齊 ？
如果圖片高度大，文字高度小，則圖片和文字頂部頂部對齊；如果圖片高度小，文字高度大，則
- 默認情況下是頂部對齊
- 在
.media-left或.media-right上使用.media-middle則水平居中對齊 - 在
.media-left或.media-right上使用.media-bottom則底部對齊
<div class="media">
<div class="media-left media-middle">
......
</div>
<div class="media-body">
......
</div>
</div>
對齊方式
媒體對象列表是什么東東？如何創建？
媒體對象列表就是一堆媒體對象，使用列表的好處是可以嵌套
- 最外層使用
<ul>元素設置.media-list創建媒體對象列表 - 第一層的媒體對象使用
<li>設置.media創建，其它層還是使用<div>創建 - 嵌套媒體對象在
.media-body部分創建
<ul class="media-list">
<!-- 第一層嵌套 -->
<li class="media">
<div class="media-left">
......
</div>
<div class="media-body">
......
<!-- 第二層嵌套 -->
<div class="media">
<div class="media-left">
......
</div>
<div class="media-body">
......
<!-- 第三層嵌套 -->
<div class="media">
<div class="media-left">
......
</div>
<div class="media-body">
......
</div>
</div>
</div>
</div>
<!-- 第二層嵌套 -->
<div class="media">
<div class="media-left">
......
</div>
<div class="media-body">
......
</div>
</div>
</div>
</li>
<!-- 第一層嵌套 -->
<li class="media">
<div class="media-left">
......
</div>
<div class="media-body">
......
</div>
</li>
</ul>
04.PNG
