Bootstrap媒體對(duì)象的實(shí)現(xiàn)

更新時(shí)間：2016年05月01日 12:19:58 作者：洛水三千

在web頁面中，圖片居左，內(nèi)容居右排列，是非常常見的效果，它也就是媒體對(duì)象，它是一種抽象的樣式，可以用來構(gòu)建不同類型的組件。本文給大家介紹Bootstrap媒體對(duì)象的實(shí)現(xiàn)，感興趣的朋友一起學(xué)習(xí)吧

在web頁面中，圖片居左，內(nèi)容居右排列，是非常常見的效果，它也就是媒體對(duì)象，它是一種抽象的樣式，可以用來構(gòu)建不同類型的組件，在bootstrap框架中其對(duì)應(yīng)的版本文件如下：

LESS: media.less

SASS: _media.scss

媒體對(duì)象一般是成組出現(xiàn)，一組媒體對(duì)象一般包括以下幾部分：

1、媒體對(duì)象的容器：用來容納媒體對(duì)象的所有內(nèi)容，容器上需使用類名.media

2、媒體對(duì)象的對(duì)象：一般是圖片，需使用類.media-object

3、媒體對(duì)象的主體：就是媒體對(duì)象的主體內(nèi)容，可以是任何元素，需使用類.media-body

4、媒體對(duì)象的標(biāo)題：用來描述媒體對(duì)象的一個(gè)標(biāo)題，需使用類.media-heading

此外，bootstrap框架中常使用類.pull-left和.pull-right來控制媒體對(duì)象中的對(duì)象浮動(dòng)方式

下面是它們的css源碼：

.media,
.media-body {
overflow: hidden;
zoom: 1;
}
.media,
.media .media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
.media-object {
display: block;
}
.media-heading {
margin: 0 0 5px;
}
.media > .pull-left {
margin-right: 10px;
}
.media > .pull-right {
margin-left: 10px;
}

媒體樣式相對(duì)來說比較簡單，只是設(shè)置它們之間的間距；

下面來看看媒體對(duì)象的運(yùn)用：

<h1>默認(rèn)媒體對(duì)象</h1>
<div class="media">
<a href="#" class="pull-right">
<img class="media-object" src="img/1.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">荷塘月色</h4>
<div>這幾天心里頗不寧靜。今晚在院子里坐著乘涼，忽然想起日日走過的荷塘，在這滿月的夜里，總該另有一 番樣子吧。月亮漸漸地升高了，墻外馬路上孩子們的歡笑……</div>
</div>
</div>

媒體對(duì)象的嵌套

bootstrap媒體對(duì)象嵌套，只需將另一個(gè)媒體對(duì)象結(jié)構(gòu)放在媒體對(duì)象的主體（.media-body）中。下面來看看媒體對(duì)象嵌套的運(yùn)用

<h1>默認(rèn)媒體對(duì)象的嵌套</h1>
<div class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/3.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">荷塘月色</h4>
<div>月光如流水一般，靜靜地瀉在這一片片葉子和花上。薄薄的青霧浮起在荷塘里。葉子和花仿佛在牛乳中洗過一樣；又像籠著輕紗的夢。雖然是滿月，天上卻有一層淡淡的云，所以不能朗照；但我以為這恰是到了好處——酣眠固不可少，小睡也別有風(fēng)味的。</div>
<div class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/4.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">這里是嵌套內(nèi)容1111</h4>
<div>荷塘的四面，遠(yuǎn)遠(yuǎn)近近，高高低低都是樹，而楊柳最多。這些樹將一片荷塘重重圍?。恢辉谛÷芬慌?，漏著幾段空隙，像是特為月光留下的。</div>
<div class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/5.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">這里是嵌套內(nèi)容2222</h4>
<div>樹梢上隱隱約約的是一帶遠(yuǎn)山，只有些大意罷了。樹縫里也漏著一兩點(diǎn)路燈光，沒精打采的，是渴睡人的眼。這時(shí)候最熱鬧的，要數(shù)樹上的蟬聲與水里的蛙聲；但熱鬧是它們的，我什么也沒有</div>
</div>
</div>
</div>
</div>
</div>
</div>

效果如下：

媒體對(duì)象列表

bootstrap框架提供了一個(gè)媒體對(duì)象列表展示的效果，在寫結(jié)構(gòu)的時(shí)候可以使用標(biāo)簽ul，并在標(biāo)簽ul上添加類名.media-list,在標(biāo)簽li上使用類.media

例如：

<h1>媒體對(duì)象列表</h1>
<ul class="media-list">
<li class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/1.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒體對(duì)象列表111</h4>
<div>沿著荷塘，是一條曲折的小煤屑路。這是一條幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四周，長著許多樹，蓊蓊（wěng）郁郁（2）的。路的一旁，是些楊柳，和一些不知道名字的樹。沒有月光的晚上，這路上陰森森的，有些怕人。今晚卻很好，雖然月光也還是淡淡的。</div>
</div>
</li>
<li class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/2.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒體對(duì)象列表222</h4>
<div>路上只我一個(gè)人，背著手踱（duó）著。這一片天地好像是我的；我也像超出了平常的自己，到了另一個(gè)世界里。我愛熱鬧，也愛寧靜；愛群居，也愛獨(dú)處。像今晚上，一個(gè)人在這蒼茫的月下，什么都可以想，什么都可以不想，便覺是個(gè)自由的人。</div>
</div>
</li>
<li class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/3.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒體對(duì)象列表333</h4>
<div>白天里一定要做的事，一定要說的話，現(xiàn)在都可不理。這是獨(dú)處的妙處，我且受用這無邊的荷香月色好了。曲曲折折的荷塘上面，彌望（3）的是田田（4）的葉子。葉子出水很高，像亭亭的舞女的裙。層層的葉子中間，零星地點(diǎn)綴著些白花，有裊娜地開著的，有羞澀地打著朵兒的；正如一粒粒的明珠，又如碧天里的星星，又如剛出浴的美人。微風(fēng)過處，送來縷縷清香，仿佛遠(yuǎn)處高樓上渺茫的歌聲似的。</div>
</div>
</li>
<li class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/4.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒體對(duì)象列表444</h4>
<div>忽然想起采蓮的事情來了。采蓮是江南的舊俗，似乎很早就有，而六朝時(shí)為盛；從詩歌里可以約略知道。采蓮的是少年的女子，她們是蕩著小船，唱著艷歌（14）去的。采蓮人不用說很多，還有看采蓮的人。那是一個(gè)熱鬧的季節(jié)，也是一個(gè)風(fēng)流（15）的季節(jié)。梁元帝（16）《采蓮賦》里說得好：。</div>
</div>
</li>
</ul>

效果如下：