bootstrap表格(5)
阿新 • • 發佈:2018-12-30
<table>
為表格新增基礎樣式。
<thead>
表格標題行的容器元素
<tr>
,用來標識表格列。
<tbody>
表格主體中的表格行的容器元素。
<tr>
一組出現在單行上的表格單元格的容器元素)。
<td>
預設的表格單元格。
<th>
特殊的表格單元格,用來標識列或行(取決於範圍和位置)
<caption>
關於表格儲存內容的描述或總結。
.table
為任意 <table>
新增基本樣式 (只有橫向分隔線) 嘗試一下
.table-striped
在 <tbody>
.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 寬的大型裝置上檢視時,您將看不到任何的差別。