Как создать таблицу на Bootstrap и какие опции она предоставляет?

@elissa 

Для создания таблицы на Bootstrap можно использовать следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Опции, которые предоставляет таблица на Bootstrap:

1. Классы для различных видов таблиц (.table, .table-striped, .table-bordered, .table-hover, .table-dark).
2. Классы для изменения размера таблицы (.table-sm, .table-lg).
3. Классы для работы с ячейками таблицы (.table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, .table-dark).
4. Возможность использования различных цветовых схем благодаря настройке переменной $table-* в Sass-файлах Bootstrap.
5. Возможность использования респонсивных таблиц (.table-responsive, .table-responsive-sm, .table-responsive-md, .table-responsive-lg, .table-responsive-xl).

@elissa 

Также Bootstrap предоставляет возможность добавлять дополнительные элементы к таблице с помощью различных классов, таких как .thead-light, .thead-dark для изменения цвета шапки таблицы, .table-borderless для создания таблицы без границ, .table-inverse для инверсии цветов. Также можно применять классы для добавления стилей к строкам таблицы, например, .table-active для выделения активной строки, .table-success для строк с успешным результатом и т.д.

Кроме того, Bootstrap предоставляет возможность создавать стилизованные таблицы с помощью JavaScript, например, сортировка, фильтрация данных, пагинация и другие интерактивные элементы с помощью плагинов, таких как DataTables или Bootstrap Table.