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单 ...
随机推荐
- jQuery中使用attribute，prop获取，设置input的checked值
1.prop方法获取.设置checked属性 当input控件checkbox设置了checked属性时,无论checked=”“或 checked=”checked”,$(obj).prop(“ch ...
- MySQL触发器的正确使用与案例分析
以下的文章主要向大家讲述的是MySQL触发器的实际使用详细说明与实际案例分析,同时本文也列举了一些在MySQL触发器的实际式操作中的代码,以下就是文章的详细内容介绍,望大家借鉴. 触发器案例 mysq ...
- bzoj千题计划130：bzoj1305: [CQOI2009]dance跳舞
http://www.lydsy.com/JudgeOnline/problem.php?id=1305 每个人拆为喜欢(yes)和不喜欢(no)两个点 二分答案 1.每两个人之间只能跳一次 喜欢则 ...
- poj 2185 Milking Grid
Milking Grid http://poj.org/problem?id=2185 Time Limit: 3000MS Memory Limit: 65536K Descript ...
- markdown里的多层次列表项
markdown里的多层次列表项 编写python的docstrng太多, 有时候就搞混淆了层次化列表项在博客或者随笔里的规则. docstirng里, 仅用两个空格的缩进就可以实现. 博客里通常是一 ...
- [整理]C语言函数说明和定义
函数的一般形式是:type-specifier function_name(parameter list) parameter declarations{ body of the function ...
- mysql关于“异步复制”“同步复制”“半同步复制”“无损复制”的概念与区别
异步复制:主把事务写到binlog日志并不管从是否接收或者什么时候接收,commit之后,不会与从发生ack之类的交互. 同步复制:当主提交一个事务,在主向前端返回一个commit成功的指令前,必须保 ...
- jquery $.post() 向php传值 实现简单的二级联动
更多内容推荐微信公众号,欢迎关注: 1 其中selectid是一个下拉菜单的id $().ready(function () { $("#selectid").change(fun ...
- 【总结】前端框架：react还是vue？
之前写了一篇前端框架的大汇总,主要介绍了当下主流的框架和其特性.最近除了bootstrap,就属react和vue最为热门,这篇就主要拿这两个框架来做一下详细对比. 究竟如何正确使用?作为小白的我们从 ...
- 【iptables】linux网络防火墙-iptables基础详解(重要)
一:前言 防火墙,其实说白了讲,就是用于实现Linux下访问控制的功能的,它分为硬件的或者软件的防火墙两种.无论是在哪个网络中,防火墙工作的地方一定是在网络的边缘.而我们的任务就是需要去定义到底防 ...