Bootstrap3学习笔记(三)之表格

下面我将详细讲解“Bootstrap3学习笔记(三)之表格”的完整攻略。

1. 表格

1.1 基本表格

在Bootstrap中，可以使用.table类创建表格。这是一个基本表格的代码：

<table class="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>男</td>
      <td>18</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>女</td>
      <td>17</td>
    </tr>
  </tbody>
</table>

结果如下：

姓名	性别	年龄
小明	男	18
小红	女	17

1.2 带边框的表格

如果需要给表格添加边框，只需要在table类后面加上.table-bordered类即可，代码如下：

<table class="table table-bordered">
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>男</td>
      <td>18</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>女</td>
      <td>17</td>
    </tr>
  </tbody>
</table>

结果如下：

姓名	性别	年龄
小明	男	18
小红	女	17

1.3 鼠标悬停变色的表格

如果需要鼠标悬停在表格上时表格行变色，只需要在table类后面加上.table-hover类即可，代码如下：

<table class="table table-hover">
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>男</td>
      <td>18</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>女</td>
      <td>17</td>
    </tr>
    <tr>
      <td>小刚</td>
      <td>男</td>
      <td>19</td>
    </tr>
  </tbody>
</table>

结果如下：

姓名	性别	年龄
小明	男	18
小红	女	17
小刚	男	19

1.4 带表头的行

有时候我们需要在表格中添加一些带表头的行，以便更好地展示数据。在Bootstrap中，可以使用th和td标签来创建带表头的行。下面是一个带表头的行的例子。

<table class="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>小明</th>
      <td>男</td>
      <td>18</td>
    </tr>
    <tr>
      <th>小红</th>
      <td>女</td>
      <td>17</td>
    </tr>
  </tbody>
</table>

结果如下：

姓名	性别	年龄
小明	男	18
小红	女	17

2. 总结

本文介绍了Bootstrap中表格的基本用法，包括基本表格、带边框的表格、鼠标悬停变色的表格和带表头的行。通过本文介绍，相信你已经掌握了Bootstrap中表格的基本用法，可以快速地创建出美观的表格。