Ver en GitHub

Introducción a Bootstrap Table

Una descripción general de Bootstrap Table, cómo descargarlo y usarlo, plantillas básicas y más.

En esta página

Inicio rápido

¿Necesitas agregar rápidamente Bootstrap Table a tu proyecto de Bootstrap v5? Usa CDN, proporcionado gratuitamente por los amigos de CDNJS. ¿Usas un gestor de paquetes o necesitas descargar los archivos fuente? Ve a la página de descargas.

CSS

Copia y pega la hoja de estilos <link> en tu <head> antes de todas las demás hojas de estilos para cargar nuestro CSS.

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

JS

Coloca los siguientes <script> cerca del final de tus páginas, justo antes de la etiqueta de cierre </body>, para habilitarlos. jQuery debe venir primero, luego Bootstrap.js, y luego nuestros complementos de JavaScript.

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

Plantilla de inicio

Asegúrate de configurar tus páginas con los últimos estándares de diseño y desarrollo. Eso significa usar un doctype HTML5 y una etiqueta meta viewport para comportamientos responsivos apropiados.

Para Bootstrap v5, usamos Bootstrap Icons como iconos predeterminados, por lo que necesitamos importar el enlace de Bootstrap Icons.

Ponlo todo junto, y tus páginas deberían verse así:

<!doctype html>
<html lang="es">
  <head>
    <!-- Meta tags requeridos -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>¡Hola, 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 del elemento</th>
          <th>Nombre del elemento</th>
          <th>Precio del elemento</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Elemento 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Elemento 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 requiere el uso del doctype HTML5. Sin él, verás algunos estilos incompletos extraños, pero incluirlo no debería causar ningún problema considerable.

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

Comunidad

Mantente al día con el desarrollo de Bootstrap Table y ponte en contacto con la comunidad con estos recursos útiles.