Bootstrap the media Objects _javascript skills you must learn every day

In the Web page or mobile page production, often see this effect, left (or right), the content of the right (or left) arranged, as shown in the following figure:

We often refer to this effect as a media object. It can be said that he is a style of drawing, can be used to build different types of components. These components all have the style style that the opening says. Then in the bootstrap framework deliberately to extract some parts to do a component introduction. Its corresponding version file:

☑less version: the corresponding source file is media.less

☑sass version: the corresponding source file is _media.scss

☑ compiled version: corresponding bootstrap.css file No. 4792 line ~ No. 4819 Line

1, Media Object – Default Media Object

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

☑ Media-like containers: often represented by the "Media" class name, used to hold all the content of a media object

☑ Media objects: often using "Media-object", is the object in the media object, often the picture

☑ Media object's main body: often use "media-body" means, is the media to image in the main content, can be any element, often is the picture side content

☑ Media Object title: Often used "media-heading", is used to describe the object of a title, this part of the optional

As shown in the following illustration:

In addition to the above four sections, "Pull-left" or "pull-right" are often used in the bootstrap framework to control how objects float in media objects.

The following are shown in the specific use:

<div class= "Media" >
 <a class= "Pull-left" href= "#" > 
 </a>
 <div class=" Media-body ">
  
 
 

The operation effect is as follows:

Principle Analysis:

Media object styles are relatively simple, just setting the spacing between them, as follows:

/bootstrap.css file line No. 4792 ~4815 Line/

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

2. Media objects-nesting of media objects

In a comment system, you can often see the effect of the following diagram:

Looking from the outside, there are three media objects, just one nested inside the other. Media objects in the bootstrap framework also have the ability to place another media object structure in the body of the media object "Media-body" as follows:

<div class= "Media" >
 <a class= "Pull-left" href= "#" > 
 </a>
 <div class=" Media-body ">
  
 
 

When you make sure that your structure is not nested incorrectly, you can see the effect of the following image directly:

3. Media Objects – List of media objects

The nesting of media objects is only one of the simple effects of a media object, and in many cases we run into a list where each list item is about the same as the media object, and the same is true with the comment system:

How to use:

For the above image of the Media Object list effect, the bootstrap framework provides a list of the effects, in the writing structure can be used UL, and in the UL Add class name "Media-list", and on the Li on the use of "media", sample code as follows:

<ul class= "Media-list" >
 <li class= "Media" >
  <a class= "Pull-left" href= "#" >
   
  </a>
  <div class=" Media-body "> 
 
 

The operation effect is as follows:

Principle Analysis:

The list of media objects does not do too much special processing on the style, except that the left margin of the list is set to 0 and the bulleted list symbol is removed:

/bootstrap.css file line No. 4816 ~ No. 4819 Line

. media-list {
 padding-left:0;
 List-style:none;
}

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is the entire content of this article, to help you learn bootstrap media objects, I hope to help you learn.