<!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. SpringCloud全家桶学习之分布式配置中心----Config（七）

    一.概述 (1)背景 微服务意味着将单体应用中的业务拆分成一个个子服务,每个服务的粒度相对较小,因此系统中出现大量的服务.由于每个服务都需要配置必要的配置信息才能运行,所以一套集中式的.动态的配置管理 ...

  2. DataGrid DataGridTextColumn 樣式

    <DataGridTextColumn.ElementStyle> <Style TargetType="TextBlock" > <Setter P ...

  3. 喵星之旅-狂奔的兔子-svn安装及使用

    一.服务端安装配置 1.安装svn 创建版本库并配置 以root用户登录,或者具有sudo权限的用户,这里选择root. yum install subversion 都选择y 2.创建版本库并配置 ...

  4. 源代码管理工具(1)——SVN(1)——SVN 的使用新手指南，具体到步骤详细介绍----TortoiseSVN

    一.客户端的使用: TortoiseSVN(下载地址:https://pan.baidu.com/s/14cAEV5ZfMA9mLlQAb4oznw 这里有包含中文版的语言包). 1.先下载安装(这个 ...

  5. Install fail! Error: EBUSY: resource busy or locked, symlink

    前些日子从github上下载了一个项目 然后放在桌面上  ,但是运行的时候 报了Install fail! Error: EBUSY: resource busy or locked, symlink ...

  6. Java面向对象编程 -3

    this关键字 this可以算是Java里面比较复杂的关键字,因为this的使用形式约定了它的灵活性,在程序里面,使用this可以实现以下三类结构的描述: 当前类中的属性:this属性; 当前类中的方 ...

  7. Java IO流详解（五）——缓冲流

    缓冲流也叫高效流,是处理流的一种,即是作用在流上的流.其目的就是加快读取和写入数据的速度. 缓冲流本身并没有IO功能,只是在别的流上加上缓冲效果从而提高了效率.当对文件或其他目标频繁读写或操作效率低, ...

  8. MySQL复制方法

    MySQL的二进制日志,MySQL复制原理,MySQL主从模式搭建,MySQL双主模式搭建,MySQL级联模式搭建,MySQL半同步模式复制 一.二进制日志 1.概念 MySQL的二进制日志(bina ...

  9. JIRA 安装与破解 Mac版

    1.安装 JDK 2.安装 MySQL 下载地址:https://dev.mysql.com/downloads/ 选择对应版本下载安装.我选择的是 mysql-8.0.11-macos10.13-x ...

  10. navicat for mysql 中文破解版（无需激活码）

    1.下载破解版Navicat for MySQ中文破解版 链接: https://pan.baidu.com/s/19BlJRx7tLnDPIM4U6DNWvA 提取码: d9ci 2.解压下载后的文 ...