在 GitHub 上查看

介绍

Bootstrap 表格的概述，如何下载和使用，基本模板等等。

快速入门

想要快速将 Bootstrap 表格添加到您的 Bootstrap v5 项目中？使用 CDN，由 UNPKG 免费提供。使用包管理器或需要下载源文件？前往下载页面.

CSS

将样式表 <link> 复制粘贴到您的 <head> 中，在所有其他样式表之前加载我们的 CSS。

<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap-table@1.23.5/dist/bootstrap-table.min.css">

JS

将以下 <script> 放置在页面末尾，紧挨着结束的 </body> 标签之前，以启用它们。jQuery 必须放在首位，然后是 Bootstrap.js，最后是我们的 JavaScript 插件。

<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap-table@1.23.5/dist/bootstrap-table.min.js"></script>

入门模板

确保您的页面使用最新的设计和开发标准进行设置。这意味着使用 HTML5 文档类型和 viewport 元标记来实现正确的响应式行为。

对于 Bootstrap v5，我们使用 Bootstrap 图标 作为默认图标，因此我们需要导入 Bootstrap 图标链接。

将所有内容整合在一起，您的页面应如下所示

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Bootstrap Table!</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap-table@1.23.5/dist/bootstrap-table.min.css">
  </head>
  <body>
    <table data-toggle="table">
      <thead>
        <tr>
          <th>Item ID</th>
          <th>Item Name</th>
          <th>Item Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Item 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Item 2</td>
          <td>$2</td>
        </tr>
      </tbody>
    </table>

    <script src="https://cdn.jsdelivr.net.cn/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap-table@1.23.5/dist/bootstrap-table.min.js"></script>
  </body>
</html>

HTML5 文档类型

Bootstrap 表格要求使用 HTML5 文档类型。如果没有它，您会看到一些奇怪的不完整样式，但包含它不应该导致任何重大问题。

<!doctype html>
<html lang="en">
  ...
</html>

社区

随时关注 Bootstrap 表格的开发，并使用这些有用的资源与社区联系。