响应式表格

通过把任意的 .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 响应式表格的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：响应式表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. RWD Table Patterns – 响应式表格解决方案

    在显示复杂的表格数据的时候,相信 Web 开发人员都碰到过显示不下的情况.RWD Table Patterns 是一个很好的响应式表格解决方案.它采用移动优先以及渐进增强的设计理念,在不支持响应式的浏 ...

  3. [转]响应式表格jQuery插件 – Responsive tables

    本文转自:http://www.shejidaren.com/responsive-tables-for-bootstrap-3.html 这个Responsive tables jQuery插件依赖 ...

  4. FooTable高级的响应式表格jQuery插件

    FooTable是一个高级jQuery插件,允许开发者在触屏智能手机及平板电脑等小型设备上制作数据非常惊人的HTML表格.它可以将HTML表转换成可扩展的响应式表格,且通过单击某一行即可将该行数据隐藏 ...

  5. Bootstrap响应式布局

    Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...

  6. 【温故知新】——Bootstrap响应式知识点复习

    前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 开发工具 1.记事本,Editplus,... ... 2.Sublime,Dreamweaver 3.Webstorm = ...

  7. 模拟Bootstrap响应式网格系统

    Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...

  8. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

  9. bootstrap响应式网页设计的9条基本原则！

    bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...

随机推荐

  1. 3DMAX 7 角色建模1 人头建模

    说明: mesh与poly 可编辑多边形是一个多边形网格:即与可编辑网格不同,其使用超过三面的多边形.可编辑多边形非常有用,因为它们可以避免看不到边缘.例如,如果您对可编辑多边形执行切割和切片操作,程 ...

  2. Unity3D asset bundle 格式简析

    http://blog.codingnow.com/2014/08/unity3d_asset_bundle.html Unity3D 的 asset bundle 的格式并没有公开.但为了做更好的差 ...

  3. MongoDb 数据修补笔记

    1. 2013.08.21     KS 数据有严重问题, 缺乏数十秒数据, serialNumber 乱序

  4. luogu P3600 随机数生成器【dp】

    把期望改成方案数最后除一下,设h[i]为最大值恰好是i的方案数,那么要求的就是Σh[i]*i 首先包含其他区间的区间是没有意义的,用单调栈去掉 然后恰好不好求,就改成h[i]表示最大值最大是i的方案数 ...

  5. zookeeper 搭建

    zookeeper 版本为zookeeper 3.4.8 操作系统为ubuntu 12.04 64位 zookeeper 单机搭建 解压zookeeper 包 .tar.gz -C /root/sof ...

  6. XML学习1 xml序言 dtd约束

  7. 51Nod 1097 拼成最小的数（字符串的排序）

    #include <iostream> #include <cstring> #include <cstdlib> #include <cstdio> ...

  8. PAT甲级——1123 Is It a Complete AVL Tree （完全AVL树的判断）

    嫌排版乱的话可以移步我的CSDN:https://blog.csdn.net/weixin_44385565/article/details/89390802 An AVL tree is a sel ...

  9. 解决web项目无法部署到eclipse配置的本地tomcat

    一.发现问题 在eclipse中新建Dynamic Web Project,配置好本地的tomcat并写好代码后选择Run on Server,但运行后发现在tomcat的安装目录下的webapps并 ...

  10. spring+mybits 整合所需jar包的下载路径（亲测有效）

    1.spring jar包:http://repo.springsource.org/libs-release-local/org/springframework/spring/5.0.0.RELEA ...