Bootstrap 响应式表格
响应式表格
通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：响应式表格</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="table-responsive">
<table class="table table-bordered table-condensed table-hover table-striped">
<caption>Bootstrap响应式表格</caption>
<thead >
<tr class="success">
<th>序号</th><th>课程</th>
</tr>
</thead>
<tbody >
<tr class="active">
<td>1</td>
<td>HTML5</td>
</tr>
<tr class="info">
<td>2</td>
<td>CSS3</td>
</tr>
<tr class="warning">
<td>3</td>
<td>JavaScript</td>
</tr>
<tr class="danger">
<td>4</td>
<td>jQuery</td>
</tr>
<tr>
<td>5</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>6</td>
<td>Aanglur JS</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</div>
<script src="Css/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap 响应式表格的更多相关文章
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：响应式表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- RWD Table Patterns – 响应式表格解决方案
在显示复杂的表格数据的时候,相信 Web 开发人员都碰到过显示不下的情况.RWD Table Patterns 是一个很好的响应式表格解决方案.它采用移动优先以及渐进增强的设计理念,在不支持响应式的浏 ...
- [转]响应式表格jQuery插件 – Responsive tables
本文转自:http://www.shejidaren.com/responsive-tables-for-bootstrap-3.html 这个Responsive tables jQuery插件依赖 ...
- FooTable高级的响应式表格jQuery插件
FooTable是一个高级jQuery插件,允许开发者在触屏智能手机及平板电脑等小型设备上制作数据非常惊人的HTML表格.它可以将HTML表转换成可扩展的响应式表格,且通过单击某一行即可将该行数据隐藏 ...
- Bootstrap响应式布局
Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...
- 【温故知新】——Bootstrap响应式知识点复习
前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 开发工具 1.记事本,Editplus,... ... 2.Sublime,Dreamweaver 3.Webstorm = ...
- 模拟Bootstrap响应式网格系统
Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...
- Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...
- bootstrap响应式网页设计的9条基本原则！
bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...
随机推荐
- Unity3D–Texture图片空间和内存占用分析
Texture图片空间和内存占用分析.由于U3D并没有很好的诠释对于图片的处理方式,所以很多人一直对于图集的大小和内存的占用情况都不了解.在此对于U3D的图片问题做一个实际数据的分析.此前的项目都会存 ...
- sequoiadb sdbexprt 导入工具进阶使用
在做sdb 导入操作时,通过more 查看数据,格式是比较正常的,样例数据如下: CB20160630968101173208|||||_*||BZ|B3412|||||09664.8900| ||| ...
- linux常用命令（ubuntu）
编辑: vi [path] vim [path] :q 退出 :wq 保存退出 查看进程 ps ps -aux | grep mem 查看全部含 “mem”的进程 ps –aux 查看全部 在系统启 ...
- 牛客练习赛42B（异或的性质）
传送门 b^ c >= b - c,这个结论应该记住,我还在这里证过…… 这个题就用到了这个结论,假如当前答案集合为S,和为a,异或和为b,当前答案为a+b了.这时又读入个c,该不该加进来?a ...
- Connected Components? Codeforces - 920E || 洛谷 P3452 &&bzoj1098 [POI2007]BIU-Offices
https://codeforces.com/contest/920/problem/E https://www.luogu.org/problemnew/show/P3452 https://www ...
- ctypes to load library in c/c++
cdll.LoadLibrary(...) restype (default is c_int) argtypes (what's the default? c_int?) customized da ...
- 图像分类丨ILSVRC历届冠军网络「从AlexNet到SENet」
前言 深度卷积网络极大地推进深度学习各领域的发展,ILSVRC作为最具影响力的竞赛功不可没,促使了许多经典工作.我梳理了ILSVRC分类任务的各届冠军和亚军网络,简单介绍了它们的核心思想.网络架构及其 ...
- 利用html5canvas给图片增加文字水印
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- CF1081C Colorful Bricks
思路: dp[i][j]表示到第i个砖块为止共计有j个砖块和它左边的砖块颜色不同. 实现: #include <bits/stdc++.h> using namespace std; ty ...
- Android Studio你必须学会的快捷键（Eclipse转AS必看）
前言:从Eclipse转到Android Studio之后,一开始把keymap设置成Eclipse,却发现有些常用的快捷键都失效了,大概是冲突了.想了下,觉得与其重新设置快捷键,不如去适应AS的快捷 ...