这是一款基于Bootstrap的网格布局和列表布局切换特效。该特效通过jQuery来为元素切换不同的class类，来将布局显示为网格布局或列表布局。

使用方法

在页面中引入bootstrap相关文件。

HTML结构

布局的基本HTML结构如下，每一个item是一个网格项（或一个列表项）：

    

        显示为：
        

            
            列表布局 网格布局
        
    
    

        

            

                
                

                    

                        Product title
                    
图片描述信息
                    

                        

                            

                                $21.000
                        
                        

                            Add to cart
                        
                    
                
            
        
        

            

                
                

                    

                        Product title
                    
图片描述信息
                    

                        

                            

                                $21.000
                        
                        

                            Add to cart
                        
                    
                
            
        
        ......
    

                

CSS样式

为布局添加下面的CSS样式。

.thumbnail
{
    margin - bottom: 20 px;
    padding: 0 px; - webkit - border - radius: 0 px; - moz - border - radius: 0 px;
    border - radius: 0 px;
}

.item.list - group - item {
        float: none;
        width: 100 % ;
        background - color: #fff;
        margin - bottom: 10 px;
    }
    .item.list - group - item: nth - of - type(odd): hover, .item.list - group - item: hover {
        background: #428bca;
}

.item.list-group-item .list-group-image
{
    margin-right: 10px;
}
.item.list-group-item .thumbnail
{
    margin-bottom: 0px;
}
.item.list-group-item .caption
{
    padding: 9px 9px 0px 9px;
}
.item.list-group-item:nth-of-type(odd)
{
    background: # eeeeee;
    }

.item.list - group - item: before, .item.list - group - item: after {
    display: table;
    content: " ";
}

.item.list - group - item img {
    float: left;
}
.item.list - group - item: after {
    clear: both;
}
.list - group - item - text {
    margin: 0 0 11 px;
}             
                

JavaScript

当点击网格布局按钮或列表布局按钮时，通过jquery来为相应的元素添加或移除相应的class类，来完成网格布局和列表布局之间的转换。

$(document).ready(function() {
    $('#list').click(function(event){
        event.preventDefault();
        $('#products .item').addClass('list-group-item');
    });
    $('#grid').click(function(event){
            event.preventDefault();
            $('#products .item').removeClass('list-group-item');
            $('#products .item').addClass('grid-group-item');
    });
});