Bootstrap--响应式表格布局
<div class="row">
<div class="col-sm-2 col-md-2" style="min-height:400px;border:1px #eee4e4 solid; border-radius:5px;padding-top:20px;">
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a href="#" class="text-muted">6346</a>
</li>
<li>
<a href="#" class="text-muted">6346</a>
</li>
<li>
<a href="#" class="text-muted">6346</a>
</li>
</ul>
</div>
<div class="col-sm-10 col-md-10" style="min-height:400px;border:1px #eee4e4 solid; border-radius:5px;padding-top:20px;">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
<table class="table">
<caption class="pull-left">热歌</caption>
<tbody>
<tr>
<td><span>1</span></td>
<td><a href="#">千里之外</a></td>
<td><a href="#">周杰伦</a></td>
<td><a href="#">播放</a></td>
<td><a href="#">收藏</a></td>
</tr>
<tr>
<td><span>1</span></td>
<td><a href="#">千里之外</a></td>
<td><a href="#">周杰伦</a></td>
<td><a href="#">播放</a></td>
<td><a href="#">收藏</a></td>
</tr>
<tr>
<td><span>1</span></td>
<td><a href="#">千里之外</a></td>
<td><a href="#">周杰伦</a></td>
<td><a href="#">播放</a></td>
<td><a href="#">收藏</a></td>
</tr>
<tr>
<td><span>1</span></td>
<td><a href="#">千里之外</a></td>
<td><a href="#">周杰伦</a></td>
<td><a href="#">播放</a></td>
<td><a href="#">收藏</a></td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="table-responsive">
<table class="table">
<caption class="pull-left">热歌</caption>
<tbody>
<tr>
<td><span>1</span></td>
<td><a href="#">千里之外</a></td>
<td><a href="#">周杰伦</a></td>
<td><a href="#">播放</a></td>
<td><a href="#">收藏</a></td>
</tr>
<tr>
<td><span>1</span></td>
<td><a href="#">千里之外</a></td>
<td><a href="#">周杰伦</a></td>
<td><a href="#">播放</a></td>
<td><a href="#">收藏</a></td>
</tr>
<tr>
<td><span>1</span></td>
<td><a href="#">千里之外</a></td>
<td><a href="#">周杰伦</a></td>
<td><a href="#">播放</a></td>
<td><a href="#">收藏</a></td>
</tr>
<tr>
<td><span>1</span></td>
<td><a href="#">千里之外</a></td>
<td><a href="#">周杰伦</a></td>
<td><a href="#">播放</a></td>
<td><a href="#">收藏</a></td>
</tr>
<tr>
<td><span>1</span></td>
<td><a href="#">千里之外</a></td>
<td><a href="#">周杰伦</a></td>
<td><a href="#">播放</a></td>
<td><a href="#">收藏</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
<table class="table">
<caption class="pull-left">热歌</caption>
<tbody>
<tr>
<td><span>1</span></td>
<td><a href="#">千里之外</a></td>
<td><a href="#">周杰伦</a></td>
<td><a href="#">播放</a></td>
<td><a href="#">收藏</a></td>
</tr>
<tr>
<td><span>1</span></td>
<td><a href="#">千里之外</a></td>
<td><a href="#">周杰伦</a></td>
<td><a href="#">播放</a></td>
<td><a href="#">收藏</a></td>
</tr>
<tr>
<td><span>1</span></td>
<td><a href="#">千里之外</a></td>
<td><a href="#">周杰伦</a></td>
<td><a href="#">播放</a></td>
<td><a href="#">收藏</a></td>
</tr>
<tr>
<td><span>1</span></td>
<td><a href="#">千里之外</a></td>
<td><a href="#">周杰伦</a></td>
<td><a href="#">播放</a></td>
<td><a href="#">收藏</a></td>
</tr>
<tr>
<td><span>1</span></td>
<td><a href="#">千里之外</a></td>
<td><a href="#">周杰伦</a></td>
<td><a href="#">播放</a></td>
<td><a href="#">收藏</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Bootstrap--响应式表格布局的更多相关文章
- Bootstrap 响应式表格
响应式表格 通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px).当在大于 768px 宽的大型设备上查看时,您 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：响应式表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 前端框架bootstrap(响应式布局)入门
Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...
- Bootstrap响应式布局
Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...
- 【温故知新】——Bootstrap响应式知识点复习
前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 开发工具 1.记事本,Editplus,... ... 2.Sublime,Dreamweaver 3.Webstorm = ...
- RWD Table Patterns – 响应式表格解决方案
在显示复杂的表格数据的时候,相信 Web 开发人员都碰到过显示不下的情况.RWD Table Patterns 是一个很好的响应式表格解决方案.它采用移动优先以及渐进增强的设计理念,在不支持响应式的浏 ...
- Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...
- [转]响应式表格jQuery插件 – Responsive tables
本文转自:http://www.shejidaren.com/responsive-tables-for-bootstrap-3.html 这个Responsive tables jQuery插件依赖 ...
- FooTable高级的响应式表格jQuery插件
FooTable是一个高级jQuery插件,允许开发者在触屏智能手机及平板电脑等小型设备上制作数据非常惊人的HTML表格.它可以将HTML表转换成可扩展的响应式表格,且通过单击某一行即可将该行数据隐藏 ...
- bootstrap响应式网页设计的9条基本原则！
bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...
随机推荐
- ML入门理论
http://www.mamicode.com/info-detail-1707941.html
- Could not parse multipart servlet request; nested exception is java.io.IOException: The temporary upload location
spring-boot项目,生产环境运行一段时间后,上传图片报错,如下: threw exception [Request processing failed; nested exception is ...
- asp.net后台操作javascript:confirm返回值
在asp.net中使用confirm可以分为两种: 1.没有使用ajax,confirm会引起也面刷新 2.使用了ajax,不会刷新 A.没有使用ajax,可以用StringBuilder来完成. ( ...
- HDU 2094 产生冠军 dfs加map容器
解题报告:有一群人在打乒乓球比赛,需要在这一群人里面选出一个冠军,现在规定,若a赢了b,b又赢了c那么如果a与c没有比赛的话,就默认a赢了c,而如果c赢了a的话,则这三个人里面选不出冠军,还有就是如果 ...
- Linux下inittab文件详解
/etc/inittab文件详解 Linux系统的启动过程为:加电自检-->根据BIOS中的设置从指定的设备启动-->找到设备MBR中的bootloader引导启动系统-->启动ke ...
- hdu 1716 排列2（DFS搜索）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1716 排列2 Time Limit: 1000/1000 MS (Java/Others) Me ...
- Anaconda3+python3环境下如何创建python2环境（win+Linux下适用，同一个anaconda下py2/3共存）
本人之前已经在anaconda环境下已经安装了python3的环境,现在因为一些需求,要安装python2环境 1.打开anaconda的anaconda prompt查看当前环境: conda in ...
- Android获取手机分辨率DisplayMetircs类
关于Android中手机分辨率的使用 Android 可设置为随着窗口大小调整缩放比例,但即便如此,手机程序设计人员还是必须知道手机屏幕的边界,以避免缩放造成的布局变形问题. 手机的分辨率信息是手机的 ...
- github 优秀的开源项目
https://github.com/wlcaption/AndroidMarket---- 这是手机应用商店,包含应用的下载,用户中心等内容 https://github.com/wlcaption ...
- 关于Unity启动时间过长（启动黑屏时间长）的问题!!! 牛逼... 思路不错...
http://blog.csdn.net/u012169685/article/details/52068809