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

一、多媒体对象

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

.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。 .media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

1.基本多媒体对象

            .media-object {        width:60px;        height:60px;        }    
         @@##@@      
      
企鹅-标题
      这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。     
        @@##@@      
      
企鹅
      这是一个企鹅。这是一个企鹅。       这是一个企鹅。这是一个企鹅。       这是一个企鹅。这是一个企鹅。       这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。     

登录后复制

效果:

2.嵌套的媒体对象

立即学习“前端免费学习笔记（深入）”；

            .media-object {            width: 30px;            height: 30px;        }    
                    @@##@@                
            
用户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内容......      
   

登录后复制

效果: