BootStrap table的各种样式效果

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">