Bootstrap 表格
发布于 2016-11-25 14:44:59 | 86 次阅读 | 评论: 0 | 来源: 网络整理
简介
在本教程中，您将学习如何使用 Bootstrap 工具包来创建表格。
解释
Bootstrap 版本 2.0 的 bootstrap.css 中的表单行号 1034 到行号 1167，包含了表格样式。
正如您所知道的，表格只是用来呈现表格数据。Bootstrap 也一样，标记的位置必须如下所示：
如果您使用了列标题，层次结构应该如下所示：
Bootstrap 的简单表格实例
<!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。
<!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>
输出
