4.表格.md

表格

1. 基本案例

为任意< table>标签添加.table 可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将其样式独立出来。

一个简单的 Table 示例

<div class="container">
    <table class="table">  
      <caption>Table 基本案例</caption>  
      <thead>  
        <tr>  
          <th>First Name</th>  
          <th>Last Name</th>
          <th>User Name</th>  
        </tr>  
      </thead>  
      <tbody>  
        <tr>  
          <td>aehyok</td>  
          <td>leo</td> 
          <td>@aehyok</td>  
        </tr>
        <tr>  
          <td>lynn</td>  
          <td>thl</td> 
          <td>@lynn</td>  
        </tr>
      </tbody>  
    </table>  
 </div>

2. 条纹状表格

利用.table-striped 可以给< tbody>之内的每一样增加斑马条纹样式。

在上面示例的 table 元素上再添加一个 样式类

 <table class="table table-striped">

看现在的效果，还是有点变化的。

3. 带边框的表格

利用.table-bordered 为表格和其中的每个单元格增加边框。

还是将第一个示例中的 table 元素上再添加一个样式类

<table class="table  table-bordered">

4. 鼠标悬停

利用.table-hover 可以让< tbody>中的每一行响应鼠标悬停状态。

<table class="table table-hover">

将鼠标移到那一行那一行就会有效果的

5. 紧缩表格

利用.table-condensed 可以让表格更加紧凑，单元格中的内部（padding）均会减半。

<table class="table table-condensed">

这个效果没那么明显，主要就是单元格中内容 padding 减半了。

6. 状态 Class

通过这些状态 class 可以为行货单元格设置颜色。

<table class="table table-condensed">  
  <caption>Table</caption>  
  <thead>  
    <tr>  
      <th>#</th>
      <th>First Name</th>  
      <th>Last Name</th>
      <th>User Name</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr class="active">  
      <td>1</td>
      <td>aehyok</td>  
      <td>leo</td> 
      <td>@aehyok</td>  
    </tr>
    <tr class="success">  
      <td>2</td>
      <td>lynn</td>  
      <td>thl</td> 
      <td>@lynn</td>  
    </tr>
    <tr class="warning">  
      <td>3</td> 
      <td>Amdy</td>  
      <td>Amy</td> 
      <td>@Amdy</td>  
    </tr>
    <tr class="danger"> 
      <td>4</td> 
      <td>Amdy</td>  
      <td>Amy</td> 
      <td>@Amdy</td>  
    </tr>
    <tr > 
      <td class="success">5</td> 
      <td class="danger">Amdy</td>  
      <td class="warning">Amy</td> 
      <td class="active">@Amdy</td>  
    </tr>
  </tbody>  
</table>

7. 响应式表格

将任何.table 包裹在.table-responsive 中即可创建响应式表格，其会在小屏幕设备上（小于 768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">
<table class="table">  
  <caption>Table</caption>  
  <thead>  
    <tr>  
      <th>#</th>
      <th>First Name</th>  
      <th>Last Name</th>
      <th>User Name</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr class="active">  
      <td>1</td>
      <td>aehyok</td>  
      <td>leo</td> 
      <td>@aehyok</td>  
    </tr>
    <tr class="success">  
      <td>2</td>
      <td>lynn</td>  
      <td>thl</td> 
      <td>@lynn</td>  
    </tr>
    <tr class="warning">  
      <td>3</td> 
      <td>Amdy</td>  
      <td>Amy</td> 
      <td>@Amdy</td>  
    </tr>
    <tr class="danger"> 
      <td>4</td> 
      <td>Amdy</td>  
      <td>Amy</td> 
      <td>@Amdy</td>  
    </tr>
    <tr > 
      <td class="success">5</td> 
      <td class="danger">Amdy</td>  
      <td class="warning">Amy</td> 
      <td class="active">@Amdy</td>  
    </tr>
  </tbody>  
</table>
</div>

看滚动条出现了额。