<!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 table-hover">

            <caption>悬停表格布局</caption>

            <thead>

                <tr>

                    <th>名称</th>

                    <th>城市</th>

                    <th>邮编</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>Tanmay</td>

                    <td>Bangalore</td>

                    <td>560001</td>

                </tr>

                <tr>

                    <td>Sachin</td>

                    <td>Mumbai</td>

                    <td>400003</td>

                </tr>

                <tr>

                    <td>Uma</td>

                    <td>Pune</td>

                    <td>411027</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. ubuntu16.04/ubuntu18.04安装网易云音乐

    一.下载1.0版本 下载地址:http://s1.music.126.net/download/pc/netease-cloud-music_1.0.0_amd64_ubuntu16.04.deb 下 ...

  2. 深入细枝末节，Python的字体反爬虫到底怎么一回事

    内容选自 即将出版 的<Python3 反爬虫原理与绕过实战>,本次公开书稿范围为第 6 章——文本混淆反爬虫.本篇为第 6 章中的第 4 小节,其余小节将 逐步放送 . 字体反爬虫开篇概 ...

  3. mysql5.7修改root密码

    use mysql; update mysql.user set authentication_string=password('123456') where user='root'; flush p ...

  4. Bugku-CTF加密篇之散乱的密文（lf5{ag024c483549d7fd@@1} 一张纸条上凌乱的写着2 1 6 5 3 4）

    散乱的密文 lf5{ag024c483549d7fd@@1} 一张纸条上凌乱的写着2 1 6 5 3 4  

  5. AOP统一日志打印处理

    在日常开发工作中,我们免不了要打印很多log.而大部分需要输出的log又是重复的(例如传入参数,返回值).因此,通过AOP方式来进行日志管理可以减少很多代码量,也更加优雅. Springboot通过A ...

  6. ASA-ACL类型

    安全设备支持下面5种不同类型的ACl: 标准ACL 扩展ACL(可匹配v4&v6流量) EtherType ACL (以太网类型ACL) WebType ACL(Web类型ACL) 1.标准A ...

  7. web打开本地文件并读取内容

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

  8. 洛谷P1060开心的金明（滚动数组优化）

    题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过NNN元钱就行”. ...

  9. 【SSM 】导出excel含图片

    ExprotRentUtils package com.kikyo.stat.utils; import java.awt.image.BufferedImage; import java.io.By ...

  10. ES 创建mapping

    mapping的写入与查看首先创建一个索引: curl -XPUT "http://erp2.es.kd1.pagoda.com.cn:80/erp_stock_index"{&q ...