<!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. LabView中，下拉列表和枚举有什么区别？

    枚举变量只能针对无符号整型数据U32,U16,U8; 而下拉列表则可以包括扩展精度,双精度,单精度,64位.长.双字节.单字节整型以及各种无符号整型(如下图黑色部分). 下拉列表

  2. 【Cocos2d-X开发学习笔记】第18期：动作类之改变动作对象、函数回调动作以及过程动作的使用

    本系列学习教程使用的是cocos2d-x-2.1.4(最新版为3.0alpha0-pre) ,PC开发环境Windows7,C++开发环境VS2010 一.改变动作执行对象 CCTargetedAct ...

  3. POJ3080Blue Jeans（暴力）

    开始做字符串专题,地址 第一题水题,暴力就可以做 #include <map> #include <set> #include <stack> #include & ...

  4. CString的GetBuffer用法，GetBuffer本质，GetBuffer常见问题解决方法

    一．函数原型 CString::GetBuffer LPTSTR GetBuffer( int nMinBufLength ); throw( CMemoryException ); Return V ...

  5. CStdioFile

    CStdioFile类的声明保存再afx.h头文件中. CStdioFile类继承自CFile类,CStdioFile对象表示一个用运行时的函数fopen打开的c运行时的流式文件.流式文件是被缓冲的, ...

  6. angular实践第一弹：选项卡开发

    在学习angular的过程中,实践是最好的方法. 在开发选项卡的过程中,不需要再像jquery一样以DOM操作为核心,那什么样的情况是以DOM操作为核心的Jquery的思想呢? 一想到改变什么,就想设 ...

  7. preventDefault stopPropagation??

    棒棒哒~ event.preventDefault https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault stop ...

  8. cocos2dx中加入unzip

    作者:HU 转载请注明,原文链接:http://www.cnblogs.com/xioapingguo/p/4037323.html  cocos2dx中没有直接解压文件的,自己网上找了个,记录一下. ...

  9. linux 硬链接和软链接(转)

    1.Linux链接概念Linux链接分两种，一种被称为硬链接（Hard Link），另一种被称为符号链接（Symbolic Link）。默认情况下，ln命令产生硬链接。 【硬连接】硬连接指通过索引节点 ...

  10. jquery 预览提交的表单

    预览表单,查看后确认提交或者返回重填 演示 XML/HTML Code <form class="mform" id="myform" method=&q ...