教大家轻松制作Bootstrap漂亮表格（table）

教大家轻松制作Bootstrap漂亮表格（table）攻略

Bootstrap表格的基本用法

Bootstrap是一个流行的前端框架，最大的好处就是可以轻松制作漂亮的网页元素，其中也包含了表格（table）。下面是Bootstrap表格的基本用法：

<table class="table">
  <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>

这是Bootstrap表格的最基础的样子。其中，thead标签表示表格的头部，tbody标签表示表格的主体，tr标签表示行，th标签表示表头单元格，td标签表示普通单元格。需要注意的是，每一行的单元格数量必须一致，否则表格样式会变形，影响阅读。

表格样式

Bootstrap表格提供了多种样式，可以通过添加对应的class来实现。下面是几种常见的样式：

<!-- 带边框的表格 -->
<table class="table table-bordered">
  <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-striped">
  <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-hover">
  <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-sm表示小型表格、table-responsive表示响应式表格等等，读者可以自行查阅相关文档。

表格自适应

在响应式网页设计中，表格的自适应十分重要，以便在不同屏幕尺寸下都能正常显示。Bootstrap表格提供了响应式的样式类table-responsive，可以实现表格在窄屏幕下自动出现滚动条，从而避免表格变形的问题。以下是示例代码：

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
        <th>Password</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
        <td>123456</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
        <td>abcdefg</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td>qwerty</td>
      </tr>
    </tbody>
  </table>
</div>

这样，在窄屏幕下，表格会出现滚动条，从而保证表格的显示质量。

示例

以下是一个基于Bootstrap的表格示例，包含了带条纹和边框的样式：

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>邮箱</th>
      <th>地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>23</td>
      <td>[e-mail]</td>
      <td>北京市海淀区</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>35</td>
      <td>[e-mail]</td>
      <td>上海市浦东新区</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>47</td>
      <td>[e-mail]</td>
      <td>广州市天河区</td>
    </tr>
  </tbody>
</table>

总结

本文讲解了如何使用Bootstrap制作漂亮的表格，涉及到了基本用法、样式和自适应等内容。希望读者可以通过本文学会如何制作漂亮的表格，并根据实际需求进行扩展。