最新的Web開發教程
 

Bootstrap Tables


Bootstrap基本表

一個基本的Bootstrap表中有一個光填充,只有水平分隔線。

.table類增加了基本的造型到表:

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
試一試»

條紋行

.table-striped類增加斑馬條紋表:

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
試一試»

邊框的表格

.table-bordered類添加在桌子上,細胞各方邊界:

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
試一試»

哈弗行

.table-hover類可以在表行一個懸停狀態:

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
試一試»

簡明表

.table-condensed類來生成表由切削單元格邊距一半更緊湊:

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
試一試»

上下文類

上下文類可用於顏色表行( <tr>或表格單元格( <td>

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
試一試»

可以使用的上下文類是:

描述
.active 適用懸停顏色的表格行或表格單元格
.success 表示成功或積極行動
.info 表示中性信息變更或執行
.warning 表示可能需要注意的警告
.danger 表明存在危險或潛在的負面作用

響應表

.table-responsive類創建一個響應表。 然後,該表將橫向滾動在小型設備上(下768px)。 當任何超過768px寬的大觀景,是沒有區別的:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
試一試»

自測練習用!

練習1» 練習2» 練習3» 練習4» 練習5» 練習6»


完整的Bootstrap Table Reference Bootstrap Table Reference

對於所有的表類的完整參考,請訪問我們完整的Bootstrap表參考