详解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媒体对象-洛水三千的详细内容...