Bootstrap之表格

基本实例

为任意<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>