<!DOCTYPE HTML>

 <html>

 <head>

     <meta charset="utf-8">

     <title>基础表格</title>

     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

 </head>

 <body>

 <h1>基础表格</h1>

 <table class="table">

     <thead>

     <tr>

         <th>表格标题</th>

         <th>表格标题</th>

         <th>表格标题</th>

     </tr>

     </thead>

     <tbody>

     <tr>

         <td>表格单元格</td>

         <td>表格单元格</td>

         <td>表格单元格</td>

     </tr>

     <tr>

         <td>表格单元格</td>

         <td>表格单元格</td>

         <td>表格单元格</td>

     </tr>

     </tbody>

 </table>

 <h1>斑马线表格</h1>

 <table class="table table-striped">

     <thead>

     <tr>

         <th>表格标题</th>

         <th>表格标题</th>

         <th>表格标题</th>

     </tr>

     </thead>

     <tbody>

     <tr>

         <td>表格单元格</td>

         <td>表格单元格</td>

         <td>表格单元格</td>

     </tr>

     <tr>

         <td>表格单元格</td>

         <td>表格单元格</td>

         <td>表格单元格</td>

     </tr>

     <tr>

         <td>表格单元格</td>

         <td>表格单元格</td>

         <td>表格单元格</td>

     </tr>

     <tr>

         <td>表格单元格</td>

         <td>表格单元格</td>

         <td>表格单元格</td>

     </tr>

     </tbody>

 </table>

 <h1>带边框的表格</h1>

 <table class="table table-bordered">

     <thead>

     <tr>

         <th>表格标题</th>

         <th>表格标题</th>

         <th>表格标题</th>

     </tr>

     </thead>

     <tbody>

     <tr>

         <td>表格单元格</td>

         <td>表格单元格</td>

         <td>表格单元格</td>

     </tr>

     <tr>

         <td>表格单元格</td>

         <td>表格单元格</td>

         <td>表格单元格</td>

     </tr>

     <tr>

         <td>表格单元格</td>

         <td>表格单元格</td>

         <td>表格单元格</td>

     </tr>

     <tr>

         <td>表格单元格</td>

         <td>表格单元格</td>

         <td>表格单元格</td>

     </tr>

     </tbody>

 </table>

 <h1>鼠标悬浮高亮的表格</h1>

 <table class="table table-striped table-bordered table-hover">

     <thead>

     <tr>

         <th>表格标题</th>

         <th>表格标题</th>

         <th>表格标题</th>

     </tr>

     </thead>

     <tbody>

     <tr>

         <td>表格单元格</td>

         <td>表格单元格</td>

         <td>表格单元格</td>

     </tr>

     <tr>

         <td>表格单元格</td>

         <td>表格单元格</td>

         <td>表格单元格</td>

     </tr>

     <tr>

         <td>表格单元格</td>

         <td>表格单元格</td>

         <td>表格单元格</td>

     </tr>

     <tr>

         <td>表格单元格</td>

         <td>表格单元格</td>

         <td>表格单元格</td>

     </tr>

     </tbody>

 </table>

 <h1>紧凑型表格</h1>

 <table class="table table-condensed">

     <thead>

     <tr>

         <th>表格标题</th>

         <th>表格标题</th>

         <th>表格标题</th>

     </tr>

     </thead>

     <tbody>

     <tr>

         <td>表格单元格</td>

         <td>表格单元格</td>

         <td>表格单元格</td>

     </tr>

     <tr>

         <td>表格单元格</td>

         <td>表格单元格</td>

         <td>表格单元格</td>

     </tr>

     <tr>

         <td>表格单元格</td>

         <td>表格单元格</td>

         <td>表格单元格</td>

     </tr>

     <tr>

         <td>表格单元格</td>

         <td>表格单元格</td>

         <td>表格单元格</td>

     </tr>

     </tbody>

 </table>

 <h1>响应式表格</h1>

 <div class="table-responsive">

     <table class="table table-bordered">

         <thead>

         <tr>

             <th>表格标题</th>

             <th>表格标题</th>

             <th>表格标题</th>

         </tr>

         </thead>

         <tbody>

         <tr>

             <td>表格单元格</td>

             <td>表格单元格</td>

             <td>表格单元格</td>

         </tr>

         <tr>

             <td>表格单元格</td>

             <td>表格单元格</td>

             <td>表格单元格</td>

         </tr>

         <tr>

             <td>表格单元格</td>

             <td>表格单元格</td>

             <td>表格单元格</td>

         </tr>

         <tr>

             <td>表格单元格</td>

             <td>表格单元格</td>

             <td>表格单元格</td>

         </tr>

         </tbody>

     </table>

 </div>

 </body>

 </html>

