<!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. 【MySQL】多表查询

    " 目录 多表链接查询 笛卡尔积 内链接 inner join 外链接之左链接 left join 外链接之右链接 right join 全外链接 符合条件链接查询 子查询 先准备两张表:部 ...

  2. python练习：假设s是一个字符串，返回s中十进制数字之和。例如，如果s是‘a2b3c’，则返回5。

    python练习:假设s是一个字符串,返回s中十进制数字之和.例如,如果s是‘a2b3c’,则返回5. 重难点:字符串转化为字符序列.in的多种应用.try-except代码块的使用. print(& ...

  3. 虚拟机中安装centos7后无法上网，使用桥接网络+ssh

    首先是桥接网络解决无法上网的问题: 1保证你Vmware里面的虚拟机是关机状态2右键点击电脑屏幕右下角小电脑图标,选择打开网络与共享中心,然后点击弹出来的窗口左上角的“更改适配器设置”.这里指的是你W ...

  4. 基于PowerCli自动部署和配置vmvare虚拟机

    1 文档说明 2 Vsphere PowerCli安装和配置 3 PowerCli常用命令 4 创建自定义规范 5 虚拟机克隆与配置脚本 6 技术资料 1 文档说明 使用Vsphere管理虚拟机,在进 ...

  5. 在Linux系统中使用ntfs、fat32格式的存储设备

    在Linux系统中使用ntfs.fat32格式的存储设备   我们通常使用的移动硬盘或U盘一般都是ntfs或fat32的文件系统,作为一名运维工程师,经常会遇到把移动硬盘或者U盘上的内容拷贝的Linu ...

  6. toFixed的坑

    因为项目需要使用小数,所以第一时间想到了javaScript 的toFixed 方法,开始测试了一下,觉得没有问题就没管了,后来同事偶然间发现 toFixed 之后的数据不对,后来自己查阅资料才知道, ...

  7. Kali 2020.1 默认密码不是toor

    官方2020年一月28日的文章中指出root/toor is dead. Long live kali/kali. 登录用户名和密码是kali:kali 但是虚拟机镜像下载页面没有及时更新,仍然提示登 ...

  8. updataxml报错注入

    // take the variables//接受变量 // //也就是插入post提交的uname和passwd,参见:https://www.w3school.com.cn/sql/sql_ins ...

  9. 十三 Struts2复杂类型的数据封装，List封装和Map封装

    在实际开发当中,有可能遇到批量向数据库中插入记录,需要在页面中将数据封装到集合中.类似页面表达式方法 List封装: 前端JSP: <%@ page language="java&qu ...

  10. navicat12破解详细教程

    以管理员身份运行此注册机: 运行注册机 打开注册机后,1) Patch勾选Backup.Host和Navicat v12,然后点击Patch按钮: 默认勾选 找到Navicat Premium 12安 ...