简介
在本教程中，您将学习如何使用 Bootstrap 工具包来创建表格。
解释
Bootstrap 版本 2.0 的 bootstrap.css 中的表单行号 1034 到行号 1167，包含了表格样式。
正如您所知道的，表格只是用来呈现表格数据。Bootstrap 也一样，标记的位置必须如下所示：
如果您使用了列标题，层次结构应该如下所示：
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 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of Table with twitter bootstrap</title> <meta name="description" content="Creating a table with Twitter Bootstrap. Learn how to use Twitter Bootstrap toolkit to create Tables with examples."><link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> </head><body><table class="table"> <thead> <tr> <th>Student-ID</th> <th>First Name</th> <th>Last Name</th> <th>Grade</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>Rammohan </td> <td>Reddy</td> <td>A+</td> </tr> <tr> <td>002</td> <td>Smita</td> <td>Pallod</td> <td>A</td> </tr> <tr> <td>003</td> <td>Rabindranath</td> <td>Sen</td> <td>A+</td> </tr> </tbody> </table></body></html> |
输出
在线查看
Bootstrap 的斑马表格实例
这个表格使用了斑马条纹的 CSS class，这个 class 是在相关的 bootstrap css 文件中定义，class 名称是 .table-striped。
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 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of Zebra Table with twitter bootstrap</title> <meta name="description" content="Creating a Zebra table with Twitter Bootstrap. Learn with example of a Zebra Table with Twitter Bootstrap."><link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> </head><body><table class="table table-striped"> <thead> <tr> <th>Student-ID</th> <th>First Name</th> <th>Last Name</th> <th>Grade</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>Rammohan </td> <td>Reddy</td> <td>A+</td> </tr> <tr> <td>002</td> <td>Smita</td> <td>Pallod</td> <td>A</td> </tr> <tr> <td>003</td> <td>Rabindranath</td> <td>Sen</td> <td>A+</td> </tr> </tbody> </table></body></html> |
输出