bootstrap表格多样式及代码的更多相关文章

  1. Bootstrap CSS 栅格、代码和表格

    一.bootstrap栅格 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. Bootstrap 网格系统(G ...

  2. Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结

    Bootstrap表格插件bootstrap-table配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...

  3. 实现Bootstrap表格拖拽

    实现Bootstrap表格拖拽: 需要引入jquery.min.js.bootstrap相关文件,以及jquery.dragsort-0.5.2.js 代码如下: <html> <h ...

  4. Bootstrap 表格 笔记

    Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. < ...

  5. 普通table表格样式及代码大全(全)

    普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#00 ...

  6. 【原创】bootstrap框架的学习 第七课 -[bootstrap表格]

    Bootstrap 表格 标签 描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody& ...

  7. Bootstrap表格样式(附源码文件)--Bootstrap

    1.表格默认样式 <h4>表格默认样式</h4><table><!--默认样式--> <tr><th>序号</th> ...

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

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

  9. bootstrap表格添加按钮、模态框实现

    bootstrap表格添加按钮.模态框实现 原创 2017年07月20日 17:35:48 标签: bootstrap 1723 bootstrap表格添加按钮.模态框实现 - 需求: 需要表格后面每 ...

随机推荐

  1. ilog

    PCISV7-VHL [2015-11-13 13:51:36,038]>>>INFO>>>[ com.isoftstone.pcis.policy.app.pla ...

  2. STM32F407存储器和总线架构

    http://www.cnblogs.com/ransn/p/5654068.html

  3. labview图形和图表的类型

    http://zone.ni.com/reference/zhs-XX/help/371361L-0118/lvconcepts/types_of_graphs_and_charts/ LabVIEW ...

  4. POJ2533Longest Ordered Subsequence（DP）

    http://poj.org/problem?id=2533 在经典不过的DP题目了.... #include <map> #include <set> #include &l ...

  5. POJ 3175 Finding Bovine Roots （暴力求解）

    题意:给定一串数字,问你这是一个数字开方根得到的前几位,问你是哪个数字.析:如果 x.123... 这个数字的平方是一个整数的话,那必然sqr(x.124) > ceil(sqr(x.123)) ...

  6. UVa 11536 Smallest Sub-Array (水题， 滑动窗口)

    题意:给定 n 个由0~m-1的整数组成的序列,输入 k ,问你找出连续的最短序列,使得这个序列含有1-k的所有整数. 析:这个题,很简单么,只要从头开始扫一遍就OK,时间复杂度为O(n). 代码如下 ...

  7. UITextfiled子视图被剪切

    一般情况下,如果在view1上面添加了view2,但是view2超出了view1,也会在屏幕上面显示超出的部分 例如: UIButton *button =[[UIButton alloc]initW ...

  8. 圣杯VS双飞翼

    双飞翼: <!DOCTYPE html> <html> <head> <title>推荐封面</title> <meta name=& ...

  9. Innodb的事务与日志 & JTA事务

    InnoDB引擎的行锁是通过加在什么上完成(或称实现)的?为什么是这样子的 通过   行多版本控制 MyISAM                  Innodb 事物支持 :   不支持       ...

  10. Expression<Func<T,TResult>>和Func<T,TResult> 与AOP与WCF

    1>>Expression<Func<T,TResult>>和Func<T,TResult>http://www.cnblogs.com/xcsn/p/ ...