什么是媒体对象并解释 Bootstrap 中的类型？

在本文中，我们将了解 Bootstrap 媒体对象，它有助于将媒体放置在文本旁边。此外，我们将通过示例了解使用带有文本的媒体及其实现的各种方法。媒体对象是引导组件，有助于在 Bootstrap 中构建重复设计，其中一些媒体以左对齐或右对齐的方式放置，以及不环绕媒体的文本内容。媒体对象需要两个引导类来包装.media和.media-body内容。

我们将使用 Bootstrap CDN 链接将它们导入 HTML 文件。

添加所需的 CDN 链接后，我们将使用以下简单的媒体对象代码到我们的 HTML 文件中：

 
    
    

        
Media heading
        

            Geeksforgeeks platform has been designed 
            for every geek wishing to expand their 
            knowledge, share their knowledge and is 
            ready to grab their dream job. 
        
    

示例：此示例描述了简单的媒体和媒体主体对象。

HTML

  

    
    
    
    
    

  

    
  
    
 
        
        
      
        

            
Media heading
            

                Geeksforgeeks platform has been 
                designed for every geek wishing 
                to expand their knowledge, share 
                their knowledge and is ready to 
                grab their dream job.
            
        
    

  

输出：

示例媒体对象

Bootstrap 中有不同类型的媒体对象。

嵌套媒体对象：我们可以在 Bootstrap 中创建嵌套媒体对象。要制作嵌套媒体对象，我们必须在 .media-body 类中添加媒体对象。在嵌套媒体对象中，.media 可以放在父媒体对象的 .media-body 类中。

句法：

    
    

        Content 
    

示例：此示例描述了嵌套的媒体主体对象。

HTML

  

    
    
    
    
    

  

    
  
    
 
      
        
      
      

          
Media heading
          

              Geeksforgeeks platform has been 
              designed for every geek wishing 
              to expand their knowledge, share 
              their knowledge and is ready to 
              grab their dream job.
          
            
          
          
 
              
                
              
              

                  
Media heading
                  

                      Geeksforgeeks platform has been 
                      designed for every geek wishing 
                      to expand their knowledge, share 
                      their knowledge and is ready to 
                      grab their dream job.
                  
                    
                  
                  
 
                      
                        
                      
                        

                            
Media heading
                            

                              Geeksforgeeks platform has been 
                              designed for every geek wishing 
                              to expand their knowledge, share 
                              their knowledge and is ready to 
                              grab their dream job.
                            
                        
                    
                
            
        
    

  

输出：

嵌套媒体对象

• 对齐：我们可以在 flexbox 实用程序类的帮助下对齐媒体对象内的媒体。要将媒体对齐到顶部、中间或底部，我们可以使用这些类： media-top 、 media-middle或media-bottom类。

句法：

    


    Content

示例：此示例描述了与媒体顶部、中间或底部对齐的媒体对象。

HTML

  

    
    
    
    
    

  

    
  
    
 
        
        

            
Media heading
            

                GeeksforGeeks platform has been designed
                for every geek wishing to expand their 
                knowledge , share their knowledge and is
                ready to grab their dream job. 
            
  
        
    
    
  
    
 
        
        

            
Media heading
            

                GeeksforGeeks platform has been designed
                for every geek wishing to expand their 
                knowledge , share their knowledge and is
                ready to grab their dream job. 
            
  
        
    
    
  
    
 
        
        

            
Media heading
            

                GeeksforGeeks platform has been designed
                for every geek wishing to expand their 
                knowledge , share their knowledge and is
                ready to grab their dream job. 
            
  
        
    

  

输出：

媒体对象与开始、中间和底部对齐

• 基于媒体对象的列表：在引导程序中，我们可以在列表中添加媒体对象作为列表项，并使用它们来创建基于媒体对象的列表。

句法：

  

    
    
Content
  

示例：此示例描述基于媒体对象的列表。

HTML

  

    
    
    
    
    

  

    
  
    

        
 
           
            

                
List-based media object
                

                  GeeksforGeeks platform has been designed for 
                  every geek wishing to expand their knowledge,
                  share their knowledge and is ready to grab their
                  dream job. 
                
  
            
        
        
 
            
            

                
List-based media object
                

                  GeeksforGeeks platform has been designed for 
                  every geek wishing to expand their knowledge,
                  share their knowledge and is ready to grab their
                  dream job. 
                
  
            
        
        
 
            
            

                
List-based media object
                

                  GeeksforGeeks platform has been designed for 
                  every geek wishing to expand their knowledge,
                  share their knowledge and is ready to grab their
                  dream job.
                
  
            
        
    

  

输出：

媒体对象列表

Bootstrap 中的媒体对象是一个非常有用的组件，我们可以将其用于不同的目的，例如创建 Twitter 克隆，我们可以用它来创建帖子，我们也可以用来创建一个新闻网站克隆，我们可以使用这个媒体对象概念。因此，媒体对象通过以有序的方式将媒体与文本内容一起放置，使我们的工作变得非常容易。

支持的浏览器：

• 谷歌浏览器
• 微软边缘
• 火狐
• 歌剧
• 苹果浏览器