<!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. oracle关键字使用

    v_Describe:=substr(v_Describe,0,length(v_Describe)-1); substr(目标内容,开始位置,截取长度) length(要计算的内容长度) 上述语句可 ...

  2. Codeforces 682 D. Alyona and Strings (dp)

    题目链接:http://codeforces.com/contest/682/problem/D 给你两个字符串,求两个字符串中顺序k个的相同子串 长度之和.(注意是子串) dp[i][j][k][0 ...

  3. uva 558 - Wormholes(Bellman Ford判断负环）

    题目链接:558 - Wormholes 题目大意:给出n和m,表示有n个点,然后给出m条边,然后判断给出的有向图中是否存在负环. 解题思路:利用Bellman Ford算法,若进行第n次松弛时,还能 ...

  4. OC：习题来自平时搜索

    == 第一部分 ==  类变量的@protected ,@private,@public,@package,声明各有什么含义?写一个标准宏MIN,这个宏输入两个参数并返回较小的一个?面向对象的三大特征 ...

  5. OC：基础学习

    OC面向对象的编程语言思想 类与对象.继承与实例化.属性点语法.内存管理.字符串.可见度. 类是一组具有相同特征和行为的事物的抽象 OC的与C相比所具有的新的特点: 定义新的类.类的实例和方法.方法的 ...

  6. HTML第五天学习笔记

    今天先是学习了基础的css样式 <html> <head> <title></title> <meta http-equiv = "co ...

  7. 推荐第三方Oracle客户端查询工具

    1.SqlDbx 官方地址:http://www.sqldbx.com/personal_edition.htm 2.devart http://www.devart.com/dbforge/orac ...

  8. cocos2d-x 2.2 资源更新AssetsManager例子代码

    转自:http://www.58player.com/blog-2327-601.html // // UpgradeLayer.h // AmazeDemo // // Created by lsw ...

  9. jQuery对象入门级介绍

    你是否曾经见过像  $(".cta").click(function(){})这样的JavaScrip代码?或许你还会思考下 $('#X') 是什么,如果看到这些你都觉得摸不着头脑 ...

  10. hdu 5265 pog loves szh II STL

    pog loves szh II Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php? ...