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

Пользователь

от elissa , в категории: HTML/CSS , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от carlo.cummerata , 9 месяцев назад

@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).