目錄

Bootstrap 表格類樣式

☑  .table：基礎表格，為任意 <table> 新增基本樣式 (只有橫向分隔線)

☑  .table-striped：斑馬線表格

☑  .table-bordered：帶邊框的表格

☑  .table-hover：滑鼠懸停高亮的表格

☑  .table-condensed：緊湊型表格

☑  .table-responsive：響應式表格

1、“.table”主要有三個作用：

  ☑  給表格設定了單元內距及底部邊距margin-bottom:20px

  ☑  在thead底部設定了一個2px的淺灰實線

  ☑  每個單元格頂部設定了一個1px的淺灰實線

樣式圖如下：

2、table-striped：斑馬線表格

樣式圖如下：

3、table-bordered：帶邊框的表格

樣式圖如下：

4、table-hover：滑鼠懸停高亮的表格

樣式圖如下：

5、table-condensed：緊湊型表格(單元格的內距由8px調至5px。)

樣式圖如下：

6、table-responsive：響應式表格(當瀏覽器可視區域小於768px時，表格底部會出現水平滾動條；可視區域大於768px時，表格底部水平滾動條就會消失)

樣式圖如下：

7、綜合應用

樣式圖如下：

原始碼如下：

<div class="container">
	<h2>表格</h2>
	<p>聯合使用所有表格類:</p>                                          
	<table class="table table-striped table-bordered table-hover table-condensed">
		<thead>
			<tr>
				<th>#</th>
				<th>Firstname</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Anna</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Debbie</td>
			</tr>
			<tr>
				<td>3</td>
				<td>John</td>
			</tr>
		</tbody>
	</table>
</div>
 

Bootstrap的JS,CSS等我就不貼出來了，自行引入，具體可參考Bootstrap 中文網

8、狀態類：這些狀態類可以為行或單元格設定顏色。