通过添加 .table-hover class,当指针悬停在行上时会出现浅灰色背景,如下面的实例所示:
- <!DOCTYPE html>
- <html>
- <head>
- <title>Bootstrap 实例 - 悬停表格</title>
- <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
- <script src="/scripts/jquery.min.js"></script>
- <script src="/bootstrap/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>
结果如下所示: