Bootstrap media object

Bootstrap media object
Previous

In Web pages or mobile pages, you can often see the effect of text and text mixing. The picture is arranged on the left (or right) and the content is arranged on the right (or left. This effect is often called a media object. It can be said that it is an abstract style that can be used to build different types of components. This topic describes the Bootstrap media objects in detail.

 

Default Style

Media objects are generally grouped, and a group of media objects usually includes the following parts:

Media image container: media class names are often used to hold all content of a media object.

Objects of media objects: they are objects in media objects, often images.

Media object subject: media-body is often used to represent the subject content of a media object. It can be any element, often the content on the side of an image.

Media object title: media-heading is often used to describe an object title. This part is optional.

In addition to the preceding four parts, "media-left" or "media-right" is often used in the Bootstrap framework to control the object floating mode in media objects.

[Note] in the html structure,.media-rightShould be placed in.media-bodyAfter

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

.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-left {  margin-right: 10px;}.media-right {  margin-left: 10px;}

<Div class = "media"> <a class = "media-left" href = "#">  </a> <div class =" media-body "> 


 
Nesting
In the comment system, nesting of media objects is often required. Media objects in the Bootstrap framework also have this function. You only need to place the structure of another media object in the media Object body "media-body"
<Div class = "media"> <a class = "media-left" href = "#">  </a> <div class =" media-body "> 


 
Alignment Mode
Images or other media types can be aligned at the top, middle, or bottom. Alignment on the top by default. Use. media-middle or. media-bottom to set
.media-middle {    vertical-align: middle;}.media-bottom {    vertical-align: bottom;}
<Div class = "media"> <a class = "media-left" href = "#">  </a> <div class =" media-body "> 


 
Media Object List
The nesting of media objects is only one of the simple application effects of media objects. In many cases, we also encounter a list where each list item is similar to a media object. The Bootstrap framework provides a list display effect. You can use ul when writing a structure, and add the class name "media-list" On ul, while "media" on li"
The list of media objects is not specially processed in the style, but the left margin of the List is set to 0 and the project list symbol is removed.
.media-list {  padding-left: 0;  list-style: none;}
<Ul class = "media-list"> <li class = "media"> <a class = "media-left" href = "#">  </a> <div class =" media-body ">