bootstrap 中 .media-list 类的目的是什么？

在本文中，我们将学习 Bootstrap 中“.media-list”类的使用。 .media-list 类是引导程序的媒体对象类之一。 '.media'类用于对齐或浮动媒体项，如音频、视频和图像，而'.media-list'类用于以无序列表的形式显示媒体项.您可以使用列表项中的媒体类来根据需要对齐它们。

句法：

以下是您可以在列表项中使用的一些常见有用媒体类的列表：

• .media：您可以使用此类创建媒体容器。
• .media-body：使用这个类来显示文本或内容。
• .media-left：此类用于将媒体向左对齐。
• .media-right：此类用于将媒体向右对齐。
• .media-heading：此类包含媒体容器的标题。
• .media-object：此类包含媒体类型（可以是音频、视频或图像）。

示例 1：下面的示例演示了在引导程序中使用'.media-list'类：

HTML

  

    
    
    
  
    
    
  
    Explain the use of.media-list class in Bootstrap
    
        .media2 {
            /* margin-bottom: 5px; */
            width: 60vw;
            height: 50vh;
            display: flex;
            background-color: green;
            color: white;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }
    

  

    
        
            
                
            
  
            
                
                    Welcome to GeeksforGeeks
                
                
                    A Computer Science portal for all geeks. 
                    This is left aligned item.
                
            
        
  
        
            
                
                    Welcome to GeeksforGeeks
                
                
                    A Computer Science portal for all geeks. 
                    This is right aligned item.
                
            
            
                
            
        
    
  
    
    
    

  

输出：

示例 2：

HTML

  

    
    
    
  
    
    
  
    
        Explain the use of.media-list 
        class in Bootstrap
    
      
    
        .media2 {
            width: 60vw;
            height: 80vh;
            display: flex;
            background-color: green;
            color: white;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }
    

  

    
        
            
                
            
  
            
                
                    Hey Geek, Welcome to GeeksforGeeks
                
                  
                
                    A computer science portal for all geeks. 
                    This is parent, left aligned item.
                
            
        
  
        
            
                
                    
                        Hey Geek, Welcome to GeeksforGeeks
                    
                    
                        A computer science portal for all geeks.
                        This is child, right aligned item.
                    
                
                
                    
                
            
        
  
        
            
                
                    
                
  
                
                    
                        Hey Geek, Welcome to GeeksforGeeks
                    
                    
                        A computer science portal for all geeks.
                        This is child, left aligned item.
                    
                
            
        
  
        
            
                
                    Hey Geek, Welcome to GeeksforGeeks
                
                
                    A computer science portal for all geeks.
                    This is parent, right aligned item.
                
            
            
                
            
        
    
  
    
    
    
      
    
    

  

输出：