Bootstrap表格制作代码

下面我将详细讲解如何用 Bootstrap 制作表格。

一、引入 Bootstrap 库

首先，我们需要引入 Bootstrap 库，可以去官网下载或直接使用CDN链接：

<!-- 引入CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
<!-- 引入JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>

二、基本表格的制作

Bootstrap 提供了一些 CSS 类和 JavaScript 插件，使得表格的样式更加美观，且在移动设备上也能良好显示。下面是一个基本的 Bootstrap 表格：

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">姓名</th>
      <th scope="col">年龄</th>
      <th scope="col">性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>李四</td>
      <td>22</td>
      <td>男</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>王五</td>
      <td>18</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

以上代码中，我们使用了 .table 类来使得表格更美观。 .table 类还有很多的变体，可以根据需求进行选择。

三、响应式表格的制作

如果想要表格在不同屏幕尺寸下适应，可以使用响应式表格。下面是一个例子：

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">姓名</th>
        <th scope="col">年龄</th>
        <th scope="col">性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>张三</td>
        <td>20</td>
        <td>男</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>李四</td>
        <td>22</td>
        <td>男</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>王五</td>
        <td>18</td>
        <td>女</td>
      </tr>
    </tbody>
  </table>
</div>

以上代码中，我们使用了 .table-responsive 类来使得表格在小屏幕下可以滚动查看所有内容。

示例1：可以通过以下代码在表格中添加一个操作列，每行都具有对应的操作链接：

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">姓名</th>
      <th scope="col">年龄</th>
      <th scope="col">性别</th>
      <th scope="col">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
      <td><a href="#">编辑</a> <a href="#">删除</a></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>李四</td>
      <td>22</td>
      <td>男</td>
      <td><a href="#">编辑</a> <a href="#">删除</a></td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>王五</td>
      <td>18</td>
      <td>女</td>
      <td><a href="#">编辑</a> <a href="#">删除</a></td>
    </tr>
  </tbody>
</table>

以上代码中，我们在表格中添加了一个操作列，每行都有“编辑”和“删除”两个链接，用于对表格数据进行操作。这里使用了 a 标签来创建链接，通过 CSS 来美化链接样式。

示例2：可以通过以下代码在表格中添加斑马线效果，使得表格更加易于阅读：

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">姓名</th>
      <th scope="col">年龄</th>
      <th scope="col">性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>李四</td>
      <td>22</td>
      <td>男</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>王五</td>
      <td>18</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

以上代码中，我们使用了 .table-striped 类来为表格添加斑马线效果，使得表格更加易于阅读。

希望这个攻略对你有帮助！