Voir sur GitHub

Introduction

Présentation de Bootstrap Table, comment le télécharger et l'utiliser, modèles de base, et plus encore.

Sur cette page

Démarrage rapide

Vous souhaitez rapidement ajouter Bootstrap Table à votre projet Bootstrap v5 ? Utilisez CDN, fourni gratuitement par les gens de CDNJS. Vous utilisez un gestionnaire de packages ou avez-vous besoin de télécharger les fichiers source ? Rendez-vous sur la page de téléchargement.

CSS

Copiez-collez la balise <link> de la feuille de style dans votre <head> avant toutes les autres feuilles de style pour charger notre CSS.

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

JS

Placez les <script> suivants près de la fin de vos pages, juste avant la balise de fermeture </body>, pour les activer. jQuery doit venir en premier, puis Bootstrap.js, puis nos plugins JavaScript.

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

Modèle de démarrage

Assurez-vous que vos pages sont configurées avec les dernières normes de conception et de développement. Cela signifie utiliser un doctype HTML5 et une balise meta viewport pour des comportements responsives appropriés.

Pour Bootstrap v5, nous utilisons Bootstrap Icons comme icônes par défaut, nous devons donc importer le lien Bootstrap Icons.

Mettez-le tout ensemble, et vos pages devraient ressembler à ceci :

<!doctype html>
<html lang="fr">
  <head>
    <!-- Balises meta requises -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bonjour, 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 de l'élément</th>
          <th>Nom de l'élément</th>
          <th>Prix de l'élément</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Élément 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Élément 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>

Doctype HTML5

Bootstrap Table nécessite l’utilisation du doctype HTML5. Sans lui, vous verrez un style incomplet étrange, mais son inclusion ne devrait pas causer de problèmes considérables.

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

Communauté

Restez à jour sur le développement de Bootstrap Table et contactez la communauté avec ces ressources utiles.