<!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. SpriteKit

    [SpriteKit] Sprite Kit provides a graphics rendering and animation infrastructure that you can use t ...

  2. C++11模板的别名

    [C++模板的别名] 参考:http://zh.wikipedia.org/wiki/C++0x#.E6.A8.A1.E6.9D.BF.E7.9A.84.E5.88.A5.E5.90.8D

  3. Python字典 (dictionary)

    字典dict,是Python唯一的标准mapping类型,也是内置在Python解释器中的. mapping object把一个可哈希的值(hashable value)映射到一个任意的object上 ...

  4. tryparse的用法，^0*[1-9]\d*$

    Entry entry = new Entry(); Int32 iParam; if(Int32.TryParse(entry.ajh,out iParam)) { /*如果转换成功就输出iPara ...

  5. Android 通过xml 自定义图片

    <?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http:/ ...

  6. C#对HTML转译需要注意的问题

    在做B/S程序时我们多少会用到一点HTML特殊符号转译. 如:“&”——>“&” , "<"——>"<" , " ...

  7. 计算Excel中的Sheet个数

    $strpath="d:\ee.xlsx"$excel=new-object -comobject excel.application$WorkBook = $excel.Work ...

  8. mina高并发短连接导致java.io.IOException: Too many open files解决方案

    http://marsvaadin.iteye.com/blog/1698924 mina性能测试 http://hi.baidu.com/rendong/item/bb5d2b0e4563c76dd ...

  9. Android Studio开发JNIproject

    使用Android Sutdio创建一个新的project后,接下来记录创建NDKproject的基本步骤. 本文将达到: 1. 创建NDKproject 2. 在JNI中输出Log语句 3. 指定编 ...

  10. Qt学习之自定义窗口部件

    自定义Qt窗口部件 实现一个十六进制的SpinBox,一般SpinBox只支持十进制整数,但是可以子类化方法实现该功能 需重新实现以下虚函数 virtual QString textFromValue ...