1. 程式人生 > >bootstrap表格(5)

bootstrap表格(5)

<table> 為表格新增基礎樣式。
<thead>表格標題行的容器元素
<tr>,用來標識表格列。
<tbody> 表格主體中的表格行的容器元素。
<tr> 一組出現在單行上的表格單元格的容器元素)。
<td> 預設的表格單元格。
<th> 特殊的表格單元格,用來標識列或行(取決於範圍和位置)
<caption> 關於表格儲存內容的描述或總結。
.table 為任意 <table> 新增基本樣式 (只有橫向分隔線) 嘗試一下
.table-striped<tbody>

內新增斑馬線形式的條紋 ( IE8 不支援) 嘗試一下
.table-bordered 為所有表格的單元格新增邊框 嘗試一下
.table-hover 在 內的任一行啟用滑鼠懸停狀態 嘗試一下
.table-condensed 讓表格更加緊湊
.active 將懸停的顏色應用在行或者單元格上 嘗試一下
.success 表示成功的操作 嘗試一下
.info 表示資訊變化的操作 嘗試一下
.warning 表示一個警告的操作 嘗試一下
.danger 表示一個危險的操作
基本的表格
如果您想要一個只帶有內邊距(padding)和水平分割的基本表,請新增 class .table,
條紋表格
通過新增 .table-striped class,您將在 <tbody>
內的行上看到條紋,
邊框表格
通過新增 .table-bordered class,您將看到每個元素周圍都有邊框,且佔整個表格是圓角的,
懸停表格
通過新增 .table-hover class,當指標懸停在行上時會出現淺灰色背景
精簡表格
通過新增 .table-condensed class,行內邊距(padding)被切為兩半,以便讓表看起來更緊湊
響應式表格
通過把任意的 .table 包在 .table-responsive class 內,您可以讓表格水平滾動以適應小型裝置(小於 768px)。
當在大於 768px 寬的大型裝置上檢視時,您將看不到任何的差別。