我需要一个引导响应表来列表和网格视图选项,我已经尝试了很多次没有得到它。列表和网格视图只显示潜水选项我需要表格数据和列表网格视图。带列表和网格的引导表
0
A
回答
0
您可以使用插件为
jQuery的pluging
http://www.jqueryscript.net/demo/List-View-Grid-View-Switcher-Plugin-jQuery-simple-list-grid/
引导程序示例:
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>
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>
相关问题
- 1. 带有制表符窗格的引导程序下拉列表
- 2. 带引导列表的角度ng-repeat在线列表
- 3. 使用Material-UI栅格列表模拟引导程序网格
- 4. 引导网格和列偏移
- 5. 响应表或引导网格系统
- 6. 引导下拉列表中BS网格不打开在角2
- 7. 带滚动条的HTML表格或带列的选择列表?
- 8. 带链接列表的Sharepoint表格
- 9. 带有HTML表格的项目列表
- 10. 带表格的网格,边框不使用表格
- 11. 图表列网格
- 12. 带图表的免费引导模板
- 13. 带引导程序的动态表
- 14. 引导:表格水平
- 15. 表格包装 - 引导
- 16. 带导轨的窗体中的表格
- 17. 引导表中的隐藏表列
- 18. 地图标记和引导列表
- 19. 带ng-repeat的引导列
- 20. 在引导网格
- 21. 引导网格卡
- 22. 引导表格列 - HTML标签导致不正确的布局
- 23. 带有相同列值的行的引导表悬停
- 24. 带有MVVM导航的Xamarin表格
- 25. Recyclerview带备用1列网格行和2列网格行
- 26. 堆叠/嵌套列+引导网格
- 27. 带for循环和格式的表格
- 28. 导航我自己饲料网格传送带引导jquery html
- 29. HTML网格视图和列表视图
- 30. 引导网格内的iframe
感谢您的快速重播,但我已经尝试过它没有得到正确的结果,我需要列表和网格选项表。我的表格数据低于 – RameshJI
你的意思是像https://jsfiddle.net/yogesh078/bm97x6uv/这里它的基于布局的响应能力,它将显示表或列表视图布局 – Yogesh
是这样的,但我想列表和网格选项视图 – RameshJI