Media objects in the bootstrap

Media Objects

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

650) this.width=650; "class=" Alignnone size-medium wp-image-236 img-responsive "src=" http://www.seashen.cn/ Wp-content/uploads/2015/11/mmm-300x70.png "alt=" MMM "width=" "height=" "style=" vertical-align:middle; Border-style:none;height:auto; "/>

We often call this effect 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 styling style that is described at the outset. Then in the bootstrap framework to deliberately 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: corresponds to bootstrap.css file line No. 4792 ~ line No. 4819

Media Object--Default Media Object

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

Media-to-image container: Often used as a "media" class name to hold all the content of a media object

Object of the media to the image: often used "Media-object", is the object in the media object, is often the picture

The body of the media object: often used "media-body", that is, the media on the image of the main content, can be any element, often is the picture side content

Title of the media object: often used "media-heading", which is used to describe a caption of an object, this section is optional

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.

In the specific usage, the following is shown:

<div class= "Media" >    <a class= "Pull-left"  href= "#" >             </a>     <div class= "Media-body" >        
The results are as follows:
650) this.width=650; "class=" Alignnone size-medium wp-image-237 img-responsive "src=" http://www.seashen.cn/ Wp-content/uploads/2015/11/dddda-300x84.png "alt=" Dddda "width=" "height=" "style=" vertical-align:middle; Border-style:none;height:auto; "/>
Principle Analysis:
Media object styles are relatively simple, just set 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;}
Media Object--nesting of media objects
In the comment system, you can often see:
From the outside, there are three media objects, just one nested inside the other. The media object in the bootstrap framework also has 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" >         Media Object--List of media objects
The nesting of media objects is only one of the simple application effects in media objects, and in many cases we will encounter a list of items that are about the same size as the media object, with the same comment system:
650) this.width=650; "class=" Alignnone wp-image-238 img-responsive "src=" http://www.seashen.cn/wp-content/uploads/ 2015/11/sssss213-300x171.png "alt=" sssss213 "width=" 682 "height=" 389 "style=" Vertical-align:middle;border-style: None;height:auto; "/>
How to use:
For a list of media objects effects, the bootstrap framework provides a list of effects that can be used when writing structures, using UL, and adding the class name "Media-list" to the UL, while using "media" on Li, the sample code is as follows:
<ul class= "Media-list" >    <li class= "Media" >         <a class= "Pull-left"  href= "#" >                      <div class= "Media-body" >             
Principle Analysis:
The list of media objects does not have too much special handling on the style, just set the left spacing of the list to 0 and remove the item list symbol:
/*bootstrap.css file line No. 4816 ~ No. 4819 line */.media-list {padding-left:0; List-style:none;}

Media objects in the bootstrap