bootstrap< Basic 27 > Multimedia Objects (Media Object)

Original:bootstrap< Basic 27 > Multimedia Objects (Media Object)

Media object in Bootstrap. These abstract object styles are used to create various types of components (such as blog comments), and we can use text-to-image blending in components, which can be left-aligned or right-aligned. Media objects can be mixed with less code for media objects and text.

The lightweight, easy-to-extend nature of a media object is achieved by applying a class to a simple tag. You can add the following two forms to the HTML tag to set the media object:

• . Media: This class allows multimedia (images, video, audio) in media objects to be floated to the left or right of the content block.
• . Media-list: If you need a list, the items are part of the unordered list, and you can use that class. Available for comment lists and articles lists.

Let's take a look at the following information about the default media object. Media instance:

<! DOCTYPE html>alt= "Media Object" > </a> <div class= "Media-body" > 
Here are some sample text.       Here are some sample text. Here are some sample text.      Here are some sample text. Here are some sample text.      Here are some sample text. Here are some sample text.      Here are some sample text. Here are some sample text.   Here are some sample text. </div></div><div class= "Media" > <a class= "Pull-left" href= "#" > alt= "Media Object" > </a> <div class= "Media-body" > 
Here are some sample text.       Here are some sample text. Here are some sample text.      Here are some sample text. Here are some sample text.      Here are some sample text. Here are some sample text.      Here are some sample text. Here are some sample text.      Here are some sample text. <div class= "Media" > <a class= "Pull-left" href= "#" > alt= "Media Object" > </a> <div class= "Media-body" > 
Here are some sample text.            Here are some sample text. Here are some sample text.            Here are some sample text. Here are some sample text.             Here are some sample text. Here are some sample text.            Here are some sample text. Here are some sample text.         Here are some sample text. </div> </div> </div></div></body>
The results are as follows:
Let's take a look at the following list of media objects. Examples of media-list:
<! DOCTYPE html>alt= "Universal placeholder image" > </a> <div class= "Media-body" > 
Here are some sample text.             Here are some sample text. Here are some sample text.            Here are some sample text. Here are some sample text.            Here are some sample text. Here are some sample text.            Here are some sample text. Here are some sample text. Here are some sample text. </p> <!--Nested Media objects--<div class= "Media" > <a class= "Pull-left" href= "#"               ; alt= "Universal placeholder image" > </a> <div class= "Media-body" > 
Here are some sample text.               Here are some sample text. Here are some sample text.               Here are some sample text. Here are some sample text.               Here are some sample text. Here are some sample text.               Here are some sample text. Here are some sample text.               Here are some sample text. <!--nested Media objects--<div class= "Media" > <a class= "Pull-left" href= "#" > alt= "Universal placeholder image" > </a> <div class= "Media-body" > 
Here are some sample text.                     Here are some sample text. Here are some sample text.                     Here are some sample text. Here are some sample text.                     Here are some sample text. Here are some sample text.                     Here are some sample text. Here are some sample text.                  Here are some sample text. </div> </div> </div> </div> <!--nested Media objects-- <div class= "Media" > <a class= "Pull-left" href= "#" > alt= "Universal placeholder image" > </a> <div class= "Media-body" > 
Here are some sample text.               Here are some sample text. Here are some sample text.               Here are some sample text. Here are some sample text.               Here are some sample text. Here are some sample text.               Here are some sample text. Here are some sample text.            Here are some sample text. </div> </div> </div> </li> <li class= "Media" > <a class= "Pull-right" href= "#" > alt= "Universal placeholder image" > </a> <div class= "Media-body" > 
Here are some sample text.         Here are some sample text. Here are some sample text.         Here are some sample text. Here are some sample text.         Here are some sample text. Here are some sample text.         Here are some sample text. Here are some sample text.      Here are some sample text. </div> </li></ul></body>
The results are as follows:
Series Articles:Bootstrap < Fundamentals > CSS Overview
bootstrap< Basic two > network system
bootstrap< Basic three > typesetting
bootstrap< basic Four > code
Bootstrap < Fundamentals five > forms
bootstrap< basic six > form
Bootstrap < basic seven > button
Bootstrap < basics eight > pictures
bootstrap< Basic Nine > Auxiliary class
bootstrap< Basic 10 > responsive Utility
bootstrap< Basic 11 > Font icons (glyphicons)
Bootstrap < Basics 12 > drop-down menu (dropdowns)
bootstrap< Basic 13 > button Group
bootstrap< Basic 14 > button drop-down menu
bootstrap< Basic 15 > Input Frame Group
bootstrap< basic 16 > Navigation elements
bootstrap< basic 17 > Navigation Bar Bootstrap < basic 18 > Breadcrumb navigation (Breadcrumbs) Bootstrap < Fundamentals 19 > Pagination bootstrap< Basics 20 > Tags Bootstrap < fundamentals 21 > badges (Badges) Bootstrap < basic 22 > Oversized screen (Jumbotron) Bootstrap < basic 23 > page title Header) bootstrap< Basic 24 > Thumbnail Bootstrap < basic 25 > Warning (Alerts) Bootstrap < basic 26 > progress bar bootstrap< Base 27 > Multimedia Objects (Media Object)
bootstrap< Basic 27 > Multimedia Objects (Media Object)