Bootstrap 表格类样式
☑ .table:基础表格,为任意 <table> 添加基本样式 (只有横向分隔线)
☑ .table-striped:斑马线表格
☑ .table-bordered:带边框的表格
☑ .table-hover:鼠标悬停高亮的表格
☑ .table-condensed:紧凑型表格
☑ .table-responsive:响应式表格
1、“.table”主要有三个作用:
☑ 给表格设置了单元内距及底部边距margin-bottom:20px
☑ 在thead底部设置了一个2px的浅灰实线
☑ 每个单元格顶部设置了一个1px的浅灰实线
下面就以上表格类样式,作简要介绍:
一、基础表格
实现代码:
<table class="table">
<caption>基础表格</caption>
<thead>
<tr>
<th>省份</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>广东</td>
<td>深圳</td>
</tr>
<tr>
<td>广西</td>
<td>桂林</td>
</tr>
<tr>
<td>海南</td>
<td>三亚</td>
</tr>
</tbody>
</table>
效果图如下:
二、条纹表格
关键代码:
<table class="table table-striped">
效果图:
三、边框表格
关键代码:
<table class="table table-bordered">
效果图:
四、悬停表格
通过给表格class添加 .table-hover样式,当指针悬停在行上时会出现浅灰色背景
实现代码:
<table class="table table-hover">
效果图:
五、上下文类表格
通过给tr和td添加样式,给行或单元格添加指定样式的背景色,突出上下文,常用的样式有active、success、info、danger和warning。如下所示:
<table class="table">
<caption>上下文表格布局</caption>
<thead>
<tr>
<th>省份</th>
<th>省会</th>
<th>地级市数量</th></tr>
</thead>
<tbody>
<tr class="active">
<td>福建</td>
<td>福州</td>
<td>9</td></tr>
<tr class="success">
<td>广东</td>
<td>广州</td>
<td>21</td></tr>
<tr class="warning">
<td>广西</td>
<td>南宁</td>
<td>14</td></tr>
<tr class="danger">
<td>海南</td>
<td>海口</td>
<td>4</td></tr>
</tbody>
</table>
效果图:
六、响应式表格
通过给表格添加上.table-responsive 样式,可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。
核心代码:
<div class="table-responsive">
<table class="table">
七、紧凑型表格:
通过给表格添加.table-condensed 样式,让行内边距(padding)被切为两半,以便让表看起来更紧凑,
核心代码:
<table class="table table-condensed">