<!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. 【C语言】创建一个函数，判断某一正整数是否为完数，并调用这个函数找出1000以内所有完数

    什么是完数? 如果一个数等于它的因子之和,则称该数为“完数”(或“完全数”). 例如,6的因子为1.2.3,而 6=1+2+3,因此6是“完数”.  问题分析 根据完数的定义,解决本题的关键是计算出所 ...

  2. about Base64

    用webservice传送文件的时候发现,如果发送的文件中有0x00字符,会被认为是字符串结尾,后面的内容就发送不过去,因此需要对不是纯文本格式的文件做BASE64编码,这样文件中就不会有0x00这样 ...

  3. Message Queue的使用目的

    为什么要用Message Queue   摘录自博客:http://dataunion.org/9307.html?utm_source=tuicool&utm_medium=referral ...

  4. python爬取course课程的信息

    目录 1.大模块页面 2.每个大模块中小模块的简单信息 3.每个小课程的详细信息 4.爬取所有评论 @   这几天爬取了course动态网页的课程信息,有关数据分析,机器学习,还有概率论和数理统计课程 ...

  5. PyQt5单元格操作大全

    1.显示二维列表数据(QTableView)控件 '''显示二维列表数据(QTableView)控件数据源model需要创建一个QTableView实例和一个数据源model,然后将其两者关联 MVC ...

  6. 洛谷P1164小A点菜（01背包）

    题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家……餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:“随便点”. 题目描述 不过uim由于买了一些辅(e ...

  7. Tomcat热部署与热加载！

    所谓的热部署与热加载就是两个值:(reloadable='true'与autoDeloy='true')

  8. Failed to read candidate component class

    今天编程时遇到了Failed to read candidate component class 这个异常,查了好久终于发现了是因为jdk的版本不对,所以报了这个错.

  9. Mybatis学习day2

    Mybatis初探 之前已经用利用mybatis实现链接数据库查询所有用户的信息(用的是在resources下建立和Dao层一样目录的xml实现的).这次再来看一下增删改查等其它的操作. 利用Myba ...

  10. 设计模式课程 设计模式精讲 6-2 抽象工厂coding

    1 代码讲解 1.1 抽象工厂优点 1.2 抽象工厂缺点 1.3 为何有产品族的业务场景宜用抽象工厂设计模式?而不是工厂设计模式? 2 代码演练 2.1 抽象工厂代码演练 1 代码讲解 1.1 抽象工 ...