BootStrap Learning (5) _ multimedia object & amp; List Group, bootstrap multimedia

BootStrap Learning (5) _ multimedia objects & list groups, bootstrap multimedia
I. multimedia objects

These abstract object styles are used to create various types of components (for example, blog comments). We can use text-and-image mixing in components, and the images can be left-aligned or right-aligned. Media objects can be mixed with texts with less code.

• . Media: This class allows multimedia (images, videos, and audios) in a media object to the left or right of the content block.
• . Media-list: If you need a list, the content of each item is part of the unordered list, you can use this class. It can be used for the comment list and article list.

1. Basic multimedia objects

<! DOCTYPE html> 
Effect:

2. nested media objects
<! DOCTYPE html> Effect:


 
Ii. List Group
The list component is used to present complex and custom content in the form of a list.

 

 
  
Add class to element <ul>. List-group.
 
  
Add a class to <li>. List-group-item.
 
  
You can add a badge component to any list item, which is automatically located on the right. You only need to add the <li> element<Span class = "badge">You can.

 
1. Basic List Group
<! DOCTYPE html> 
Effect:

 
2. Add a link to the List Group
<! DOCTYPE html> Effect:


 
3. Custom content
<! DOCTYPE html> Effect: