<!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. java redis 实现用户签到功能(很普通简单的签到功能)

    业务需求是用户每天只能签到一次,而且签到后用户增加积分,所以把用户每次签到时放到redis 缓存里面,然后每天凌晨时再清除缓存,大概简单思想是这样的 直接看代码吧如下 @Transactional @ ...

  2. QBImagePickerController 不可选择照片流中照片

    因为QBImagePickerController使用的ALAssetsLibrary方式来读取图片,如果采用默认方式去执行,那么根据url读取到的asset会为空,这时候我们就 需要特殊处理 [se ...

  3. Python jupuyter 的安装与使用（windows下）

    1.win+R  cmd 打开命令窗 2.pip install jupyter pip安装jupyter 3.安装好后 执行jupyter的启动命令: jupyter notebook --ip=0 ...

  4. IDEA自动部署WEB工程至远程服务器（学习笔记）

    一.部署Web工程的几种方式 ①本地打war,上传至远程服务器tomcat容器即可 优点:简单粗暴 缺点:浪费时间 ②IDEA自动部署至远程服务器 优点:节省大量时间 缺点:配置稍多(第一次) 二.I ...

  5. Spring Security教程(二)：自定义数据库查询

    Spring Security教程(二):自定义数据库查询   Spring Security自带的默认数据库存储用户和权限的数据,但是Spring Security默认提供的表结构太过简单了,其实就 ...

  6. laravel qq邮件配置

  7. Mongodb 分片原理

    1.主从mongodb 模式 类似,MySQL的主从配置  参照:https://blog.csdn.net/liusong0605/article/details/11551699 mongoDB有 ...

  8. html 标签 frame

    html 标签 frame 对于html标签,一般都是在<html>标签对里包着<head>标签对和<body>标签对,body元素定义文档的主体,包含文档的所有内 ...

  9. 在java的静态方法中访问类的实例成员

    直接来看代码: public class Example { int x = 3;//类的实例变量,初始化值为3 static int y = 4;//类的静态变量,初始化值为4 public sta ...

  10. Nginx企业级优化！（重点）

    隐藏Nginx版本号!(重点) 在生产环境中,需要隐藏 Nginx 的版本号,以避免安全漏洞的泄漏 一旦有黑客知道Nginx版本号便可以利用Nginx漏洞进行攻击,严重影响到了公司的安全 查看隐藏版本 ...