<!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. 《一篇文章读懂HTTPS及其背后的加密原理》阅读笔记

    HTTPS(Hypertext Transfer Protocol Secure,超文本传输安全协议),是以安全为目标的HTTP通道,简单讲是HTTP的安全版.这篇文章深入介绍了它的原理. 当我们适用 ...

  2. 【Android】数据存储和访问

    一.SharedPreferences 2.SQLite

  3. Fluent_Python_Part3函数即对象，07-closure-decoration，闭包与装饰器

    第7章 函数装饰器和闭包 装饰器用于在源码中"标记"函数,动态地增强函数的行为. 了解装饰器前提是理解闭包. 闭包除了在装饰器中有用以外,还是回调式编程和函数式编程风格的基础. 1 ...

  4. Python 爬取 热词并进行分类数据分析-[App制作]

    日期:2020.02.14 博客期:154 星期五 [本博客的代码如若要使用,请在下方评论区留言,之后再用(就是跟我说一声)] 所有相关跳转: a.[简单准备] b.[云图制作+数据导入] c.[拓扑 ...

  5. 创业学习---今日头条创业过程分析---HHR计划

    本文搜集和整理了今日头条创业的一些关键点的资料------by 春跃(本文的主要观点都是搜集整理,所以不得本人同意不得转载) 一,18年之前的今日头条创业时间表: 1,张一鸣参与创业的履历:酷讯,饭否 ...

  6. cf--TV Subscriptions (Hard Version)

    time limit per test:2 seconds memory limit per test:256 megabytes input:standard input output:standa ...

  7. 吴裕雄--天生自然Numpy库学习笔记：NumPy 切片和索引

    ndarray 数组可以基于 0 - n 的下标进行索引,切片对象可以通过内置的 slice 函数,并设置 start, stop 及 step 参数进行,从原数组中切割出一个新数组. import ...

  8. Docker 安装 Kibana

    使用和 elasticsearch 相同版本镜像 7.4.1 (不一样可能会出现问题) 1.下载Kibana镜像  # 下载Kibana镜像 docker pull kibana: # 查看镜像 do ...

  9. CSS的精灵技术

  10. pip源、搭建虚拟环境、git

    一.pip源 1.1 介绍 1.采用国内源,加速下载模块的速度2.常用pip源:-- 豆瓣:https://pypi.douban.com/simple-- 阿里:https://mirrors.al ...