查看“Bootstrap4 表格”的源代码
←
Bootstrap4 表格
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==Bootstrap4 表格== === 基础表格 === Bootstrap4 通过 .table 类来设置基础表格的样式,实例如下: [[文件:web9-5.png]] <nowiki> <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>基础表格</h2> <p>.table 类来设置基础表格的样式:</p> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> </body> </html> </nowiki> === 条纹表格 === 通过添加 .table-striped 类,您将在 <tbody> 内的行上看到条纹,如下面的实例所示: [[文件:web9-4.png]] <nowiki><div class="container"> <h2>条纹表格</h2> <p>通过添加 .table-striped 类,来设置条纹表格:</p> <table class="table table-striped"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div></nowiki> ===带边框的表格=== .table-bordered 类可以为表格添加边框 [[文件:web9-6.png]] <nowiki> <div class="container"> <h2>带边框表格</h2> <p>.table-bordered 类可以为表格添加边框:</p> <table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> </nowiki> ===鼠标悬停状态表格=== .table-hover 类可以为表格的每一行添加鼠标悬停效果(灰色背景): [[文件:web9-7.png]] <nowiki><div class="container"> <h2>鼠标悬停状态表格</h2> <p>.table-hover 类可以为表格的每一行添加鼠标悬停效果(灰色背景):</p> <table class="table table-hover"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> </nowiki> 参考文档: [1] Bootstrap4 列表组 http://www.runoob.com/bootstrap4/bootstrap4-list-groups.html [2] Bootstrap4 表格 http://www.runoob.com/bootstrap4/bootstrap4-tables.html
返回至
Bootstrap4 表格
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息