BootStrap学习(5)_多媒体对象&列表组_html/css_WEB-ITnose

一、多媒体对象

这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。

.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。

.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

1.基本多媒体对象

    
            
      
企鹅-标题
      这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。     
           
      
企鹅
      这是一个企鹅。这是一个企鹅。       这是一个企鹅。这是一个企鹅。       这是一个企鹅。这是一个企鹅。       这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。     

效果:

2.嵌套的媒体对象

    
                            
            
用户1
            今天的天气真好，空气清新，阳光明媚。       
                                     
               用户1:               是啊，天气真好。           
       
            
                                                    
                    企鹅3:                    嗯嗯，是的呢。                 
            
        
    

效果:

 

二、列表组 

列表组件用于以列表形式呈现复杂的和自定义的内容

向元素

添加 class .list-group。

向

添加 class .list-group-item。

可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在

元素中添加  即可

1.基本列表组

• 新新闻1
• 荐新闻2
• 新闻3
• 新闻4

效果:

 

2.向列表组添加链接

    新新闻1   荐新闻2   新闻3   新闻4

效果:

 

3.自定义内容

    
         
         新闻      
            
         新闻1      
      
         新闻内容新闻内容新闻内容新闻内容新闻内容......      
            
         新闻2      
      
         新闻2内容新闻2内容新闻2内容新闻2内容......      
   

效果: