DIV CSS 佈局教程網

在上篇文章給大家介紹了 BootStrap3學習筆記(一)之網格系統       Bootstrap3學習筆記(二)之排版

只需要在table標簽上使用.table類，就可以使用bootstrap默認的表格樣式

如果需要行背景有交替變化，可以這樣設定：

復制代碼 代碼如下:
<table class="table table-striped">

如果需要邊框，可以這樣設定：

復制代碼 代碼如下:
<table class="table table-bordered">

如果希望鼠標移動到內容行上有響應效果，可以這樣設定：

復制代碼 代碼如下:
<table class="table table-hover">

如果希望表格緊湊一點節省空間，可以這樣設定，cell的pedding將減半為4px，默認padding為8px：

復制代碼 代碼如下:
<table class="table table-condensed">

也可以給某行加上特定的樣式：

<tr class="active">
<tr class="success">
<tr class="info">
<tr class="warning">
<tr class="danger">

為了不同設備上顯示一致，對表格也可使用響應式設定，在表格外使用div修飾一下，將自動適應小於或大於768px的設備：

復制代碼 代碼如下:
<div class="table-responsive">

Bootstrap支持的表格元素：

以上所述是小編給大家介紹的Bootstrap3學習筆記(三)之表格的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！