The realization _javascript skill of Bootstrap media Object

In the Web page, the picture is left, the content is in the right, is a very common effect, it is the media object, it is an abstract style, can be used to build different types of components, in the bootstrap framework of the corresponding version of the file is as follows:

LESS:media.less

SASS: _media.scss

Media objects typically appear in groups, and a group of media objects generally includes the following sections:

1, Media Object container: To accommodate all the content of the media object, the container needs to use the class name. Media

2, Media Object object: Generally is the picture, needs to use the class. Media-object

3, the media object's main body: is the media object's main content, may be any element, needs to use the class. Media-body

4, the Media Object title: Used to describe the media object of a title, you need to use the class. Media-heading

In addition, class. Pull-left and. Pull-right are often used in the bootstrap framework to control how objects float in media objects

The following are their CSS source code:

. 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
}

Media styles are relatively simple, just setting the spacing between them;

Let's look at the use of Media objects:

Nesting of Media objects

Bootstrap media Object nesting, simply place the other media object structure in the body (. media-body) of the media object. Let's look at the use of media object nesting

The effect is as follows:

Media Object List

Bootstrap Framework provides a list of media objects to display the effect of the writing structure can use the label UL, and in the label UL Add class name. media-list, use class on tag li. Media

For example:

The effect is as follows: