📜  引导程序4 |媒体对象

📅  最后修改于: 2021-05-25 17:03:36             🧑  作者: Mango

Bootstrap媒体对象(例如图像或视频)可以以简单有效的方式在内容的左侧或右侧对齐。 Bootstrap媒体对象用于在内容旁边放置一些数据的地方,以构建内容的复杂和递归组件。

基本媒体对象:对容器元素使用.media类,并使用.media-body类将媒体内容放入子容器中。
例子:

 
 
 
    Bootstrap Media Object 
      
    
    
  
    
      
    
      
    
      
    
 
  

    

GeeksforGeeks

           

Media Object

           
        
                                        
                

GeeksforGeeks                                              Post published on 14th May, 2019                                      

                

                    GeeksforGeeks is a computer science portal.                      It is a best programming platform.                  

            
        
    
                         

输出:

嵌套媒体对象:可以将媒体对象添加到媒体对象内部。它称为嵌套媒体对象。

例子:

 
 
 
    Bootstrap Media Object 
      
    
    
  
    
      
    
      
    
      
    
 
  

    

GeeksforGeeks

           

Nested Media Objects

           
        
                                        
                

GeeksforGeeks                                                   Post published on 14th May, 2019                                      

                

                    GeeksforGeeks is a computer science portal.                      It is a best programming platform.                  

                                   
                                                        
                        
GeeksforGeeks                                                                   Post Modified on 15th May, 2019                                                      
                        

                            GeeksforGeeks is a computer science portal.                              It is a best programming platform.                          

                    
                
            
        
    
                         

输出:

右对齐媒体图像:在.media-body容器后添加图像以将图像设置为右对齐。

例子:

 
 
 
    Bootstrap Media Object 
      
    
    
  
    
      
    
      
    
      
    
 
  

    

GeeksforGeeks

           

Right-Aligned Media Objects

           
        
            
                

GeeksforGeeks                                                   Post published on 14th May, 2019                                      

                

                    GeeksforGeeks is a computer science portal.                      It is a best programming platform.                  

            
                                    
    
                         

输出:

顶部,中间和底部媒体对齐方式: .align-self- *类用于将媒体对象设置在元素的顶部,中间或底部。

例子:

 
 
 
    Bootstrap Media Object 
      
    
    
  
    
      
    
      
    
      
    
 
  

    

GeeksforGeeks

           

Top, Middle or Bottom Media Alignment

           
                   
                                                
                

GeeksforGeeks                                                   Post published on 14th May, 2019                                      

                

                    GeeksforGeeks is a computer science portal.                      It is a best programming platform.  It contains                     well written, well thought and well explained                      computer science and programming articles,                      quizzes and ...                 

            
        
                   
                                                
                

GeeksforGeeks                                                   Post published on 14th May, 2019                                      

                

                    GeeksforGeeks is a computer science portal.                      It is a best programming platform.  It contains                     well written, well thought and well explained                      computer science and programming articles,                      quizzes and ...                 

            
        
                   
                                                
                

GeeksforGeeks                                                   Post published on 14th May, 2019                                      

                

                    GeeksforGeeks is a computer science portal.                      It is a best programming platform.  It contains                     well written, well thought and well explained                      computer science and programming articles,                      quizzes and ...                 

            
        
    
                         

输出: