在 Bootstrap 中解释媒体对象及其类型

在本文中，我们将了解 Bootstrap 媒体对象，它有助于将媒体放置在文本旁边。此外，我们将通过示例了解使用带有文本的媒体及其实现的各种方法。引导媒体对象可以用于放置一些内容，除了一些有助于为网站制作有吸引力和有趣的内容的媒体。图像或视频等媒体对象可以以简单有效的方式与某些内容的左侧或右侧对齐。 Bootstrap 媒体对象用于将一些数据放置在内容旁边以构建内容的复杂和递归组件的情况。

媒体对象的两个主要类别是：

• 。媒体
• .media-body  

方法：

• 将子元素包装在.media类中。
• 然后使用标签来指定媒体内容，如图像。
• 然后在里面。 media-body类，添加媒体内容。
• 我们还可以在父.media-body类中创建嵌套的媒体内容。

要将 Bootstrap 媒体对象包含在网站中，我们需要执行以下步骤：

第 1 步：在 HTML 部分中包含 Bootstrap CSS 以加载样式表。

添加 Bootstrap JavaScript 插件和依赖项。

第2步：我们可以直接复制Bootstrap官方文档中给出的Bootstrap starter模板。

HTML

      
    
    
    
                     
    
    
    Hello, world!

  

    Hello, world!
      
    
    
      
    
    
    
    
    
    

我们将利用启动器模板使用 Bootstrap 媒体对象构建网页。

• 基本媒体对象：我们将使用 将.media 类添加到容器元素，并将媒体内容放置在具有.media-body类的子容器中。

示例 1：此示例说明了 Bootstrap 媒体对象的使用。

HTML

      
    
    
    
                     
    
    
    

  

    
GeeksforGeeks!
    
 
        
        

            

                Media heading Example1
            
 
            GeeksforGeeks Bootstrap Media Content 
        
    

输出：

• Bootstrap 媒体对象中的列表：我们可以通过将媒体对象放在
  或
  标记中并添加.list-unstyled类来删除所使用的特定浏览器的默认列表样式来创建媒体对象列表。然后我们可以在
  1. 标签中添加一个.media来制作媒体列表。

  示例 2：此示例以列表的形式说明 Bootstrap Media 对象。

  HTML

  
  
    
  
        
      
      
        
      
                       
      
      
      
  
    
  
      
  GeeksforGeeks!
      
  
          
   
              
              
  
                  
  
                      List-based Media heading Example3
                  
   
                  GeeksforGeeks Bootstrap Media Content 
              
          
          
   
              
              
  
                  
  
                      List-based Media heading Example3
                  
   
                  GeeksforGeeks Bootstrap Media Content 
              
          
          
   
              
              
  
                  
  
                      List-based media object
                  
   GeeksforGeeks Bootstrap Media Content 
              
          
          
   
              
              
  
                  
  
                      List-based media object
                  
   
                  GeeksforGeeks Bootstrap Media Content
              
          
      
  
  
  

  输出：

  

  • 嵌套在 Bootstrap 媒体对象中：我们可以通过在父媒体类的.media-body中使用多个.media类来将多个媒体对象放置在父媒体对象中。

  示例 3：此示例说明了用于将媒体与内容一起嵌套的引导媒体对象。

  HTML

  
  
  
        
      
      
      
                       
      
      
      
  
    
  
      
  GeeksforGeeks!
      
   
          
          
  
              
  
                  Media heading Example2
              
   
              GeeksforGeeks Bootstrap Media Content
              
  
                  
                        
                  
                  
  
                      
  
                          Media heading Example2 nested
                      
   
                      GeeksforGeeks Bootstrap Media Content 
                  
              
          
      
  
  
  

  输出：

  

  • Bootstrap 媒体对象中的顺序：我们可以通过将图像放置在内容之后或之前或添加一些自定义 CSS 来更改媒体对象的顺序 或者修改 H tml让它看起来像我们想要的那样。

  示例 4：此示例说明了用于将媒体内容与媒体一起排序的引导媒体对象。

  HTML

  
  
  
        
      
      
      
                       
      
      
      
  
    
  
      
  GeeksforGeeks!
      
  
          
  
              
  
              Media Order
              
   
              GeeksforGeeks Bootstrap Media Content 
          
   
           
      
  
  
  

  输出：

  

  • Bootstrap 媒体对象中的对齐：我们可以使用各种 flexbox 实用程序将媒体对象放置在.media-body类内容的中心、顶部或末尾。

  以下引导类将帮助我们做到这一点：

  • .align-self-start ：用于将媒体放置在内容的开头。
  • .align-self-center ：用于将媒体放置在中心。
  • .align-self-end ：用于将媒体放在最后。

  示例 5：此示例说明了使用 Bootstrap 类将媒体及其内容对齐到指定位置的引导媒体对象。

  HTML

  
  
  
        
      
      
      
                       
      
      
      
  
    
  
      
  GeeksforGeeks!
      
   
          
          
  
              
  Top-aligned Bootstrap Media Object
              
  GeeksforGeeks Bootstrap Media Content
          
      
      
   
          
          
  
              
  Center-aligned Bootstrap Media Object
              
  GeeksforGeeks Bootstrap Media Content
          
      
      
   
          
          
  
              
  Bottom-aligned Bootstrap Media Object
              
  GeeksforGeeks Bootstrap Media Content
          
      
  
  
  

  输出：

  

  支持的浏览器：

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