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的更多相关文章

  1. Bootstrap下拉菜单的使用(附源码文件)--Bootstrap

    1.Bootstrap下拉菜单的使用,源代码如下:(如有不当之处,还望大佬们指出哈……) <!DOCTYPE html> <html lang="en"> ...

  2. 使用getCurrentPosition方法实时获取当前Geolocation信息（附源码文件）--html5、JavaScript

    使用getCurrentPosition方法实时获取当前Geolocation信息: 1.getCurrentPosition方法的使用 navigator.geolocation.getCurren ...

  3. Bootstrap -- 表格样式、表单布局

    Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...

  4. 《UNIX网络编程(第3版)》unp.h等源码文件的编译安装

    操作系统:Mac OS X 10.11.5 1.下载书中的源代码:点击下载 2.切换到解压后的目录 unpv13e,先查看下 README,依次执行: ./configure cd lib make ...

  5. [C/C++] 各种C/C++编译器对UTF-8源码文件的兼容性测试（VC、GCC、BCB）

    在不同平台上开发C/C++程序时,为了避免源码文件乱码,得采用UTF-8编码来存储源码文件.但是很多编译器对UTF-8源码文件兼容性不佳,于是我做了一些测试,分析了最佳保存方案. 一.测试程序 为了测 ...

  6. Erlang千万级用户游戏框架（Openpoker）源码文件分析清单

    openpoker源码 erlang写的网游服务器源码,OpenPoker是一个大型多人扑克网游,内建支持了容错能力,负载平衡和无限制的规模大小.本文是openpoker源码文件功能的一个清单式说明: ...

  7. C++ 多源码文件简单组织

    C++ 多源码文件简单组织 基本上和C的是一样的,只不过C++的方法要在类中声明.看一个简单实例.ainimal.h  类里面对外公开的信息. 点击(此处)折叠或打开 #ifndef _ANIMAL_ ...

  8. Python源码文件中带有中文时，输出乱码

    Python源码文件中带有中文时,文件头应加注释: #!/usr/bin/env python # -*- coding: utf-8 -*- 第一行注释是为了告诉Linux/OS X系统,这是一个P ...

  9. 对threading模块源码文件的解读(不全)

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #对threading模块源码文件的解读(不全) import threading #类 #Thread() ...

随机推荐

  1. MPLS VPN随堂笔记3

    跨域 ASBR之间运行MPBGP 1.配置AS内部IGP保证环回口互相可达,同时建立LDP邻居 (优先启用 mpls label rang 16 100)方便查看实验现象 2.配置PE1-PE2 PE ...

  2. less和scss

    一.less基础语法 1.声明变量:@变量名:变量值:      使用变量:@变量名; 2.混合(Mixins) 1)无参混合 声明: .class{} 调用:在选择器中,使用.class;直接调用 ...

  3. Java学习3——java介绍

    Java程序运行过程: Java两种核心机制: Java虚拟机(Java Virtual Machine),提供程序运行的解释环境,使Java成为一种与平台无关的语言. Java虚拟机可以理解成一个以 ...

  4. list后台转化为JSON的方法ajax

    导入alibaba的fastJson包 后台: protected void doGet(HttpServletRequest request, HttpServletResponse respons ...

  5. 201521123008<java程序设计>第三周实验总结

    1.本周学习总结 2.书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; pub ...

  6. 201521123077 《Java程序设计》第1周学习总结

    1. 本章学习总结 java语言的历史 dos下运行 java文件 Math ,String ,Scanner,Interger等常用类的使用 jdk,jre,jvm等概念的了解 classpath, ...

  7. eclipse: eclipse创建java web项目

    Eclipse创建java web工程 eclipse版本:eclipse-jee-4.5-win32-x64 tomcat版本:apache-tomcat-7.0.63-windows-x64 jd ...

  8. temp-重庆农商行二次出差

    1, 住宿(远舰商务酒店) 与胡仕川一起住   1722房间,  178-27=151(返现后). 7月30日   7月31日  8月1日 8月2日 8月3日 2, 住宿(郎菲酒店)一个人住, 158 ...

  9. hdfs存取文件机制

    HDFS和HBase是Hadoop中两种主要的存储文件系统,两者适用的场景不同,HDFS适用于大文件存储,HBASE适用于大量小文件存储.本文主要讲解HDFS文件系统中客户端是如何从Hadoop集群中 ...

  10. 关于IOS的屏幕适配（iPhone）——Auto Layout和Size Classes

    Auto Layout和Size Classes搭配使用极大的方便了开发者,具体如何使用Auto Layout和Size Classes大家可以参考其他文章或者书籍,这里只提一点,在我们设置Size ...