表格

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

基本樣式

<table class="table">
  ...
</table>

條紋狀表格 通過.table-striped類可以給<tbody>之內的每一行增加斑馬條紋樣式。

帶邊框的表格 添加.table-bordered類為表格和其中的每個單元格增加邊框。

鼠標懸停 通過添加.table-hover類可以讓中的每一行對鼠標懸停狀態作出響應。

緊縮表格 通過添加.table-condensed類可以讓表格更加緊湊,單元格中的內補(padding)均會減半。

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>