<!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. 【JavaWeb】Spring相关错误记录

    Exception in thread "main" org.springframework.beans.factory.BeanDefinitionStoreException: ...

  2. SqlHelper类编写前奏：DataReader关闭链接出现问题

    SqlHelper是一个执行数据库操作的助手类,但是当我们没学过DataSet之前,要想使用using搭配SqlConnection和SqlCommand写出一个真正独立的SqlHelper都是不太可 ...

  3. java 责任链模式的三种实现

    责任链模式 责任链模式的定义:使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系, 将这个对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理他为止.这里就不再过多的介绍什么 ...

  4. 8个问题看你是否真的懂 JS

    文章转载: https://juejin.im/post/5d2d146bf265da1b9163c5c9#heading-20 原文地址: https://dev.to/aman_singh/so- ...

  5. Cisco Umbrella WLAN

    Cisco Umbrella WLAN在域名系统(DNS)级别提供云交付网络安全服务,可自动检测已知和紧急威胁. 此功能允许您在实际恶意攻击之前阻止托管恶意软件,僵尸网络和网络钓鱼的站点. Cisco ...

  6. Servlet里面request处理外部POST请求的输入流的工具类

    package etcom.servlet; import java.io.BufferedReader; import java.io.IOException; import java.io.Inp ...

  7. Excel实用知识1

    纯手打,可能有错别字,使用的版本是office2013 转载请注明出处 http://www.cnblogs.com/hnnydxgjj/p/6329509.html ,谢谢 使用现成的模板 ”开头的 ...

  8. 解决 Anaconda 3.7更新出现CondaHTTPError与SSLError

    1.问题描述: An HTTP error occurred when trying to retrieve this URL. HTTP errors are often intermittent, ...

  9. CPU的态

    CPU是OS最基本的硬件. cpu的态(mode): 1.mode展示CPU的工作状态 2.mode用来给对资源和指令权限的描述 分类: 1.kernel mode(核态): 权限最高 OS内核/管理 ...

  10. 「NOI2006」最大获利

    「NOI2006」最大获利 传送门 最小割. 对于每一组用户群 \(A_i, B_i, C_i\) ,连边 $S \to A_i, S \to B_i, $ 容量为成本,还有 \(i \to T\) ...