Bootstrap-表演示

Bootstrap是一个流行的前端框架，它提供了一系列的CSS和JavaScript组件，帮助开发者快速构建美观、响应式的网站和应用程序。其中，表格组件是Bootstrap中非常常用的一种组件，有丰富的样式和功能，本文将介绍Bootstrap中的表格组件以及其使用实例。

基础表格

首先，我们来看一下Bootstrap中最基础的表格组件。以下代码可以创建一个简单的、带边框的表格。

<table class="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>21</td>
      <td>女</td>
    </tr>
    <tr>
      <td>小华</td>
      <td>19</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

输出结果：

我们可以看到，这是一个非常基础的表格，有表头和数据行，数据行之间有间隔，但是没有更多的样式。

响应式表格

接下来，我们来看一下响应式表格。响应式表格是指，在不同的设备上，表格的显示方式会有所不同。在较小的屏幕上，表格会自适应调整，以方便用户查看。以下代码可以创建一个响应式的表格。

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>小明</td>
        <td>20</td>
        <td>男</td>
      </tr>
      <tr>
        <td>小红</td>
        <td>21</td>
        <td>女</td>
      </tr>
      <tr>
        <td>小华</td>
        <td>19</td>
        <td>男</td>
      </tr>
    </tbody>
  </table>
</div>

输出结果：

我们可以看到，在大屏幕上，表格显示为普通的表格，而在较小的屏幕上，表格会自动调整为堆叠模式。

带表格样式

为了让表格看起来更美观，Bootstrap提供了多种表格样式。以下代码可以创建一个带有斑马线样式以及鼠标悬停样式的表格。

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>21</td>
      <td>女</td>
    </tr>
    <tr>
      <td>小华</td>
      <td>19</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

输出结果：

我们可以看到，刚才的基础表格变得更加美观了，有斑马线样式和鼠标悬停样式。

表格排列样式

表格也可以根据内容的不同进行排列。以下代码可以创建一个带有表格排列样式的表格。

<table class="table">
  <thead>
    <tr>
      <th scope="col">姓名</th>
      <th scope="col">年龄</th>
      <th scope="col">性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">小明</th>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <th scope="row">小红</th>
      <td>21</td>
      <td>女</td>
    </tr>
    <tr>
      <th scope="row">小华</th>
      <td>19</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

输出结果：

我们可以看到，表格中的内容根据内容类型自动进行了排列，让我们的信息更加清晰。

以上就是Bootstrap中表格组件的简单介绍和使用实例，需要注意的是，Bootstrap中的表格组件非常强大且丰富，可以通过自定义样式、通过JavaScript实现更多功能，感兴趣的开发者可以进一步了解。