BOOTSTRAP_ Media Objects

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

? Media-to-image container: Often usedas 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.

<Divclass= "Media">  <aclass= "Pull-left"href="#">    <imgclass= "Media-object"src=""style= "height:170px;width:300px">  </a>  <Divclass= "Media-body">    <h4class= "Media-heading">Series: 10 days proficient in CSS3</h4>    <Div>Comprehensive and profound detailed CSS3 module knowledge, classic case analysis, code synchronization debugging, let the Web page wear gorgeous equipment!</Div>  </Div></Div>

Ii. Nesting of Media objects

<Divclass= "Media">  <aclass= "Pull-left"href="#">    <imgclass= "Media-object"style= "height:50px;width:50px">  </a>  <Divclass= "Media-body">    <h4class= "Media-heading">I'm the logo.</h4>    <Div>I'm writing the media Object test case in the bootstrap box</Div>    <Divclass= "Media">      <aclass= "Pull-left"href="#">        <imgclass= "Media-object"style= "height:50px;width:50px">      </a>      <Divclass= "Media-body">        <h4class= "Media-heading">Nesting</h4>        <Div>Nesting</Div>        <Divclass= "Media">          <aclass= "Pull-left"href="#">            <imgclass= "Media-object"style= "height:50px;width:50px">          </a>          <Divclass= "Media-body">            <h4class= "Media-heading">W3cplus</h4>            <Div>There are many tutorials on W3cplus station ....</Div>          </Div>        </Div>      </Div>    </Div>  </Div></Div>

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

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 and using "media" on Li.

<ulclass= "Media-list">  <Liclass= "Media">    <aclass= "Pull-left"href="#">      <imgclass= "Media-object"style= "height:50px;width:50px">    </a>    <Divclass= "Media-body">      <h4class= "Media-heading">LOGO</h4>      <Div>The media Object test case in the bootstrap box</Div>    </Div>  </Li>  <Liclass= "Media">    <aclass= "Pull-left"href="#">      <imgclass= "Media-object"style= "height:50px;width:50px">    </a>    <Divclass= "Media-body">      <h4class= "Media-heading">List</h4>      <Div>List</Div>    </Div>  </Li>  <Liclass= "Media">    <aclass= "Pull-left"href="#">      <imgclass= "Media-object"style= "height:50px;width:50px">    </a>    <Divclass= "Media-body">      <h4class= "Media-heading">W3cplus</h4>      <Div>There are many tutorials on W3cplus station ....</Div>    </Div>  </Li></ul>

BOOTSTRAP_ Media Objects