Bootstrap基本表
一個基本的Bootstrap表中有一個光填充,只有水平分隔線。
的.table
類增加了基本的造型到表:
例
Firstname | Lastname | |
---|---|---|
John | Doe | [email protected] |
Mary | Moe | [email protected] |
July | Dooley | [email protected] |
條紋行
的.table-striped
類增加斑馬條紋表:
例
Firstname | Lastname | |
---|---|---|
John | Doe | [email protected] |
Mary | Moe | [email protected] |
July | Dooley | [email protected] |
邊框的表格
的.table-bordered
類添加在桌子上,細胞各方邊界:
例
Firstname | Lastname | |
---|---|---|
John | Doe | [email protected] |
Mary | Moe | [email protected] |
July | Dooley | [email protected] |
哈弗行
的.table-hover
類可以在表行一個懸停狀態:
例
Firstname | Lastname | |
---|---|---|
John | Doe | [email protected] |
Mary | Moe | [email protected] |
July | Dooley | [email protected] |
簡明表
的.table-condensed
類來生成表由切削單元格邊距一半更緊湊:
例
Firstname | Lastname | |
---|---|---|
John | Doe | [email protected] |
Mary | Moe | [email protected] |
July | Dooley | [email protected] |
上下文類
上下文類可用於顏色表行( <tr>
或表格單元格( <td>
例
Firstname | Lastname | |
---|---|---|
John | Doe | [email protected] |
Mary | Moe | [email protected] |
July | Dooley | [email protected] |
可以使用的上下文類是:
類 | 描述 |
---|---|
.active | 適用懸停顏色的表格行或表格單元格 |
.success | 表示成功或積極行動 |
.info | 表示中性信息變更或執行 |
.warning | 表示可能需要注意的警告 |
.danger | 表明存在危險或潛在的負面作用 |
響應表
的.table-responsive
類創建一個響應表。 然後,該表將橫向滾動在小型設備上(下768px)。 當任何超過768px寬的大觀景,是沒有區別的:
自測練習用!
完整的Bootstrap Table Reference Bootstrap Table Reference
對於所有的表類的完整參考,請訪問我們完整的Bootstrap表參考 。