6.5 表格相关样式
Bootstrap
提供了系列表格相关的样式,通过这些样式可以快速开发出样式美观的表格。Bootstrap
提供了以下6种表格样式。
样式类 |
描述 |
.table |
基本的表格 。这种样式为每行增加水平分割线和少量的padding 。 |
.table-striped |
条纹表格 。该样式用于给<tbody> 内的每一行增加斑马条纹样式。 |
.table-bordered |
边框表格 。该样式为表格和其中的每个单元格增加边框。 |
.table-hover |
鼠标高亮 。该样式可以让<tbody> 中的表格行对鼠标悬停做出高亮响应。 |
.table-condensed |
紧凑表格 。通过该样式可让单元格的padding 减半,这样使得表格更加紧凑。 |
.table-responsive |
响应式表格 。如果将任何.table 表格放在指定了class="table-responsive" 的元素内,即可创建响应式表格。响应式表格会在小屏幕设备上(viewport 宽度小于768px)显示水平滚动条。当浏览器viewport 宽度大于768px时,水平滚动条消失。 |
# 6.5.1 基础表格 # |
|
只要为任意表格指定class="table" 即可实现Bootstrap 的基础表格。 |
|
|
|
# 程序示例 # |
|
例如如下代码: |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
| <!DOCTYPE html> <html>
<head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> 基础表格 </title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css"> </head>
<body> <div class="container"> <table class="table"> <caption> <b>疯狂Java体系图书</b> </caption> <thead> <tr> <th>书名</th> <th>作者</th> <th>价格</th> </tr> </thead> <tbody> <tr> <td>疯狂Java讲义</td> <td>李刚</td> <td>109</td> </tr> <tr> <td>疯狂HTML 5/CSS 3/JavaScript讲义</td> <td>李刚</td> <td>79</td> </tr> <tr> <td>疯狂前端开发讲义</td> <td>李刚</td> <td>79</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" style="text-align:right">现总计:3本图书</td> </tr> </tfoot> </table> </div> <script type="text/javascript" src="../jquery-3.1.1.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> </body>
</html>
|
|
|
原文链接: 6.5 表格相关样式 6.5.1 基础表格