Auf GitHub anzeigen

Bootstrap Table Einführung

Eine Übersicht über Bootstrap Table, wie man es herunterlädt und verwendet, grundlegende Vorlagen und mehr.

Auf dieser Seite

Schnellstart

Möchten Sie Bootstrap Table schnell zu Ihrem Bootstrap v5-Projekt hinzufügen? Verwenden Sie CDN, kostenlos bereitgestellt von den Leuten bei CDNJS. Verwenden Sie einen Paketmanager oder müssen Sie die Quelldateien herunterladen? Gehen Sie zur Download-Seite.

CSS

Kopieren Sie den Stylesheet-<link> in Ihren <head> vor allen anderen Stylesheets, um unser CSS zu laden.

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

JS

Platzieren Sie die folgenden <script>s am Ende Ihrer Seiten, direkt vor dem schließenden </body>-Tag, um sie zu aktivieren. jQuery muss zuerst kommen, dann Bootstrap.js und dann unsere JavaScript-Plugins.

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

Startvorlage

Stellen Sie sicher, dass Ihre Seiten mit den neuesten Design- und Entwicklungsstandards eingerichtet sind. Das bedeutet, dass Sie eine HTML5-Doctype- und ein Viewport-Meta-Tag für ordnungsgemäße responsive Verhaltensweisen verwenden.

Für Bootstrap v5 verwenden wir Bootstrap Icons als Standard-Icons, daher müssen wir den Bootstrap Icons-Link importieren.

Setzen Sie alles zusammen, und Ihre Seiten sollten wie folgt aussehen:

<!doctype html>
<html lang="de">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hallo, 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>Element-ID</th>
          <th>Elementname</th>
          <th>Elementpreis</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Element 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Element 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 erfordert die Verwendung der HTML5-Doctype. Ohne sie werden Sie einige seltsame unvollständige Stile sehen, aber das Einbeziehen sollte keine erheblichen Probleme verursachen.

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

Community

Bleiben Sie auf dem Laufenden über die Entwicklung von Bootstrap Table und wenden Sie sich mit diesen hilfreichen Ressourcen an die Community.