<!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. Go类型断言

    package main import ( "fmt" ) type Point struct { x int y int } func main() { var a interf ...

  2. python：字符串类型

    字符串概念 字符串:由单个字符组成的一个序列, 字符串是一个不可变的类型 形式: 非原始字符串: 单引号:单引号包起来的一段字符就是字符串 双引号:和单引号一样 三引号:三引号包括的字符串可以换行,保 ...

  3. 前x个数据中至少有m个元素最小值与最大值之差不超过K

    题意 给一组数据,从左到右开始,寻找最小的x,使得第1个元素到第x个元素中,至少存在m个数据,最小值与最大值之差不超过K. INPUT 第一行是T,代表数据组数 每组数据的第一行是三个整数,n.m.k ...

  4. windows 删除进程

    win+R打开doc窗口 netstat -ano |findstr "8888" tskill 10120   结束进程

  5. PTA的Python练习题（十四）

    第4章-10 最大公约数和最小公倍数 m,n=map(int,input().split()) min=0 a=b=0 if m >n: min=m else: min=n for i in r ...

  6. Spring Boot Thymeleaf 模板引擎的使用

    Spring Boot 中可以支持很多模板引擎,Thymeleaf 是 Spring Boot 官方推荐使用的模板引擎,虽然在社区 Thymeleaf 的性能被许多人所吐糟,但这仍然不影响大量的开发人 ...

  7. [蓝桥杯2017初赛]k倍区间 前缀和

    题目描述 给定一个长度为N的数列,A1, A2, ... AN. 如果其中一段连续的子序列Ai, Ai+1, ... Aj(i <= j)之和是K的倍数,我们就称这个区间[i, j]是K倍区间. ...

  8. base64，base32bit加密解密

    import base64 str='admin' str=str.encode('utf-8') #加密 bs64=base64.b64encode(str) #解密 debs64=base64.b ...

  9. redhat7.6 crontab 服务,周期性任务

    系统默认安装开启 systemctl status crond.service 查看周期性任务(最多每隔1分钟做周期性任务) crontab   -l 系统自身的周期性任务 配置周期性任务 cront ...

  10. MySQL - 设置UTF-8编码

    1. 在Windows上,安装时请选择UTF-8编码,以便正确地处理中文. 在Mac或Linux上,需要编辑MySQL的配置文件,把数据库默认的编码全部改为UTF-8.MySQL的配置文件默认存放在/ ...