Bootstrap 表格

簡介

在本教程中，您將學(xué)習(xí)如何使用 Bootstrap 工具包來創(chuàng)建表格。

解釋

Bootstrap 版本 2.0 的 bootstrap.css 中的表單行號 1034 到行號 1167，包含了表格樣式。

正如您所知道的，表格只是用來呈現(xiàn)表格數(shù)據(jù)。Bootstrap 也一樣，標(biāo)記的位置必須如下所示：

如果您使用了列標(biāo)題，層次結(jié)構(gòu)應(yīng)該如下所示：

Bootstrap 的簡單表格實(shí)例

實(shí)例

<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>

輸出

output table with bootstrap

在線查看

Bootstrap 的斑馬表格實(shí)例

這個表格使用了斑馬條紋的 CSS class，這個 class 是在相關(guān)的 bootstrap css 文件中定義，class 名稱是 .table-striped。

實(shí)例

<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>

輸出

output zebra stripped table with bootstrap

在線查看

在不同的瀏覽器窗口查看上面實(shí)例。

點(diǎn)擊這里，下載本教程中使用到的所有 HTML、CSS、JS 和圖片文件。

其他擴(kuò)展

上一篇：Bootstrap Glyphicons 下一篇：Bootstrap 表單