知識(shí)點(diǎn)
類 | 描述
- | :-: | -:
.media | 該 class 允許將媒體對(duì)象里的多媒體（圖像刻肄、視頻畸肆、音頻）浮動(dòng)到內(nèi)容區(qū)塊的左邊或者右邊泡徙。
.media-list | 如果你需要一個(gè)列表径筏，各項(xiàng)內(nèi)容是無序列表的一部分该肴，可以使用該 class情竹。可用于評(píng)論列表與文章列表匀哄。
.media-left | {display: table-cell;vertical-align: top;padding-right: 10px;}
.media-body | {display: table-cell;vertical-align: top;width: 10000px;} .media .media-body{overflow:hidden;zoom:1;}
.media-right | {display: table-cell;vertical-align: top;padding-left: 10px;}
在 html 結(jié)構(gòu)中秦效， .media-right 應(yīng)當(dāng)放在 .media-body 的后面。
對(duì)齊
圖像默認(rèn)為頂部對(duì)齊涎嚼，可以設(shè)置圖片或其他媒體類型可以頂部阱州、中部或底部對(duì)齊。
.media-middle
.media-bottom
媒體對(duì)象列表
多媒體列表铸抑，類似博客留言回復(fù)贡耽。
多媒體列表
實(shí)踐
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Resource-type" content="Document"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>組件-多媒體對(duì)象</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style>
<!--
.line{border-top:1px solid #afd9ee;margin:20px 0;}
-->
</style>
</head>
<body>
<div class="container">
<div class="media">
<div class="media-left">
<a href="#">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">媒體頭部</h4>
<p>默認(rèn)樣式的媒體對(duì)象組件允許在一個(gè)內(nèi)容塊的左邊或右邊展示一個(gè)多媒體內(nèi)容（圖像、視頻鹊汛、音頻）蒲赂。</p>
<p>.pull-left 和 .pull-right 這兩個(gè)類以前也曾經(jīng)被用在了媒體組件上，但是刁憋，從 v3.3.0 版本開始滥嘴，他們就不再被建議使用了。.media-left 和 .media-right 替代了他們至耻，不同之處是若皱，在 html 結(jié)構(gòu)中， .media-right 應(yīng)當(dāng)放在 .media-body 的后面尘颓。</p>
<p>圖片或其他媒體類型可以頂部走触、中部或底部對(duì)齊。默認(rèn)是頂部對(duì)齊疤苹。</p>
<p>用一點(diǎn)點(diǎn)額外的標(biāo)記互广，就能在列表內(nèi)使用媒體對(duì)象組件（對(duì)評(píng)論或文章列表很有用）。</p>
</div>
</div>
<div class="line"></div>
<!--對(duì)齊-->
<div class="media">
<div class="media-left media-middle">
<a href="#">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">media-middle</h4>
<p>默認(rèn)樣式的媒體對(duì)象組件允許在一個(gè)內(nèi)容塊的左邊或右邊展示一個(gè)多媒體內(nèi)容（圖像、視頻惫皱、音頻）像樊。</p>
<p>.pull-left 和 .pull-right 這兩個(gè)類以前也曾經(jīng)被用在了媒體組件上，但是旅敷，從 v3.3.0 版本開始生棍，他們就不再被建議使用了。.media-left 和 .media-right 替代了他們媳谁，不同之處是涂滴，在 html 結(jié)構(gòu)中， .media-right 應(yīng)當(dāng)放在 .media-body 的后面韩脑。</p>
<p>圖片或其他媒體類型可以頂部氢妈、中部或底部對(duì)齊。默認(rèn)是頂部對(duì)齊段多。</p>
<p>用一點(diǎn)點(diǎn)額外的標(biāo)記，就能在列表內(nèi)使用媒體對(duì)象組件（對(duì)評(píng)論或文章列表很有用）壮吩。</p>
</div>
</div>
<div class="line"></div>
<!--底部對(duì)齊-->
<div class="media">
<div class="media-left media-bottom">
<a href="#">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">media-bottom</h4>
<p>默認(rèn)樣式的媒體對(duì)象組件允許在一個(gè)內(nèi)容塊的左邊或右邊展示一個(gè)多媒體內(nèi)容（圖像进苍、視頻、音頻）鸭叙。</p>
<p>.pull-left 和 .pull-right 這兩個(gè)類以前也曾經(jīng)被用在了媒體組件上觉啊，但是，從 v3.3.0 版本開始沈贝，他們就不再被建議使用了杠人。.media-left 和 .media-right 替代了他們，不同之處是宋下，在 html 結(jié)構(gòu)中嗡善， .media-right 應(yīng)當(dāng)放在 .media-body 的后面。</p>
<p>圖片或其他媒體類型可以頂部学歧、中部或底部對(duì)齊罩引。默認(rèn)是頂部對(duì)齊。</p>
<p>用一點(diǎn)點(diǎn)額外的標(biāo)記枝笨，就能在列表內(nèi)使用媒體對(duì)象組件（對(duì)評(píng)論或文章列表很有用）袁铐。</p>
</div>
</div>
<div class="line"></div>
<!--多媒體列表，類似博客留言回復(fù)-->
<ul class="media-list">
<li class="media">
<!--第一層-->
<div class="media-left">
<a href="#">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">media-bottom</h4>
<p>默認(rèn)樣式的媒體對(duì)象組件允許在一個(gè)內(nèi)容塊的左邊或右邊展示一個(gè)多媒體內(nèi)容（圖像横浑、視頻剔桨、音頻）。</p>
<!--第二層 1-->
<div class="media">
<div class="media-left">
<a href="#">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">media-bottom</h4>
<p>.pull-left 和 .pull-right 這兩個(gè)類以前也曾經(jīng)被用在了媒體組件上徙融，但是洒缀，從 v3.3.0 版本開始，他們就不再被建議使用了张咳。.media-left 和 .media-right 替代了他們帝洪，不同之處是似舵，在 html 結(jié)構(gòu)中， .media-right 應(yīng)當(dāng)放在 .media-body 的后面葱峡。</p>
<div class="media">
<div class="media-left">
<a href="#">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">media-bottom</h4>
<p>圖片或其他媒體類型可以頂部砚哗、中部或底部對(duì)齊。默認(rèn)是頂部對(duì)齊砰奕。</p>
</div>
</div>
</div>
</div>
<!--第二層 2-->
<div class="media">
<div class="media-left">
<a href="#">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">media-bottom</h4>
<p>.pull-left 和 .pull-right 這兩個(gè)類以前也曾經(jīng)被用在了媒體組件上蛛芥，但是，從 v3.3.0 版本開始军援，他們就不再被建議使用了仅淑。.media-left 和 .media-right 替代了他們，不同之處是胸哥，在 html 結(jié)構(gòu)中涯竟， .media-right 應(yīng)當(dāng)放在 .media-body 的后面。</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
