Ver no GitHub

Bootstrap Table Introdução

Uma visão geral do Bootstrap Table, como baixar e usar, modelos básicos e mais.

Nesta página

Início rápido

Quer adicionar rapidamente o Bootstrap Table ao seu projeto Bootstrap v5? Use o CDN, fornecido gratuitamente pelos amigos da CDNJS. Usando um gerenciador de pacotes ou precisando baixar os arquivos-fonte? Vá para a página de downloads.

CSS

Copie e cole o <link> da folha de estilos no seu <head> antes de todas as outras folhas de estilos para carregar nosso CSS.

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

JS

Coloque os seguintes <script>s perto do final das suas páginas, logo antes da tag de fechamento </body>, para habilitá-los. O jQuery deve vir primeiro, depois o Bootstrap.js e, por último, nossos plugins JavaScript.

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

Modelo inicial

Certifique-se de configurar suas páginas com os padrões mais recentes de design e desenvolvimento. Isso significa usar um doctype HTML5 e uma tag meta viewport para comportamentos responsivos adequados.

Para o Bootstrap v5, usamos os Bootstrap Icons como ícones padrão, então precisamos importar o link dos Bootstrap Icons.

Junte tudo e suas páginas devem ficar assim:

<!doctype html>
<html lang="pt-BR">
  <head>
    <!-- Meta tags obrigatórias -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Olá, 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 do Item</th>
          <th>Nome do Item</th>
          <th>Preço do Item</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Item 1</td>
          <td>R$ 1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Item 2</td>
          <td>R$ 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

O Bootstrap Table requer o uso do doctype HTML5. Sem ele, você verá alguns estilos incompletos estranhos, mas incluí-lo não deveria causar nenhum problema considerável.

<!doctype html>
<html lang="pt-BR">
  ...
</html>

Comunidade

Mantenha-se atualizado sobre o desenvolvimento do Bootstrap Table e entre em contato com a comunidade por meio desses recursos úteis.