首页 > PHP资讯 > HTML5培训技术 > Bootstrap媒体对象的实现_javascript技巧

Bootstrap媒体对象的实现_javascript技巧

HTML5培训技术
在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;}

媒体样式相对来说比较简单,只是设置它们之间的间距;

下面来看看媒体对象的运用:

默认媒体对象

媒体对象列表444

忽然想起采莲的事情来了。采莲是江南的旧俗,似乎很早就有,而六朝时为盛;从诗歌里可以约略知道。采莲的是少年的女子,她们是荡着小船,唱着艳歌(14)去的。采莲人不用说很多,还有看采莲的人。那是一个热闹的季节,也是一个风流(15)的季节。梁元帝(16)《采莲赋》里说得好:。

效果如下:

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持38不支持0