這篇文章主要介紹“Bootstrap媒體對象如何實現(xiàn)”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強(qiáng)，希望這篇“Bootstrap媒體對象如何實現(xiàn)”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供寬甸網(wǎng)站建設(shè)、寬甸做網(wǎng)站、寬甸網(wǎng)站設(shè)計、寬甸網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、寬甸企業(yè)網(wǎng)站模板建站服務(wù)，十多年寬甸做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

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

LESS: media.less

SASS: _media.scss

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

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

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

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

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

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

下面是它們的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;
}

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

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

默認(rèn)媒體對象





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