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单 ...
随机推荐
- Ubuntu下配置支持Windows访问的Samba共享
一.安装Ubuntu samba服务器 $ sudo apt-get install samba $ sudo apt-get install smbclient # Linux客户端测试用 二.创建 ...
- presto架构和原理
Presto 是 Facebook 推出的一个基于Java开发的大数据分布式 SQL 查询引擎,可对从数 G 到数 P 的大数据进行交互式的查询,查询的速度达到商业数据仓库的级别,据称该引擎的性能是 ...
- 如何写一个好bug
自己的总结,和大家分享~
- 样式缩写——css技巧（一）
一.margin和padding缩写 例: .sample-margin1{ margin-top:15px; margin-right:20px; margin-bottom:12px; margi ...
- JS比较两个数字大小
js不能直降比较两·个数大小,要先转化为整数再比较大小. parseInt()转化. 出处:http://www.jb51.net/article/98251.htm
- 最大团 HDU-1530
传送门: 洛谷 Vjudge (题目略有不同) 题目描述 • 给定一个图 tt = (V, E) • 求一个点集 S ,使得对于任意 x ≠ y ∈ S ,x 和 y 都有一条边 • |V | ...
- JavaScript数组的概念
数组 1.数组是什么? 数组就是一组变量存放在里面就是数组. 例如:var list=['apple','goole','alibaba',520] (1.这些数据有一些相关性的. ( ...
- 49、多线程创建的三种方式之继承Thread类
继承Thread类创建线程 在java里面,开发者可以创建线程,这样在程序执行过程中,如果CPU空闲了,就会执行线程中的内容. 使用Thread创建线程的步骤: 1.自定义一个类,继承java.lan ...
- base64 与字符串互转
#region 将Base64编码的文本转换成普通文本 /// <summary> /// 将Base64编码的文本转换成普通文本 /// </summary> /// < ...
- 系统学习（javascript）_基础（数据类型之间的转换）
在js中数据类型转换一般分为两种,即强制类型转换和隐式类型转换(利用javascript弱变量类型转换). 强制转换: 利用js提供的函数parseInt(),parseFloat(),Number( ...