Vedi su GitHub

Introduzione a Bootstrap Table

Una panoramica di Bootstrap Table, come scaricarlo e usarlo, modelli di base e altro ancora.

In questa pagina

Avvio rapido

Vuoi aggiungere rapidamente Bootstrap Table al tuo progetto Bootstrap v5? Utilizza CDN, fornito gratuitamente dai ragazzi di CDNJS. Utilizzando un gestore di pacchetti o hai bisogno di scaricare i file sorgente? Vai alla pagina dei download.

CSS

Copia e incolla il foglio di stile <link> nel tuo <head> prima di tutti gli altri fogli di stile per caricare il nostro CSS.

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

JS

Posiziona i seguenti <script> vicino alla fine delle tue pagine, appena prima della chiusura del tag </body>, per abilitarli. jQuery deve venire per primo, poi Bootstrap.js e infine i nostri plugin JavaScript.

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

Modello di partenza

Assicurati che le tue pagine siano impostate con gli ultimi standard di design e sviluppo. Ciò significa utilizzare un doctype HTML5 e un tag meta viewport per comportamenti responsivi corretti.

Per Bootstrap v5, utilizziamo Bootstrap Icons come icone predefinite, quindi dobbiamo importare il link di Bootstrap Icons.

Mettendo tutto insieme, le tue pagine dovrebbero assomigliare a questo:

<!doctype html>
<html lang="it">
  <head>
    <!-- Meta tag necessari -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Ciao, 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 Articolo</th>
          <th>Nome Articolo</th>
          <th>Prezzo Articolo</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Articolo 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Articolo 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 richiede l’uso del doctype HTML5. Senza di esso, vedrai alcuni stili incompleti strani, ma includerlo non dovrebbe causare problemi significativi.

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

Comunità

Tieni aggiornato sullo sviluppo di Bootstrap Table e contatta la comunità con questi utili risorse.