在 GitHub 上查看

介绍

Bootstrap Table 概述，包括下载和使用方法、基本模板等内容。

本页目录

快速开始

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

CSS

将以下样式表 <link> 标签复制到您的 <head> 标签中，并确保它位于所有其他样式表之前，以正确加载我们的 CSS。

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

JS

将以下 <script> 标签放置在页面末尾，紧邻 </body> 结束标签之前。请注意加载顺序：jQuery 必须放在最前面，然后是 Bootstrap.js，最后是我们的 JavaScript 插件。

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

入门模板

请确保您的页面遵循最新的设计和开发标准。这包括使用 HTML5 doctype 和 viewport meta 标签，以实现正确的响应式行为。

对于 Bootstrap v5，我们使用 Bootstrap Icons 作为默认图标库，因此需要引入 Bootstrap Icons 的样式文件。

将以上所有内容组合在一起，您的页面应该如下所示：

<!doctype html>
<html lang="zh-CN">
  <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.26.0/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.26.0/dist/bootstrap-table.min.js"></script>
  </body>
</html>

HTML5 doctype

Bootstrap Table 需要使用 HTML5 doctype。如果没有它，您可能会看到一些不完整的样式问题，但添加它通常不会引起任何兼容性问题。

<!doctype html>
<html lang="zh-CN">
  ...
</html>

社区

通过以下资源，您可以随时了解 Bootstrap Table 的最新开发动态并与社区保持联系。