View on GitHub

介绍

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

快速开始

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

CSS

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

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

JS

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

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

起始模板

确保您的页面符合最新的设计和开发标准。这意味着使用 HTML5 文档类型和视口 meta 标签以实现正确的响应式行为。

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

将所有内容组合在一起，您的页面应该是这样的：

<!doctype html>
<html lang="en">
  <head>
    <!-- 必需的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>你好，Bootstrap Table！</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.24.1/dist/bootstrap-table.min.css">
  </head>
  <body>
    <table data-toggle="table">
      <thead>
        <tr>
          <th>项目 ID</th>
          <th>项目名称</th>
          <th>项目价格</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>项目 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>项目 2</td>
          <td>$2</td>
        </tr>
      </tbody>
    </table>

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

HTML5 文档类型

Bootstrap Table 要求使用 HTML5 文档类型。没有它，您会看到一些不完整的样式，但包含它不应该造成任何明显的问题。

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

社区

及时了解 Bootstrap Table 的开发进展，并通过以下有用的资源与社区联系。