神武八荒一颗小说,完美世界txt全集下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

Bootstrap中的媒體對(duì)象有什么用-創(chuàng)新互聯(lián)

這篇“Bootstrap中的媒體對(duì)象有什么用”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“Bootstrap中的媒體對(duì)象有什么用”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價(jià)值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內(nèi)容吧。

創(chuàng)新互聯(lián)公司一直秉承“誠信做人，踏實(shí)做事”的原則，不欺瞞客戶，是我們最起碼的底線！以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶多一個(gè)朋友！為您提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)頁設(shè)計(jì)、微信平臺(tái)小程序開發(fā)、成都網(wǎng)站開發(fā)、成都網(wǎng)站制作、成都軟件開發(fā)、手機(jī)APP定制開發(fā)是成都本地專業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計(jì)公司，等你一起來見證！

Bootstrap是什么

Bootstrap是目前最受歡迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷，它還有一個(gè)響應(yīng)好的Grid系統(tǒng)，并且能夠在手機(jī)端通用，而Bootstrap是使用許多可重用的CSS和JavaScript組件，可以幫助實(shí)現(xiàn)需要的幾乎任何類型的網(wǎng)站的功能，此外，所有這些組件都是響應(yīng)式的。

在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)用：

默認(rèn)媒體對(duì)象
    
        
            
        
        
            荷塘月色
            這幾天心里頗不寧靜。今晚在院子里坐著乘涼，忽然想起日日走過的荷塘，在這滿月的夜里，總該另有一 番樣子吧。月亮漸漸地升高了，墻外馬路上孩子們的歡笑……

Bootstrap中的媒體對(duì)象有什么用

媒體對(duì)象的嵌套

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

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

效果如下：

Bootstrap中的媒體對(duì)象有什么用

媒體對(duì)象列表

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

例如：

媒體對(duì)象列表
    
        
            
                
            
            
                媒體對(duì)象列表111
                沿著荷塘，是一條曲折的小煤屑路。這是一條幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四周，長著許多樹，蓊蓊（wěng）郁郁（2）的。路的一旁，是些楊柳，和一些不知道名字的樹。沒有月光的晚上，這路上陰森森的，有些怕人。今晚卻很好，雖然月光也還是淡淡的。

新聞中心

Bootstrap是什么

默認(rèn)媒體對(duì)象

默認(rèn)媒體對(duì)象的嵌套

媒體對(duì)象列表

其他資訊