本篇文章带大家了解一下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中文网其他相关文章!