在web頁(yè)面中,圖片居左,內(nèi)容居右排列,是非常常見(jiàn)的效果,它也就是媒體對(duì)象,它是一種抽象的樣式,可以用來(lái)構(gòu)建不同類型的組件,在bootstrap框架中其對(duì)應(yīng)的版本文件如下:
LESS: media.less
SASS: _media.scss
媒體對(duì)象一般是成組出現(xiàn),一組媒體對(duì)象一般包括以下幾部分:
1、媒體對(duì)象的容器:用來(lái)容納媒體對(duì)象的所有內(nèi)容,容器上需使用類名.media
2、媒體對(duì)象的對(duì)象:一般是圖片,需使用類.media-object
3、媒體對(duì)象的主體:就是媒體對(duì)象的主體內(nèi)容,可以是任何元素,需使用類.media-body
4、媒體對(duì)象的標(biāo)題:用來(lái)描述媒體對(duì)象的一個(gè)標(biāo)題,需使用類.media-heading
此外,bootstrap框架中常使用類.pull-left和.pull-right來(lái)控制媒體對(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ì)來(lái)說(shuō)比較簡(jiǎn)單,只是設(shè)置它們之間的間距;
下面來(lái)看看媒體對(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>這幾天心里頗不寧?kù)o。今晚在院子里坐著乘涼,忽然想起日日走過(guò)的荷塘,在這滿月的夜里,總該另有一 番樣子吧。月亮漸漸地升高了,墻外馬路上孩子們的歡笑……</div></div></div>
媒體對(duì)象的嵌套
bootstrap媒體對(duì)象嵌套,只需將另一個(gè)媒體對(duì)象結(jié)構(gòu)放在媒體對(duì)象的主體(.media-body)中。下面來(lái)看看媒體對(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>月光如流水一般,靜靜地瀉在這一片片葉子和花上。薄薄的青霧浮起在荷塘里。葉子和花仿佛在牛乳中洗過(guò)一樣;又像籠著輕紗的夢(mèng)。雖然是滿月,天上卻有一層淡淡的云,所以不能朗照;但我以為這恰是到了好處――酣眠固不可少,小睡也別有風(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)近近,高高低低都是樹(shù),而楊柳最多。這些樹(shù)將一片荷塘重重圍??;只在小路一旁,漏著幾段空隙,像是特為月光留下的。</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>樹(shù)梢上隱隱約約的是一帶遠(yuǎn)山,只有些大意罷了。樹(shù)縫里也漏著一兩點(diǎn)路燈光,沒(méi)精打采的,是渴睡人的眼。這時(shí)候最熱鬧的,要數(shù)樹(shù)上的蟬聲與水里的蛙聲;但熱鬧是它們的,我什么也沒(méi)有</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>沿著荷塘,是一條曲折的小煤屑路。這是一條幽僻的路;白天也少人走,夜晚更加寂寞。荷塘四周,長(zhǎng)著許多樹(shù),蓊蓊(wěng)郁郁(2)的。路的一旁,是些楊柳,和一些不知道名字的樹(shù)。沒(méi)有月光的晚上,這路上陰森森的,有些怕人。今晚卻很好,雖然月光也還是淡淡的。</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è)世界里。我愛(ài)熱鬧,也愛(ài)寧?kù)o;愛(ài)群居,也愛(ài)獨(dú)處。像今晚上,一個(gè)人在這蒼茫的月下,什么都可以想,什么都可以不想,便覺(jué)是個(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>白天里一定要做的事,一定要說(shuō)的話,現(xiàn)在都可不理。這是獨(dú)處的妙處,我且受用這無(wú)邊的荷香月色好了。曲曲折折的荷塘上面,彌望(3)的是田田(4)的葉子。葉子出水很高,像亭亭的舞女的裙。層層的葉子中間,零星地點(diǎn)綴著些白花,有裊娜地開(kāi)著的,有羞澀地打著朵兒的;正如一粒粒的明珠,又如碧天里的星星,又如剛出浴的美人。微風(fēng)過(guò)處,送來(lái)縷縷清香,仿佛遠(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>忽然想起采蓮的事情來(lái)了。采蓮是江南的舊俗,似乎很早就有,而六朝時(shí)為盛;從詩(shī)歌里可以約略知道。采蓮的是少年的女子,她們是蕩著小船,唱著艷歌(14)去的。采蓮人不用說(shuō)很多,還有看采蓮的人。那是一個(gè)熱鬧的季節(jié),也是一個(gè)風(fēng)流(15)的季節(jié)。梁元帝(16)《采蓮賦》里說(shuō)得好:。</div></div></li></ul>
效果如下:
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注