<!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. js函数声明外面使用小括号括起来再接一个小括号的写法

    js函数声明外面使用小括号括起来再接一个小括号的写法 (function(){})(); (function(){}()); !function(){}(); 总结ps:意思将函数声明变成,直接执行的 ...

  2. EF 查询表达式 join

    数据源: 1.无into,相当于 inner join var query = from p in context.P join s in context.S on p.PID equals s.PI ...

  3. Oracle_11g_x64的安装与完全卸载

    安装: https://jingyan.baidu.com/article/363872eccfb9266e4aa16f5d.html 完全卸载: https://blog.csdn.net/m0_3 ...

  4. [题解] 2019牛客暑期多校第三场H题 Magic Line

    题目链接:https://ac.nowcoder.com/acm/contest/883/H 题意:二维平面上有n个不同的点,构造一条直线把平面分成两个点数相同的部分. 题解:对这n个点以x为第一关键 ...

  5. splash-简介及入门

    splash 1.      splash简介 Splash是一个JavaScript渲染服务,是一个带有HTTP API的轻量级浏览器,同时它对接了Python中的Twisted和QT库.利用它,我 ...

  6. python查看包路径及对象的所有方法名

    进入python环境: python 输入如下代码: import sys sys.path = sys.path[:] import django print(django.__path__) 得到 ...

  7. 802.1X与Cisco基于身份的网络服务（IBNS）

    Cisco基于身份的网络服务(Identity-Based Networking Services,IBNS)是一种以IEEE802.1X标准为基础的安全架构,具有认证.用户策略.访问控制等多种功能, ...

  8. RFID学习

    RFID:射频识别卡有读卡器和电子标签(有源/无源/半有源)组成,工作频率有LF/HF/UHF/MF,低频的通讯距离近(1m)常用来做门禁:高频的通讯距离远可以批量读取. 无源的轻巧/防拆一致性好,在 ...

  9. 【PAT甲级】1047 Student List for Course (25 分)

    题意: 输入两个正整数N和K(N<=40000,K<=2500),接下来输入N行,每行包括一个学生的名字和所选课程的门数,接着输入每门所选课程的序号.输出每门课程有多少学生选择并按字典序输 ...

  10. zip 多维

    ll=zip([[1,3],[2,4]],[[88,99],[66,55]])a=zip(*ll)# print(list(a)) #[([1, 3], [2, 4]), ([88, 99], [66 ...