在 GitHub 上檢視

介紹

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

本頁目錄

快速開始

想要快速將 Bootstrap Table 添加到您的 Bootstrap v5 項目中？可以使用 CDNJS 團隊免費提供的 CDN。如果您使用包管理器或需要下載源文件，請前往下載頁面。

CSS

將以下樣式表 <link> 標簽復制到您的 <head> 標簽中，並確保它位於所有其他樣式表之前，以正確加載我們的 CSS。

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

JS

將以下 <script> 標簽放置在頁面末尾，緊鄰 </body> 結束標簽之前。請注意加載順序：jQuery 必須放在最前面，然後是 Bootstrap.js，最後是我們的 JavaScript 插件。

<script src="https://gcore.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://gcore.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://gcore.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://gcore.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://gcore.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 的最新開發動態並與社區保持聯系。