<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>菜鸟教程(runoob.com)</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <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>

        <div class="container">

            <h2>表格</h2>

            <p>联合使用所有表格类:</p>

            <table class="table table-striped table-bordered table-hover table-condensed">

                <thead>

                    <tr>

                        <th>#</th>

                        <th>Firstname</th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td>1</td>

                        <td>Anna</td>

                    </tr>

                    <tr>

                        <td>2</td>

                        <td>Debbie</td>

                    </tr>

                    <tr>

                        <td>3</td>

                        <td>John</td>

                    </tr>

                </tbody>

            </table>

        </div>

    </body>

</html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：联合使用所有表格类的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：让表格更加紧凑

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：在 <tbody> 内的任一行启用鼠标悬停状态

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：为所有表格的单元格添加边框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：为任意 <table> 添加基本样式 (只有横向分隔线)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：精简表格

    <!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. matplotlib添加坐标轴实现性格测试可视化

    一张图展示最终效果 皮一下很开心,标签名肯定不是用户想要的,所以在这里尝试了定制化功能 功能&方法: 定制化标签名/标签数量(4个/5个).实现方法:在第一个界面点击cancel按钮,进入修改 ...

  2. Linux - paste

    1. 概述 引入 碰到一个场景, 需要将两列合并成一列 vim 的 ex 貌似不太好做这个事 如果两列在一行里, ex 是可以做的 但问题就是, 两列不在一行里... sed 和 awk 应该是可以做 ...

  3. mount命令实际操作样例

    本篇文章主要介绍了如何在Linux(CentOS 7)命令行模式安装VMware Tools,具有一定的参考价值,感兴趣的小伙伴们可以参考一下. 本例中为在Linux(以CentOS 7为例)安装VM ...

  4. Wx-小程序-图片预览、保存

    点击图片预览 长按图片保存 点击按钮保存到手机相册 view: <!--wxml--> <text>点击图片预览.长按保存图片.点击按钮保存到系统相册</text> ...

  5. 深入delphi编程理解之消息（六）无窗口单元消息的创建、接受及dispatch模式编程

    一.程序界面 二.程序代码 (一).主界面代码 //========================================================================== ...

  6. CSS 动画过程及间接实现样式延时

    /* 过度动画自动归位 */ @keyframes animation_button_scene { 0% { background: #9cacb4; } 10% { /* 样式过度2 */ } 6 ...

  7. 洛谷 P5016 龙虎斗（模拟）

    嗯... 题目链接:https://www.luogu.org/problem/P5016 这道题是一道模拟,不要考虑复杂,直接暴力枚举每一个点,看看加上s2之后两个势力的差值,找最小,记录下标. 注 ...

  8. 获取 python linux Home目录

    #! /usr/bin/python # -*- coding: utf-8 -*- import os print os.environ['HOME'] print os.path.expandva ...

  9. 【STM32H7教程】第56章 STM32H7的DMA2D应用之刷色块，位图和Alpha混合

    完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第56章       STM32H7的DMA2D应用之刷色块, ...

  10. python中安装下载超时，下载不了安装包

    python3 -m pip install scapy 执行上面命令报错,下载超时,下载不了安装包 Collecting scapy WARNING: Retrying (Retry(total=4 ...