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单 ...
随机推荐
- Shell中eval的用法示例
功能说明:告知shell取出eval的参数,重新运算求出参数的内容. 语 法:eval [参数]补充说明:eval可读取一连串的参数,然后再依参数本身的特性来执行. 参 数:参数不限数目,彼此之间用分 ...
- Docker中执行Shell出现乱码
问题描述 最近遇到一个问题: 执行命令 docker exec f4af9b sh -c 'bash /tmp/build.sh' 命令在docker中执行shell,会出现中文乱码的问题.但是在do ...
- 学号20155308 2016-2017-2 《Java程序设计》第5周学习总结
学号20155308 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 8.1 语法与继承架构 使用try...catch 注意多个catch一定把父类放后面 ...
- 【Linux 命令】 rsync 目录覆盖软链接,保持软链接不变并同步目录内容
需求:有两个相同文件名的目录需要使用其中一个目录覆盖另外一个 问题: 被覆盖目录下存在软链接,但在源目录下软链接是一个目录 需要解决的方案: 要求将原目录里和被覆盖目录里冲突的目录文件复制到B的软链 ...
- 利用thrift rpc进行C++与Go的通信
一:什么是rpc rpc通俗来理解就是远程调用函数,相对于本地调用来说,只需要在主调函数中调用被掉函数即可,代码如下: void fun(int i) { cout << "fu ...
- Struts2笔记2--动态方法调用和Action接收请求方式
动态方法调用(在请求的时候,再明确具体的响应方法,配置的时候不明确): LoginAction类中有两个方法some和second 1. 动态方法的调用(修改常量struts.enable.Dynam ...
- python pachong zhuanzai
come from:http://www.cnblogs.com/dyllove98/archive/2013/07/12/3187186.html 先来说一下我们学校的网站: http://jwxt ...
- Docker技术这些应用场景【转】
场景一:节省项目环境部署时间 1.单项目打包 每次部署项目到测试.生产等环境,都要部署一大堆依赖的软件.工具,而且部署期间出现问题几率很大,不经意就花费了很长时间. Docker主要理念就是环境打包部 ...
- Dapper实用教程
Dapper是什么? Dpper是一款.Net平台简单(Simple)的对象映射库,并且Dapper拥有着“微型ORM之王”的称号.就速度而言与手写ADO.NET SqlDateReader相同.OR ...
- python基础--subprocess模块
可以执行shell命令的相关模块和函数有: os.system os.spawn* os.popen* --废弃 popen2.* --废弃 commands.* ...