Bootstrap中table的用法
程序员文章站
2024-02-17 14:16:28
...
BOOTSTRAP中table的用法
1.table结构
<table >
<caption>base table layout</caption>
<thead>
<tr >
<th>NAME</th>
</tr>
</thead>
<tbody>
<tr>
<td>XIAOHONG</td>
</tr>
</tbody>
</table>
2. class in table
类 | 描述 |
---|---|
.table | 为任意 添加基本样式 (只有横向分隔线) |
.table-striped | 在 tbody 内添加斑马线形式的条纹 ( IE8 不支持) |
.table-bordered | 为所有表格的单元格添加边框 |
.table-hover | 在 tbody 内的任一行启用鼠标悬停状态 |
.table-condensed | 让表格更加紧凑 |
.table
<table class="table" >
<caption>base table layout</caption>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
.table-striped
<table class="table table-striped" >
<caption>base table layout</caption>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
3. class in tr td th
类 | 描述 |
---|---|
.active | 将悬停的颜色应用在行或者单元格上 |
.success | 表示成功的操作 |
.info | 表示信息变化的操作 |
.warning | 表示一个警告的操作 |
.danger | 表示一个危险的操作 |
<table class="table table-hover" >
<caption>base table layout</caption>
<thead>
<tr class="active">
<th>NAME</th>
<th>AGE</th>
<th>GENDER</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>XIAOHONG</td>
<td>14</td>
<td>MALE</td>
</tr>
<tr class="warning">
<td >JHON</td>
<td>15</td>
<td>FEMALE</td>
</tr>
<tr class="danger">
<td>XIAOHONG</td>
<td>14</td>
<td>MALE</td>
</tr>
<tr >
<td class="active">JHON</td>
<td class="danger">15</td>
<td class="success">FEMALE</td>
</tr>
</tbody>
</table>