<!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. apache配置虚拟主机后，启动速度慢

    apache配置虚拟主机后,启动速度慢且提示“the requested operation has failed” 可以通过在cmd下启动,来查找问题(命令中的“apache2.2”,是服务名,根据 ...

  2. mongodb高级操作及在Java企业级开发中的应用

    Java连接mongoDB Java连接MongoDB需要驱动包,个人所用包为mongo-2.10.0.jar.可以在网上下载最新版本. package org.dennisit.mongodb.st ...

  3. [MySQL] 字符集和排序方式

    字符串类型 MySQL的字符串分为两大类: 1)二进制字符串:即一串字节序列,对字节的解释不涉及字符集,因此它没有字符集和排序方式的概念 2)非二进制字符串:由字符构成的序列,字符集用来解释字符串的内 ...

  4. Lync2010升级到2013之账户启用！

    打开ADUC,将用户添加到 csadministrator 组中:

  5. AS:加载新版本的SWF文件。

    方案一: 文件名+版本号,区别对待不同的版本控制,有设定值后会加上_v_x的后缀名.如:加载主文件 main.swf, 被命名为:Main_v_60.swf . 方案二: loader.load(ne ...

  6. 异步文件上传组件 Uploader

    Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...

  7. Extjs datefield 日历控件中文显示

    原版的日历控件选择的时候是英文的,不是中文的.后来将在extjs包中src下locale下ext-lang-zh_CN.js引用进来就汉化了

  8. C++学习笔记之输入、输出和文件

    一.流的概念 数据从内存的一个地址移动到另一个地址称为数据流动——流操作 流操作是通过缓冲区(buffer)机制实现的. 缓冲区:内存的一块区域——用作文件与内存交换数据. 数据从文件中读出:文件 → ...

  9. CodeForces 173E Camping Groups 离线线段树 树状数组

    Camping Groups 题目连接: http://codeforces.com/problemset/problem/173/E Description A club wants to take ...

  10. C#中简单调用MD5方法以及MD5简介

    MD5简介:          MD5的全称是Message-Digest Algorithm 5,在90年代初由MIT的计算机科学实验室和RSA Data Security Inc发明,经MD2.M ...