這篇文章帶大家來了解一下Bootstrap中的媒體物件。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
相關推薦：《bootstrap教學》
在web頁面中，圖片居左，內容居右排列，是非常常見的效果，它也就是媒體對象，它是一種抽象的樣式，可以用來建構不同類型的元件，在bootstrap框架中其對應的版本檔案如下：
LESS: media.less
SASS: _media.scss
媒體物件一般是成組出現，一組媒體物件一般包含以下幾個部分：
1、媒體物件的容器：用來容納媒體物件的所有內容，容器上需使用類別名稱.media
2、媒體物件的物件：一般是圖片，需使用類別.media-object
3、媒體物件的主體：就是媒體物件的主體內容，可以是任何元素，需使用類別.media-body
4、媒體物件的標題：用來描述媒體物件的一個標題，需使用類別.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;
}媒體樣式相對來說比較簡單，只是設定它們之間的間距；
下面來看看媒體物件的運用：
<h1>默认媒体对象</h1> <div> <a> <img alt="深入了解Bootstrap中的媒體對象" > </a> <div> <h4>荷塘月色</h4> <div>这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的夜里，总该另有一 番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑……</div> </div> </div>
##媒體物件的嵌套
bootstrap媒體物件嵌套，只需將另一個媒體物件結構放在媒體物件的主體（.media-body）中。下面來看看媒體物件巢狀的運用<h1>默认媒体对象的嵌套</h1> <div> <a> <img alt="深入了解Bootstrap中的媒體對象" > </a> <div> <h4>荷塘月色</h4> <div>月光如流水一般，静静地泻在这一片片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。</div> <div> <a> <img alt="深入了解Bootstrap中的媒體對象" > </a> <div> <h4>这里是嵌套内容1111</h4> <div>荷塘的四面，远远近近，高高低低都是树，而杨柳最多。这些树将一片荷塘重重围住；只在小路一旁，漏着几段空隙，像是特为月光留下的。</div> <div> <a> <img alt="深入了解Bootstrap中的媒體對象" > </a> <div> <h4>这里是嵌套内容2222</h4> <div>树梢上隐隐约约的是一带远山，只有些大意罢了。树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。这时候最热闹的，要数树上的蝉声与水里的蛙声；但热闹是它们的，我什么也没有</div> </div> </div> </div> </div> </div> </div>
媒體物件列表
bootstrap框架提供了一個媒體物件清單展示的效果，在寫入結構的時候可以使用標籤ul，並在標籤ul上新增類別名稱.media-list,在標籤li上使用類別.media例如：<h1>媒体对象列表</h1>
程式設計教學！ ！
以上是深入了解Bootstrap中的媒體對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！
