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单 ...
随机推荐
- 【数据库-MySql】清空所有表格的所有数据
方式一. drop procedure if exists del_all_tb; delimiter $$ create procedure del_all_tb(db char(20)) begi ...
- spark科普
普Spark,Spark是什么,如何使用Spark(1)转自:http://www.aboutyun.com/thread-6849-1-1.html 阅读本文章可以带着下面问题:1.Spark基于什 ...
- Windows系统环境下Solr之Java实战（三）使用solrJ管理索引库
https://www.cnblogs.com/zhuxiaojie/p/5764680.html https://www.cnblogs.com/xieyupeng/p/9317158.html
- 推荐一款超级漂亮的HTML5 CSS3的图片轮播器
最近在学习HTML5和CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer. 本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图 ...
- 【BZOJ】4259: 残缺的字符串 FFT
[题意]给定长度为m的匹配串B和长度为n的模板串A,求B在A中出现多少次.字符串仅由小写字母和通配符" * "组成,其中通配符可以充当任意一个字符.n<=3*10^5. [算 ...
- MeasureSpec介绍及使用详解
一个MeasureSpec封装了父布局传递给子布局的布局要求,每个MeasureSpec代表了一组宽度和高度的要求.一个MeasureSpec有大小和模式组成.他有三种模式: UNSPECIFIED ...
- HDU 6196 happy happy happy 爆搜加剪枝
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6196 题意:给你长度为n的序列,爸爸和儿子玩一个游戏,儿子先手,儿子每次都选择最左边与最右边最大的那个 ...
- Python爬虫---requests库快速上手
一.requests库简介 requests是Python的一个HTTP相关的库 requests安装: pip install requests 二.GET请求 import requests # ...
- [HBase]mem store flusher 流程
- Flask: Quickstart解读
Windows 10家庭中文版,Python 3.6.4,Flask 1.0.2 从示例代码说起: from flask import Flask app = Flask(__name__) @app ...