响应式表格

通过把任意的 .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. CodeForces 689B【最短路】

    题意: 给你一副图,给出的点两两之间的距离是abs(pos1-pos2),然后给你n个数是表示该pos到x的距离是1. 思路: 直接建边,跑spfa就好了.虽然说似乎题意说边很多,其实只要建一下相邻的 ...

  2. bzoj 4200: [Noi2015]小园丁与老司机【dp+有上下界最小流】

    洛谷上有个点死活卡不过去,不知道是哪里写丑了orz 参考:https://www.cnblogs.com/ditoly/p/BZOJ4200.html 从上往下dp,设f为不向左右走直接上去的值,g为 ...

  3. app发布证书、真机调试证书、测试证书、推送证书详细过程

    原文网址: http://www.cnblogs.com/cxbblog/p/4028159.html 一:发布证书 遵旨:哪个开发者的哪台电脑要发布哪个app (这句话可以多读几遍) 通过上边的遵旨 ...

  4. 新手安装 hadoop、hive和hbase 笔记

    系统是ubuntu 12.04 , hadoop版本是1.2.1 , hive版本是0.12 , hbase版本我忘记了,不好意思首先是配置好hostnamevi /etc/hosts写入你要配置的i ...

  5. SpringBoot | 查看默认版本配置

    <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot ...

  6. UWP 画一个圆形头像

    经常需要做一个圆形头像的样式,like this 做法很简单,直接上xaml. <Ellipse Width=" Height="> <Ellipse.Fill& ...

  7. Linux之文本处理命令

    Sort 将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按ASCII码值进行比较,最后将他们按升序输出. -u     在输出行中去除重复行 -r      改为降序(默认升序) ...

  8. jQuery toggleClass 源码解读

    toggleClass: function( value, stateVal ) { var type = typeof value;//值类型 if ( typeof stateVal === &q ...

  9. JS中对数组元素进行增删改移

    在js中对数组元素进行增删改移,简单总结了一下方法: 方法 说明 实例 push( ); 在原来数组中的元素最后面添加元素 arr.push("再见58"); unshift( ) ...

  10. 借助sass的Maps功能使得响应式代码更有条理

    原文来自这里 本文综合了原文(by Jonathan Suh)以及笔者自己的理解. Introduction 众所周知,写代码与写维护性高的代码是两回事.而涉及到响应式,代码又特别容易变的杂乱.借助s ...