<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Bootstrap 实例 - 上下文类</title>

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

        <table class="table">

            <caption>上下文表格布局</caption>

            <thead>

                <tr>

                    <th>产品</th>

                    <th>付款日期</th>

                    <th>状态</th>

                </tr>

            </thead>

            <tbody>

                <tr class="active">

                    <td>产品1</td>

                    <td>23/11/2013</td>

                    <td>待发货</td>

                </tr>

                <tr class="success">

                    <td>产品2</td>

                    <td>10/11/2013</td>

                    <td>发货中</td>

                </tr>

                <tr  class="warning">

                    <td>产品3</td>

                    <td>20/10/2013</td>

                    <td>待确认</td>

                </tr>

                <tr  class="danger">

                    <td>产品4</td>

                    <td>20/10/2013</td>

                    <td>已退货</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：上下文类的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：联合使用所有表格类

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：让表格更加紧凑

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：在 <tbody> 内的任一行启用鼠标悬停状态

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：为所有表格的单元格添加边框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：为任意 <table> 添加基本样式 (只有横向分隔线)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：精简表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：悬停表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：边框表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Java 枚举（enum）的学习

    Java 枚举(enum)的学习 本文转自:https://blog.csdn.net/javazejian/article/details/71333103 枚举的定义 在定义枚举类型时我们使用的关 ...

  2. 局域网内Linux下开启ftp服务的“曲折路”和命令复习

    今天主要学习了Linux下网络配置以及vsftp(FTP)和samba的服务配置,学习起来,难度也就一般,并没有特别难,可是在可以做实验的时候,却并没有自己想像的那么顺利,可见,很多事情看起来不难,做 ...

  3. CSS：定位概述

    background-position 背景定位 如果,说浮动, 关键在一个 "浮" 字上面, 那么 我们的定位,关键在于一个 "位" 上. PS: 定位是我们 ...

  4. 爬虫必备工具-chrome 开发者工具

    在某个网站上,分析和抓取数据,我们用的最多的工具就是 Chrome 开发者工具 01 元素面板 通过元素(Element)面板,我们能查看发哦想抓取页面渲染内容所在的标签.使用什么 CSS 属性(例如 ...

  5. python上传文件接口

    1.由于公司做接口测试,遇到了上传文件,一直搞了好久,原来是加了头部的原因def test_79(self): '''导入配置文件''' request = e['mysqlshujuku'] url ...

  6. SSL 证书格式普及，PEM、CER、JKS、PKCS12

    根据不同的服务器以及服务器的版本,我们需要用到不同的证书格式,就市面上主流的服务器来说,大概有以下格式: .DER .CER,文件是二进制格式,只保存证书,不保存私钥. .PEM,一般是文本格式,可保 ...

  7. Java学习资源 - J2SE

    java.lang包教程 Java集合类详解 Java回顾之集合 Java回顾之序列化 Java回顾之反射 深入理解Java:类加载机制及反射 Java 下高效的反射工具包 ReflectASM 使用 ...

  8. PhpStorm For Mac 安装使用及 Php 开发的 ‘Hello World’

    PHP全称为:Hypertext Preprocessor,中文名为:『超文本预处理 器』是一种通用开源脚本语言,主要用于Web应用开发(俗称做网站或 者做后台!) 编译软件:PHPStorm for ...

  9. jquery中 $(xxx).each() 和 $.each()的区别，以及enter键一键登录

    1.$().each 在dom处理上面用的较多.如果页面有多个input标签类型为text,对于这时用$().each来处理多个text,例如: $("input[type=’text’]& ...

  10. Centos6.X创建Oracle用户

    第一步:创建数据表空间 第二步:创建临时表空间 第三步:创建用户并指定表空间 第四步:给用户授予权限 1.创建数据表空间 格式: create tablespace 表间名 datafile ‘数据文 ...