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="ja">
  <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="ja">
  ...
</html>

コミュニティ

以下のリソースを通じて、Bootstrap Table の最新の開発動向を把握し、コミュニティと連絡を取り合うことができます。