基本实例

为任意<table>标签添加.table类可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。

<table class="table"> 
      <thead> 
        <tr> 
          <th>#</th> 
          <th>First Name</th> 
          <th>Last Name</th> 
          <th>Username</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <td>1</td> 
          <td>Mark</td> 
          <td>Otto</td> 
          <td>@mdo</td> 
        </tr> 
        <tr> 
          <td>2</td> 
          <td>Jacob</td> 
          <td>Thornton</td> 
          <td>@fat</td> 
        </tr> 
        <tr> 
          <td>3</td> 
          <td>Larry</td> 
          <td>the Bird</td> 
          <td>@twitter</td> 
        </tr> 
      </tbody> 
</table>

条纹状表格

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

<table class="table table-striped"> 
      <thead> 
        <tr> 
          <th>#</th> 
          <th>First Name</th> 
          <th>Last Name</th> 
          <th>Username</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <td>1</td> 
          <td>Mark</td> 
          <td>Otto</td> 
          <td>@mdo</td> 
        </tr> 
        <tr> 
          <td>2</td> 
          <td>Jacob</td> 
          <td>Thornton</td> 
          <td>@fat</td> 
        </tr> 
        <tr> 
          <td>3</td> 
          <td>Larry</td> 
          <td>the Bird</td> 
          <td>@twitter</td> 
        </tr> 
      </tbody> 
</table>

带边框的表格

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

<table class="table table-bordered"> 
      <thead> 
        <tr> 
          <th>#</th> 
          <th>First Name</th> 
          <th>Last Name</th> 
          <th>Username</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <td rowspan="2">1</td> 
          <td>Mark</td> 
          <td>Otto</td> 
          <td>@mdo</td> 
        </tr> 
        <tr> 
          <td>Mark</td> 
          <td>Otto</td> 
          <td>@TwBootstrap</td> 
        </tr> 
        <tr> 
          <td>2</td> 
          <td>Jacob</td> 
          <td>Thornton</td> 
          <td>@fat</td> 
        </tr> 
        <tr> 
          <td>3</td> 
          <td colspan="2">Larry the Bird</td> 
          <td>@twitter</td> 
        </tr> 
      </tbody> 
</table>

鼠标悬停

通过添加.table-hover类可以让<tbody>中的每一行对鼠标悬停状态作出响应。

<table class="table table-hover"> 
      <thead> 
        <tr> 
          <th>#</th> 
          <th>First Name</th> 
          <th>Last Name</th> 
          <th>Username</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <td>1</td> 
          <td>Mark</td> 
          <td>Otto</td> 
          <td>@mdo</td> 
        </tr> 
        <tr> 
          <td>2</td> 
          <td>Jacob</td> 
          <td>Thornton</td> 
          <td>@fat</td> 
        </tr> 
        <tr> 
          <td>3</td> 
          <td colspan="2">Larry the Bird</td> 
          <td>@twitter</td> 
        </tr> 
      </tbody> 
</table>

紧缩表格

通过添加.table-condensed类可以让表格更加紧凑,单元格中的内补(padding)均会减半。

<table class="table table-condensed"> 
      <thead> 
        <tr> 
          <th>#</th> 
          <th>First Name</th> 
          <th>Last Name</th> 
          <th>Username</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <td>1</td> 
          <td>Mark</td> 
          <td>Otto</td> 
          <td>@mdo</td> 
        </tr> 
        <tr> 
          <td>2</td> 
          <td>Jacob</td> 
          <td>Thornton</td> 
          <td>@fat</td> 
        </tr> 
        <tr> 
          <td>3</td> 
          <td colspan="2">Larry the Bird</td> 
          <td>@twitter</td> 
        </tr> 
      </tbody> 
</table>

状态类

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

Class            描述

.active           鼠标悬停在行或单元格上时所设置的颜色

.success        标识成功或积极的动作

.info               标识普通的提示信息或动作

.warning        标识警告或需要用户注意

.danger          标识危险或潜在的带来负面影响的动作

<table class="table"> 
      <thead> 
        <tr> 
          <th>#</th> 
          <th>Column heading</th> 
          <th>Column heading</th> 
          <th>Column heading</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr class="active"> 
          <td>1</td> 
          <td>Column content</td> 
          <td>Column content</td> 
          <td>Column content</td> 
        </tr> 
        <tr> 
          <td>2</td> 
          <td>Column content</td> 
          <td>Column content</td> 
          <td>Column content</td> 
        </tr> 
        <tr class="success"> 
          <td>3</td> 
          <td>Column content</td> 
          <td>Column content</td> 
          <td>Column content</td> 
        </tr> 
        <tr> 
          <td>4</td> 
          <td>Column content</td> 
          <td>Column content</td> 
          <td>Column content</td> 
        </tr> 
        <tr class="info"> 
          <td>5</td> 
          <td>Column content</td> 
          <td>Column content</td> 
          <td>Column content</td> 
        </tr> 
        <tr> 
          <td>6</td> 
          <td>Column content</td> 
          <td>Column content</td> 
          <td>Column content</td> 
        </tr> 
        <tr class="warning"> 
          <td>7</td> 
          <td>Column content</td> 
          <td>Column content</td> 
          <td>Column content</td> 
        </tr> 
        <tr> 
          <td>8</td> 
          <td>Column content</td> 
          <td>Column content</td> 
          <td>Column content</td> 
        </tr> 
        <tr class="danger"> 
          <td>9</td> 
          <td>Column content</td> 
          <td>Column content</td> 
          <td>Column content</td> 
        </tr> 
      </tbody> 
</table>