<!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实现二维码的生成和解析：QRCode、zxing 两种方式

    第一种:QRCode.jar,使用QRCode生成和解析二维码 1.导入jar包  2.代码 (1)QRCodeUtil .java import com.swetake.util.Qrcode; i ...

  2. jquery-1.10.2_d88366fd.js和jquery-3.1.0.min.js 在用touch事件时候， event.changedTouches[0]报错的问题。

    1.animation动画:(注意如果这个动画是一开始就执行的,在pc端就要用px,在手机端用rem,如果在pc端展示页面,但用的是rem为单位,这时候动画一开始就执行,因为根字体大小还没准备好,动画 ...

  3. C语言-实现矩阵的转置-随机函数产生随机数并赋予数组中-190222

    //编写程序,实现矩阵的转置(行列互换). #include <stdio.h> #include <conio.h> #include <stdlib.h> ][ ...

  4. ProtoBuf试用与JSON的比较

    介绍 ProtoBuf 是google团队开发的用于高效存储和读取结构化数据的工具.什么是结构化数据呢,正如字面上表达的,就是带有一定结构的数据.比如电话簿上有很多记录数据,每条记录包含姓名.ID.邮 ...

  5. Docker 安装 Filebeat

    使用同版本镜像 7.4.1 1.下载Filebeat镜像 docker pull store/elastic/filebeat: docker images 2.下载默认官方配置文件wget http ...

  6. [蓝桥杯2017初赛]Excel地址

    题目描述 Excel单元格的地址表示很有趣,它使用字母来表示列号. 比如,A表示第1列,B表示第2列,Z表示第26列,AA表示第27列,AB表示第28列,BA表示第53列,.... 当然Excel的最 ...

  7. Java中获取MongoDB连接的方法

    首先是所需jar包,Maven中的配置如下: <dependency> <groupId>org.mongodb</groupId> <artifactId& ...

  8. 【SSM 项目】实战总结

           项目源代码

  9. 什么是SOA架构

    什么是SOA架构 SOA是Service-Oriented Architecture的首字母简称,它是一种支持面向服务的架构样式.从服务.基于服务开发和服务的结果来看,面向服务是一种思考方式.其实SO ...

  10. linux文件的查找和检索

    1)按文件属性查找 1)文件名: find  +  查找的目录  +   -name  +  "文件名" 文件名中可以使用通配符:*号表示多个,?号表示一个 2)文件大小: fin ...