Посмотреть на GitHub

Введение

Обзор Bootstrap Table, включая загрузку и использование, базовый шаблон и т.д.

На этой странице

Быстрый старт

Хотите быстро добавить Bootstrap Table в ваш Bootstrap v5 проект? Вы можете использовать CDN, предоставленную командой CDNJS бесплатно. Если вы используете менеджер пакетов или вам нужно скачать исходные файлы, пожалуйста, перейдите на страницу загрузки.

CSS

Скопируйте следующий тег <link> таблицы стилей в ваш тег <head> и убедитесь, что он находится перед всеми другими таблицами стилей, чтобы правильно загрузить наш CSS.

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

JS

Разместите следующий тег <script> в конце страницы, непосредственно перед закрывающим тегом </body>. Обратите внимание на порядок загрузки: jQuery должен быть в самом начале, затем Bootstrap.js, и наконец наш JavaScript плагин.

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

Начальный шаблон

Убедитесь, что ваша страница соответствует последним стандартам дизайна и разработки. Это включает использование HTML5 doctype и viewport meta тега для правильного адаптивного поведения.

Для Bootstrap v5 мы используем Bootstrap Icons как библиотеку иконок по умолчанию, поэтому необходимо подключить файл стилей Bootstrap Icons.

Объединив всё вышеперечисленное, ваша страница должна выглядеть следующим образом:

<!doctype html>
<html lang="ru">
  <head>
    <!-- Обязательные meta-теги -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Привет, 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 проекта</th>
          <th>Название проекта</th>
          <th>Цена проекта</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Проект 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Проект 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 требует использования HTML5 doctype. Без него вы можете увидеть некоторые неполные проблемы со стилями, но добавление его обычно не вызывает никаких проблем совместимости.

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

Сообщество

Через следующие ресурсы вы всегда можете быть в курсе последних разработок Bootstrap Table и поддерживать связь с сообществом.