Bootstrap组件 - 多媒体对象

知识点

类 | 描述

• | :-: | -:
  .media | 该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
  .media-list | 如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。
  .media-left | {display: table-cell;vertical-align: top;padding-right: 10px;}
  .media-body | {display: table-cell;vertical-align: top;width: 10000px;} .media .media-body{overflow:hidden;zoom:1;}
  .media-right | {display: table-cell;vertical-align: top;padding-left: 10px;}

在 html 结构中， .media-right 应当放在 .media-body 的后面。

对齐
图像默认为顶部对齐，可以设置图片或其他媒体类型可以顶部、中部或底部对齐。
.media-middle
.media-bottom

媒体对象列表
多媒体列表，类似博客留言回复。

多媒体列表

---

实践

    
    
    
    
    
    
    
    
    



    

        

            
                ![](images/img1.jpg)
            
        
        

            
媒体头部
            
默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。
            
.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。
            
图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。
            
用一点点额外的标记，就能在列表内使用媒体对象组件（对评论或文章列表很有用）。
        
    
    

    
    

        

            
                ![](images/img1.jpg)
            
        
        

            
media-middle
            
默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。
            
.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。
            
图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。
            
用一点点额外的标记，就能在列表内使用媒体对象组件（对评论或文章列表很有用）。
        
    
    

    
    

        

            
                ![](images/img1.jpg)
            
        
        

            
media-bottom
            
默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。
            
.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。
            
图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。
            
用一点点额外的标记，就能在列表内使用媒体对象组件（对评论或文章列表很有用）。
        
    
    

    
    

        

            
            

                
                    ![](images/img1.jpg)
                
            
            

                
media-bottom
                
默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。
                
                

                    

                        
                            ![](images/img2.jpg)
                        
                    
                    

                        
media-bottom
                        
.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。
                        

                            

                                
                                    ![](images/img1.jpg)
                                
                            
                            

                                
media-bottom
                                
图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。
                            
                        
                    
                
                
                

                    

                        
                            ![](images/img3.jpg)
                        
                    
                    

                        
media-bottom
                        
.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。