Twitter bootstrap 带列表和网格的引导表

我需要一个引导响应表列表和网格视图选项，我已经尝试了很多次没有得到它。列表和网格视图仅显示俯冲选项我需要表格数据和列表网格视图。

您可以使用插件来实现这一点

Jquery插件

引导示例：

示例HTML：

<div class="container">
    <div class="well well-sm">
        <strong>Display</strong>
        <div class="btn-group">
            <a href="#" id="list" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th-list">
            </span>List</a> <a href="#" id="grid" class="btn btn-default btn-sm"><span
                class="glyphicon glyphicon-th"></span>Grid</a>
        </div>
    </div>
    <div id="products" class="row list-group">
        <div class="item  col-xs-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

显示
产品名称

产品说明。。。Lorem ipsum dolor sit amet，一位杰出的领导者，
这是一个巨大的挑战

21.000美元
产品名称

产品说明。。。Lorem ipsum dolor sit amet，一位杰出的领导者，
这是一个巨大的挑战

21.000美元
产品名称

产品说明。。。Lorem ipsum dolor sit amet，一位杰出的领导者，
这是一个巨大的挑战

21.000美元
产品名称

产品说明。。。Lorem ipsum dolor sit amet，一位杰出的领导者，
这是一个巨大的挑战

21.000美元
产品名称

产品说明。。。Lorem ipsum dolor sit amet，一位杰出的领导者，
这是一个巨大的挑战

21.000美元
产品名称

产品说明。。。Lorem ipsum dolor sit amet，一位杰出的领导者，
这是一个巨大的挑战

21.000美元

国家
语言文字
人口
中位年龄
面积（平方公里）
阿根廷
西班牙语（官方）、英语、意大利语、德语、法语
41,803,125
31.3
2,780,387
澳大利亚
英语79%，母语和其他语言
23,630,169
37.3
7,739,983
希腊
希腊语99%（官方）、英语、法语
11,128,404
43.2
131,956
卢森堡
卢森堡（国家）法语、德语（均为行政语言）
536,761
39.1
2,586
俄罗斯
俄罗斯人，其他
142,467,651
38
<table class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>Country</th>
                      <th>Languages</th>
                      <th>Population</th>
                      <th>Median Age</th>
                      <th>Area (Km²)</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>Argentina</td>
                      <td>Spanish (official), English, Italian, German, French</td>
                      <td>41,803,125</td>
                      <td>31.3</td>
                      <td>2,780,387</td>
                    </tr>
                    <tr>
                      <td>Australia</td>
                      <td>English 79%, native and other languages</td>
                      <td>23,630,169</td>
                      <td>37.3</td>
                      <td>7,739,983</td>
                    </tr>
                    <tr>
                      <td>Greece</td>
                      <td>Greek 99% (official), English, French</td>
                      <td>11,128,404</td>
                      <td>43.2</td>
                      <td>131,956</td>
                    </tr>
                    <tr>
                      <td>Luxembourg</td>
                      <td>Luxermbourgish (national) French, German (both administrative)</td>
                      <td>536,761</td>
                      <td>39.1</td>
                      <td>2,586</td>
                    </tr>
                    <tr>
                      <td>Russia</td>
                      <td>Russian, others</td>
                      <td>142,467,651</td>
                      <td>38.4</td>
                      <td>17,076,310</td>
                    </tr>
                    <tr>
                      <td>Sweden</td>
                      <td>Swedish, small Sami- and Finnish-speaking minorities</td>
                      <td>9,631,261</td>
                      <td>41.1</td>
                      <td>449,954</td>
                    </tr>
                  </tbody>
                </table>