<!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. ECMAScript中的箭头函数 (=>) 使用注意事项

    箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或 new.target.这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数. 箭 ...

  2. Java AQS 的胡言乱语修正版

    前言 适合读者:3 年以上经验的同学 谈到并发编程,基本上都会想到JDK 的 JUC 工具包,它包含 锁,并发工具类,原子类,线程池,还有阻塞队列,这是从网上找的一个大致的知识体系. 相信这些工具读者 ...

  3. 探索 Python + HyperLPR 进行车牌识别

    概要 HyperLRP是一个开源的.基于深度学习高性能中文车牌识别库,由北京智云视图科技有限公司开发,支持PHP.C/C++.Python语言,Windows/Mac/Linux/Android/IO ...

  4. python调用scala或java包

    项目中用到python操作hdfs的问题,一般都是使用python的hdfs包,然而这个包初始化起来太麻烦,需要: from pyspark impport SparkConf, SparkConte ...

  5. 吴裕雄--天生自然Python Matplotlib库学习笔记：matplotlib绘图（1）

    Matplotlib 可能是 Python 2D-绘图领域使用最广泛的套件.它能让使用者很轻松地将数据图形化,并且提供多样化的输出格式. from pylab import * size = 128, ...

  6. 安装pytorch

    安装cpu版本的 conda install pytorch-cpu torchvision-cpu -c pytorch 安装gpu版本的 conda install pytorch torchvi ...

  7. 安装go和goland

    1.建议去go语言中文网下载,网址:https://studygolang.com/dl ,下图是下载页面及包介绍 2.Windows版安装 3.在cmd命令行窗口输入“go version”可以查看 ...

  8. yp寒假训练一

    19年东北四省省赛 做了J G C 补了E H J签到题 G 题意: 给n个正方形的两个斜对角点坐标,问最小的移动可以重叠(移动上下左右一格) 思路: 一开始想的是中心pos移动,但是可能有小数,而且 ...

  9. vue下canvas绘制矩形

    起因:根据项目需求本人写了一个绘制矩形的组件.功能:在图片中绘制矩形,根据图片大小进行自适应展示,获取图片矩形坐标.思路:首先定义一个固定大小的DIV,DIV标签中有监测鼠标变化的四个事件moused ...

  10. 【PAT甲级】1067 Sort with Swap(0, i) (25 分)

    题意: 输入一个正整数N(<=100000),接着输入N个正整数(0~N-1的排列).每次操作可以将0和另一个数的位置进行交换,输出最少操作次数使得排列为升序. AAAAAccepted cod ...