bootstrap4如何设置表格

Bootstrap 4如何设置表格

在Web开发中，表格是常用的数据展示方式，而Bootstrap 4是一个流行的前端框架，提供了丰富的样式和组件，使得制作美观且响应式的表格变得非常简单。在本文中，我们将介绍如何使用Bootstrap 4设置表格，并展示一些常用的表格样式和功能。

1. 引入Bootstrap 4：

首先，在HTML文件中引入Bootstrap 4的CSS和JavaScript文件。你可以从官方网站下载最新版本的Bootstrap 4，或者使用CDN链接。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 4表格示例</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
</head>
<body>

<!-- 页面内容将在后面添加 -->

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2. 创建基本表格：

使用Bootstrap 4的表格样式类可以快速创建基本的表格。

<div class="container mt-5">
  <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>25</td>
        <td>男</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>李四</td>
        <td>30</td>
        <td>男</td>
      </tr>
      <!-- 添加更多表格行 -->
    </tbody>
  </table>
</div>

3. 斑马纹表格：

Bootstrap 4提供了斑马纹表格样式，通过添加.table-striped类可以实现。

<div class="container mt-5">
  <table class="table table-striped">
    <!-- 表格内容 -->
  </table>
</div>

4. 边框表格：

如果你想要在表格周围添加边框，可以使用.table-bordered类。

<div class="container mt-5">
  <table class="table table-bordered">
    <!-- 表格内容 -->
  </table>
</div>

5. 响应式表格：

使用.table-responsive类可以使表格在小屏幕设备上具有水平滚动效果，避免表格内容溢出。

<div class="container mt-5">
  <div class="table-responsive">
    <table class="table">
      <!-- 表格内容 -->
    </table>
  </div>
</div>

6. 表格样式变体：

Bootstrap 4还提供了多种表格样式变体，可以根据需要选择合适的样式。例如，使用.table-success、.table-warning、.table-info等类可以给表格添加不同的背景颜色。

<div class="container mt-5">
  <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 class="table-success">
        <th scope="row">1</th>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
      </tr>
      <tr class="table-warning">
        <th scope="row">2</th>
        <td>李四</td>
        <td>30</td>
        <td>男</td>
      </tr>
      <!-- 添加更多表格行 -->
    </tbody>
  </table>
</div>

7. 表格大小：

使用.table-sm、.table（默认大小）和.table-lg类可以调整表格的大小。

<div class="container mt-5">
  <table class="table table-sm">
    <!-- 表格内容 -->
  </table>
</div>

8. 表格居中：

使用.table类加上.table-center类可以使表格水平居中。

<div class="container mt-5">
  <div class="table table-center">
    <table class="table">
      <!-- 表格内容 -->
    </table>
  </div>
</div>

9. 添加响应式断点：

在Bootstrap 4中，你还可以使用.table-responsive-{breakpoint}类来指定表格在特定断点下的响应式样式。

<div class="container mt-5">
  <div class="table-responsive-sm">
    <table class="table">
      <!-- 表格内容 -->
    </table>
  </div>
</div>

结论：

使用Bootstrap 4可以轻松设置漂亮且功能丰富的表格。通过引入Bootstrap 4的CSS和JavaScript文件，并使用其表格样式类，你可以快速创建基本表格、斑马纹表格、边

bootstrap4如何设置表格

微信扫一扫：分享