Bootstrap表格样式(附源码文件)--Bootstrap
1、表格默认样式
<h4>表格默认样式</h4>
<table><!--默认样式-->
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>
2、表格基础样式
<h4>表格基础样式</h4>
<table class="table"><!--表格基础样式-->
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>
3、带背景条纹的表格
<h4>带背景条纹</h4>
<table class="table table-striped">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>
4、带边框的表格
<h4>带边框的表格</h4>
<table class="table table-bordered">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>
5、显示鼠标悬停效果的表格
<h4>鼠标悬停的表格</h4>
<table class="table table-bordered table-hover">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>
6、紧凑型表格
<h4>紧凑型表格</h4>
<table class="table table-bordered table-condensed">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>
7、表格行内样式
<h4>表格行内样式</h4>
<table class="table table-bordered table-condensed">
<tr class="info"><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr class="success"><td>1</td><td>小玲</td><td>20</td></tr>
<tr class="warning"><td>1</td><td>小玲</td><td>20</td></tr>
<tr class="danger"><td>1</td><td>小玲</td><td>20</td></tr>
<tr class="active"><td>1</td><td>小玲</td><td>20</td></tr>
</table>
8、响应式表格
<h4>响应式表格</h4>
<div class="row">
<div class="col-sm-4">
<div class="table-responsive">
<table class="table table-bordered table-condensed">
<tr class="info"><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr class="success"><td>1</td><td>小玲</td><td>20</td></tr>
<tr class="warning"><td>1</td><td>小玲</td><td>20</td></tr>
<tr class="danger"><td>1</td><td>小玲</td><td>20</td></tr>
<tr class="active"><td>1</td><td>小玲</td><td>20</td></tr>
</table>
</div>
</div>
</div>
9、demo.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap表格样式</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<h4>表格默认样式</h4>
<table><!--默认样式-->
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>
<h4>表格基础样式</h4>
<table class="table"><!--表格基础样式-->
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>
<h4>带背景条纹</h4>
<table class="table table-striped">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>
<h4>带边框的表格</h4>
<table class="table table-bordered">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>
<h4>鼠标悬停的表格</h4>
<table class="table table-bordered table-hover">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>
<h4>紧凑型表格</h4>
<table class="table table-bordered table-condensed">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>
<h4>表格行内样式</h4>
<table class="table table-bordered table-condensed">
<tr class="info"><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr class="success"><td>1</td><td>小玲</td><td>20</td></tr>
<tr class="warning"><td>1</td><td>小玲</td><td>20</td></tr>
<tr class="danger"><td>1</td><td>小玲</td><td>20</td></tr>
<tr class="active"><td>1</td><td>小玲</td><td>20</td></tr>
</table>
<h4>响应式表格</h4>
<div class="row">
<div class="col-sm-4">
<div class="table-responsive">
<table class="table table-bordered table-condensed">
<tr class="info"><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr class="success"><td>1</td><td>小玲</td><td>20</td></tr>
<tr class="warning"><td>1</td><td>小玲</td><td>20</td></tr>
<tr class="danger"><td>1</td><td>小玲</td><td>20</td></tr>
<tr class="active"><td>1</td><td>小玲</td><td>20</td></tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Effect Picture：
源码文件下载：Bootstrap表格样式.zip
文章原创，转载请注明出处，感谢大家的合作！
Bootstrap表格样式(附源码文件)--Bootstrap的更多相关文章
- Bootstrap下拉菜单的使用(附源码文件)--Bootstrap
1.Bootstrap下拉菜单的使用,源代码如下:(如有不当之处,还望大佬们指出哈……) <!DOCTYPE html> <html lang="en"> ...
- 使用getCurrentPosition方法实时获取当前Geolocation信息（附源码文件）--html5、JavaScript
使用getCurrentPosition方法实时获取当前Geolocation信息: 1.getCurrentPosition方法的使用 navigator.geolocation.getCurren ...
- Bootstrap -- 表格样式、表单布局
Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...
- 《UNIX网络编程(第3版)》unp.h等源码文件的编译安装
操作系统:Mac OS X 10.11.5 1.下载书中的源代码:点击下载 2.切换到解压后的目录 unpv13e,先查看下 README,依次执行: ./configure cd lib make ...
- [C/C++] 各种C/C++编译器对UTF-8源码文件的兼容性测试（VC、GCC、BCB）
在不同平台上开发C/C++程序时,为了避免源码文件乱码,得采用UTF-8编码来存储源码文件.但是很多编译器对UTF-8源码文件兼容性不佳,于是我做了一些测试,分析了最佳保存方案. 一.测试程序 为了测 ...
- Erlang千万级用户游戏框架（Openpoker）源码文件分析清单
openpoker源码 erlang写的网游服务器源码,OpenPoker是一个大型多人扑克网游,内建支持了容错能力,负载平衡和无限制的规模大小.本文是openpoker源码文件功能的一个清单式说明: ...
- C++ 多源码文件简单组织
C++ 多源码文件简单组织 基本上和C的是一样的,只不过C++的方法要在类中声明.看一个简单实例.ainimal.h 类里面对外公开的信息. 点击(此处)折叠或打开 #ifndef _ANIMAL_ ...
- Python源码文件中带有中文时，输出乱码
Python源码文件中带有中文时,文件头应加注释: #!/usr/bin/env python # -*- coding: utf-8 -*- 第一行注释是为了告诉Linux/OS X系统,这是一个P ...
- 对threading模块源码文件的解读(不全)
# -*- coding: utf-8 -*- #python 27 #xiaodeng #对threading模块源码文件的解读(不全) import threading #类 #Thread() ...
随机推荐
- 图论中DFS与BFS的区别、用法、详解…
DFS与BFS的区别.用法.详解? 写在最前的三点: 1.所谓图的遍历就是按照某种次序访问图的每一顶点一次仅且一次. 2.实现bfs和dfs都需要解决的一个问题就是如何存储图.一般有两种方法:邻接矩阵 ...
- java四则运算生成器
题目描述: 从<构建之法>第一章的 "程序" 例子出发,像阿超那样,花二十分钟写一个能自动生成小学四则运算题目的命令行 "软件",满足以下需求: 除 ...
- 201521123022 《Java程序设计》 第8周学习总结
1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 Q1.List中指定元素的删除(题目4-1) Q1.1 实验总结 本题要求的是编写covnert ...
- 201521123114 《Java程序设计》第4周学习总结
1. 本章学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 学会了设计一个类时,尽量用private修饰属性,public修饰方法:类名的首字母要大写. ...
- 201521123044 《Java程序设计》第3周学习总结
1. 本章学习总结 2. 书面作业 1. 代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; ...
- #黑客攻防实战详解#[Chapter 1]
1.1 ①配置模拟入侵环境 ②配置网络拓扑
- Ajax练习题
1.使用Ajax跳转处理页面连接数据库,完成下拉列表 首页: <body> <select id="sel"> </select> < ...
- Mysql中设置默认时间为当前值
1.直接在创建表时添加该列并声明默认值,如下: CREATE TABLE `table1` ( `id` ) NOT NULL, `createtime` timestamp NULL default ...
- 一个非常好用的框架-AngularJS(一)
前 言 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.An ...
- angularui 分页
分页组件的使用 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> ...