這篇文章帶大家來了解一下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; }
媒體樣式相對來說比較簡單,只是設定它們之間的間距;
下面來看看媒體物件的運用:
##媒體物件的嵌套
bootstrap媒體物件嵌套,只需將另一個媒體物件結構放在媒體物件的主體(.media-body)中。下面來看看媒體物件巢狀的運用默认媒体对象的嵌套
媒體物件列表
bootstrap框架提供了一個媒體物件清單展示的效果,在寫入結構的時候可以使用標籤ul,並在標籤ul上新增類別名稱.media-list,在標籤li上使用類別.media例如:媒体对象列表
程式設計教學! !
以上是深入了解Bootstrap中的媒體對象的詳細內容。更多資訊請關注PHP中文網其他相關文章!