<!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. next_permutation的使用-Hdu1027

    Ignatius and the Princess II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ( ...

  2. leetcode菜鸡斗智斗勇系列（8）--- Find N Unique Integers Sum up to Zero

    1.原题: https://leetcode.com/problems/find-n-unique-integers-sum-up-to-zero/ Given an integer n, retur ...

  3. java集合知识点

    若不重写equals方法,则调用的是object对象的equals方法,相当于==比较,比较的是对象的内存地址 |------Collection接口:单列集合,用来存储一个一个对象 |------L ...

  4. 吴裕雄--天生自然TensorFlow2教程：梯度下降简介

    import tensorflow as tf w = tf.constant(1.) x = tf.constant(2.) y = x * w with tf.GradientTape() as ...

  5. Cocos纹理理解

    原文:https://blog.csdn.net/u010223072/article/details/78287294 理论要点 要点一: 文件格式与像素格式的区别:文件格式是图像为了存储信息而使用 ...

  6. Java学习资源 - J2EE

    java Web开发基础(一)工程项目文档结构 ========rmi=========== Java RMI 框架(远程方法调用) java RMI原理详解 深究Java中的RMI底层原理 ==== ...

  7. 温湿度传感器AM2302(DH22)

    AM2302   3.3V - 5.5V,建议供电电压为 5V单总线通信模式时,SDA 上拉(开漏)后与微处理器的 I/O 端口相连.单总线通信特殊说明: 0.功耗待机40~50uA;测量1~1.5m ...

  8. 研发2nm芯片，台积电如何做到天下第一？

    日前,台积电宣布,正式启动2nm芯片工艺的研发,工厂将会设置在台湾新竹的南方科技园,预计2024年投入量产,发言人称:2nm工艺是一个重要节点,目标是比3nm制程缩小23%.科技先锋总会打脸分析专家, ...

  9. 使用maven搭建web项目

    在pom.xml中添加java ee相关的三个依赖包:<scope> jar的有效范围 provided 表示编译期生效,不会打包发布到 tomcat 中 <properties&g ...

  10. PAT甲级2019冬季考试题解

    A Good In C纯模拟题,用string数组读入数据,注意单词数量的判断 #include<bits/stdc++.h> using namespace std; ; ][]; in ...