GitHub で表示

はじめに

Bootstrap Table の概要、ダウンロードして使用する方法、基本テンプレートなど。

クイックスタート

Bootstrap Table を Bootstrap v5 プロジェクトにすばやく追加するつもりですか? UNPKG の人々によって無料で提供される CDN を使用します。パッケージマネージャを使用していますか? または、ソースファイルをダウンロードする必要がありますか? ダウンロードページに移動。

CSS

CSS をロードするために、その他のすべてのスタイルシートの前に、スタイルシート <link> を <head> にコピーアンドペーストします。

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

JS

有効にするには、以下の <script> をページの最後近く、閉じタグ </body> の直前に配置します。まず jQuery が必要で、次に Bootstrap.js が必要で、その後 JavaScript プラグインが必要になります。

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

スターターテンプレート

ページを最新の設計と開発の標準でセットアップしてください。つまり、適切なレスポンシブ動作のために HTML5 doctype と 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/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.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/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.23.5/dist/bootstrap-table.min.js"></script>
  </body>
</html>

HTML5 doctype

Bootstrap Table では HTML5 doctype が必要です。それがないと、不完全なスタイルがいくつか見られますが、それを含めても特に問題はありません。

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

コミュニティ

Bootstrap Table の開発について最新情報を取得し、これらの役立つリソースを使用してコミュニティに連絡しましょう。