我需要一个引导响应表来列出和网格视图选项，我已经尝试了很多次都没有得到它。列表和网格视图仅显示潜水选项我需要表格数据和列表网格视图。
答案 0 :(得分：0)
你可以使用插件
Jquery pluging
http://www.jqueryscript.net/demo/List-View-Grid-View-Switcher-Plugin-jQuery-simple-list-grid/
Bootstrap示例：
https://codepen.io/ajaypatelaj/pen/zIBjJ
示例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>
答案 1 :(得分：0)
<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>