線上書籍

一、使用最基本的表格標記，以下是 Bootstrap 中 .table 的表格的樣式。Bootstrap 4.0 中繼承了全部的表格樣式，這就意味至為任何巢狀表格添加樣式的方式和外層表格相同。

1. 也可以作反轉色彩，使用 .table-dark 在深色背景下放上淺色文本。

二、表格 head 選項

1. 與預設和反轉樣式相似，使用如下兩個 .thead-light 或 .thead-dark 中的一個將 <thead> 顯示淺灰或深灰。

三、條紋行

1. 使用 .table-striped 在 <tbody>中的任何表格行添加斑馬紋

四、帶框的表格

1. 加入 .table-bordered 在表格和儲存格的四邊上添加邊框。

五、可滑入行

1. 添加 .table-hover 以便在一個 <tbody> 中的表格行上啟用一個 hover 狀態。

六、小表格

1. 添加 .table-sm 將儲存格 padding 縮減一半的方式讓表格更加精簡。

七、語意化 class

1. 使用語意化 class 給表格列或單獨的儲存格上色。 <!-- On rows --> <tr class="table-active">...</tr> <tr class="table-primary">...</tr> <tr class="table-secondary">...</tr> <tr class="table-success">...</tr> <tr class="table-danger">...</tr> <tr class="table-warning">...</tr> <tr class="table-info">...</tr> <tr class="table-light">...</tr> <tr class="table-dark">...</tr> <!-- On cells (`td` or `th`) --> <tr> <td class="table-active">...</td> <td class="table-primary">...</td> <td class="table-secondary">...</td> <td class="table-success">...</td> <td class="table-danger">...</td> <td class="table-warning">...</td> <td class="table-info">...</td> <td class="table-light">...</td> <td class="table-dark">...</td> </tr>

    

2.