這是一個抽象的樣式,用以構(gòu)建不同類型的組件,這些組件都具有在文本內(nèi)容的左或右側(cè)對齊的圖片(就像博客評論或 Twitter 消息等)。
默認樣式的媒體對象組件允許在一個內(nèi)容塊的左邊或右邊展示一個多媒體內(nèi)容(圖像、視頻、音頻)。
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
.pull-left 和 .pull-right 這兩個類以前也曾經(jīng)被用在了媒體組件上,但是,從 v3.3.0 版本開始,他們就不再被建議使用了。.media-left 和 .media-right 替代了他們,不同之處是,在 html 結(jié)構(gòu)中, .media-right 應當放在 .media-body 的后面。
圖片或其他媒體類型可以頂部、中部或底部對齊。默認是頂部對齊。
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
用一點點額外的標記,就能在列表內(nèi)使用媒體對象組件(對評論或文章列表很有用)。
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>