Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Бутстрап таблица: Таблицы. Содержание · Bootstrap v5.0.2

Содержание

Таблицы · Bootstrap на русском

Из-за повсеместного использования таблицы через сторонние виджеты календарями и датами, мы разработали таблицы Для быть отказ в. Просто добавьте базовый класс .table любой <table>, расширить пользовательские стили или различных классов включен модификатор.

Содержание

Примеры

Используя самые элементарные таблица наценки, вот как .table на основе таблицы смотри на Bootstrap.

#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>

Вы также можете инвертировать цвета—со светлым текстом на темном фоне—с .

table-inverse.

#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>

Таблица параметры заголовка

Аналогично по умолчанию и обратные таблицы, использовать один из двух классов модификатор, чтобы сделать <thead> появляются светло-или темно-серый.

#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3		Larrythe Bird@twitter
#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>

«Зебра»

Используйте .table-striped для добавления зебра-чередование любого таблица подряд в <tbody>.

#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>
#ИмяФамилияПользователь
1MarkOtto@mdo
2Jacob
Thornton		@fat
3Larrythe Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>

Рамочная таблица

Добавить .table-bordered для границ со всех сторон таблица и клеток.

#ИмяФамилияПользователь
1MarkOtto@mdo
2MarkOtto@TwBootstrap
3JacobThornton@fat
4Larry the Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
#ИмяФамилияПользователь
1MarkOtto@mdo
2
Mark		Otto@TwBootstrap
3JacobThornton@fat
4Larry the Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Наведение строк

Добавить .table-hover для включения наведение состояние О таблица строк в <tbody>.

#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Небольшая таблица

Добавьте класс .table-sm, чтобы сделать таблицу более компактной, уменьшив наполовину внутренний отступ в ячейках.

#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Контекстные классы

Использовать контекстные классы для стиля строк таблицы или отдельных ячеек.

КлассОписание
.table-activeПрименяет цвет при наведении на конкретную строку или ячейку
.table-successУказывает на успешное или позитивное действие
.table-infoУказывает на нейтральные информативные изменения или действия
.table-warningУказывает на предупреждения, которые могут потребовать внимания
.table-dangerУказывает на опасное или потенциально негативное действие
#Заголовок столбцаЗаголовок столбцаЗаголовок столбца
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn content
<!-- В строках -->
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>

<!-- В ячейках (`td` или `th`) -->
<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>

Регулярное таблица вариантов предпосылки не доступно с обратным таблица, однако, вы можете использовать текст или фона утилит для достижения подобных стилей.

#Заголовок столбцаЗаголовок столбцаЗаголовок столбца
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn content
<!-- В строках -->
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>

<!-- В ячейках (`td` или `th`) -->
<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>
Передать смысл для ассистивных технологий

Используя цвет, чтобы добавить смысл только обеспечивает визуальную индикацию, которая не будет доведена до пользователей ассистивных технологий, таких как экранные дикторы. Убедитесь, что информация обозначается цвет либо очевидно из самого содержимого (например, текст), или включен с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only класс.

Адаптивные таблицы

Сделать таблицу адаптивной можно просто с помощью добавления класса .table-responsive к .table, благодаря этому у Вас появятся полосы прокрутки таблицы на устройствах с малыми дисплеями (менее 768px). При просмотре таблицы на устройстве с шириной экрана более чем 768px Вы даже не заметите разницы.

Вертикальной подрезки/усечения

Адаптивный таблицы использовать overflow-y: hidden, который загибается любое содержание, которое выходит за пределы нижней или верхней кромками таблица. В частности, это может клип выпадающие меню и другие сторонние виджеты.

Firefox и fieldsets

Firefox имеет какой-то несуразный набор полей для укладки участием width что мешает быть таблице адаптивной. Это не может быть изменено без Firefox на конкретные взломать, что мы не дают в Bootstrap:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Для получения дополнительной информации, прочитайте этот ответ на Stack Overflow.

#Таблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица Заголовок
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
#Таблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица Заголовок
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
<div>
  <table>
    ...
  </table>
</div>

Обратный стиль

Превратите традиционную таблицу на их стороне с помощью table-reflow. При использовании обратного стиля, заголовок таблицы будет в первом столбце, первая строка таблицы становится второй колонкой, вторая строка становится третьей колонкой, и т. д.

Содержание заказа и сложных таблицы

Помните, что table-reflow изменения стиля визуальный порядок содержания. Убедитесь, что вы только применить этот стиль к хорошо сформированные и простые данные таблицы (и в частности, не использовать это для разметка таблицы) с соответствующими <th> таблица заголовков ячеек для каждой строки и столбца.

Кроме того, этот класс не будет работать за таблицы клеток, которые охватывают несколько строк или столбцов (с помощью rowspan или colspan атрибуты).

#Таблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица Заголовок
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

Таблицы в Bootstrap 4 | WebReference

Bootstrap 4 добавил несколько новых классов таблиц, которые помогают создавать единообразно оформленные и адаптивные таблицы.

Базовая таблица

Для базовой таблицы, с небольшим padding у ячеек и горизонтальными разделителями, примените класс .table к элементу <table>.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <table> <thead> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> </thead> <tfoot> <tr> <th>Подвал 1</th> <th>Подвал 2</th> <th>Подвал 3</th> </tr> </tfoot> <tbody> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> </tbody> </table>

Тёмная таблица

Вы можете использовать класс .table-dark для инвертирования цветов, чтобы на тёмном фоне был светлый текст.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <table> <thead> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> </thead> <tfoot> <tr> <th>Подвал 1</th> <th>Подвал 2</th> <th>Подвал 3</th> </tr> </tfoot> <tbody> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> </tbody> </table>
Новое в Bootstrap 4

Тёмные таблицы являются новыми в Bootstrap 4.

Полосатая таблица

Для чередования фоновых цветов в строках добавьте класс .table-striped (оставляя при этом класс .table на месте).

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <table> <thead> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> </thead> <tfoot> <tr> <th>Подвал 1</th> <th>Подвал 2</th> <th>Подвал 3</th> </tr> </tfoot> <tbody> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> </tbody> </table>

Таблица с обрамлением

Для границ по всей таблице используйте класс .table-borded (оставляя при этом класс .table на месте).

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <table> <thead> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> </thead> <tfoot> <tr> <th>Подвал 1</th> <th>Подвал 2</th> <th>Подвал 3</th> </tr> </tfoot> <tbody> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> </tbody> </table>

Подсветка строк

Чтобы добиться эффекта «подсветки», когда курсор наводится на строки таблицы, используйте класс .table-hover (оставляя при этом класс .table на месте).

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <table> <thead> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> </thead> <tfoot> <tr> <th>Подвал 1</th> <th>Подвал 2</th> <th>Подвал 3</th> </tr> </tfoot> <tbody> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> </tbody> </table>

Стили заголовка таблицы

Вы можете добавить фоновый цвет к элементу <thead> с помощью .thead-default или .thead-inverse.

Светлый

Используйте класс .thead-light.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <table> <thead> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> </thead> <tfoot> <tr> <th>Подвал 1</th> <th>Подвал 2</th> <th>Подвал 3</th> </tr> </tfoot> <tbody> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> </tbody> </table>

Тёмный

Используйте класс .thead-dark.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <table> <thead> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> </thead> <tfoot> <tr> <th>Подвал 1</th> <th>Подвал 2</th> <th>Подвал 3</th> </tr> </tfoot> <tbody> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> </tbody> </table>
Новое в Bootstrap 4

Стили заголовка таблицы являются новыми в Bootstrap 4.

Маленькие/сжатые таблицы

Если вы считаете, что в таблице слишком много отступов, то можете убрать их наполовину через класс .table-sm (оставляя при этом класс .table на месте).

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <table> <thead> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> </thead> <tfoot> <tr> <th>Подвал 1</th> <th>Подвал 2</th> <th>Подвал 3</th> </tr> </tfoot> <tbody> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> </tbody> </table>
Bootstrap 4 против Bootstrap 3

Обратите внимание, что Bootstrap 4 использует .table-sm для сжатия таблицы, а Bootstrap 3 использует .table-condensed. Оба уменьшают padding для ячеек вполовину.

Контекстные классы

Вы можете применить цвет к отдельным строкам или ячейкам с помощью пяти контекстных классов Bootstrap: .table-active, .table-success, .table-info, .table-warning и .table-danger.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <table> <thead> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> </thead> <tbody> <tr> <td>Активный</td> <td>Успех</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>Информация</td> <td>&nbsp;</td> </tr> <tr> <td>Опасность</td> <td>&nbsp;</td> <td>Предупреждение</td> </tr> </tbody> </table>
Bootstrap 4 против Bootstrap 3

Bootstrap 3 не задействует префикс .table- для своих контекстных классов. К примеру, Bootstrap 3 использует .active, тогда как Bootstrap 4 .table-active. Кроме этого, обе версии используют одни и те же пять контекстных ключевых слов (active, success, info, warning, danger).

Адаптивные таблицы

Адаптивные таблицы автоматически создают горизонтальную полосу прокрутки при просмотре на устройствах меньше заданной точки останова. Чтобы создать адаптивную таблицу, заключите таблицу в элемент <div> с классом .table-responsive (или один из классов .table-responseive-*).

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <div> <table> <thead> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> <th>Заголовок 4</th> <th>Заголовок 5</th> <th>Заголовок 6</th> <th>Заголовок 7</th> <th>Заголовок 8</th> <th>Заголовок 9</th> <th>Заголовок 10</th> </tr> </thead> <tbody> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> </tbody> </table> </div>

Классы .table-responseive-* могут использоваться для указания конкретной точки останова. Это .table-response-sm, .table-response-md, .table-responseive-lg и .table-responseive-xl. С указанной точки останова и выше таблица будет вести себя обычно, а не прокручиваться горизонтально.

Класс .table-responseive эквивалентен .table-responseive-md.

Автор и редакторы

Автор: Йен Диксон

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Bootstrap Бутстрап 4 Tables — таблицы


Базовая таблица Bootstrap 4

Базовая загрузочная таблица 4 имеет светлую обивку и горизонтальные разделители.

.table класс добавляет базовый стиль к таблице:

Чередующиеся строки

.table-striped класс добавляет к таблице зебра-полосы:

Граница таблицы

.table-bordered класс добавляет границы со всех сторон таблицы и ячеек:

Наведите строки

.table-hover класс добавляет эффект наведения (серый цвет фона) в строках таблицы:

Черный/темный стол

.table-dark класс добавляет черный фон в таблицу:

Темный полосатый стол

Объединить .table-dark и .table-striped создать темный, полосатый стол:

Парящий темный стол

.table-hover класс добавляет эффект наведения (серый цвет фона) в строках таблицы:

Таблица без границ

.table-borderless класс удаляет границы из таблицы:

Контекстные классы

Контекстные классы можно использовать для окраски всей таблицы ( <table> ), строк таблицы ( <tr> ) или ячеек таблицы ( <td> ).

Можно использовать следующие контекстные классы:

КлассОписание
.table-primaryСиний: указывает на важное действие
.table-successЗеленый: указывает на успешное или положительное действие
.table-dangerКрасный: указывает на опасное или потенциально отрицательное действие
.table-infoСветло-голубой: указывает нейтральное информативное изменение или действие
.table-warningОранжевый: указывает на предупреждение, которое может потребоваться внимание
.table-activeСерый: применение цвета наведения к строке таблицы или ячейке таблицы
.table-secondaryСерый: указывает на несколько менее важное действие
.table-lightСветло-серый фон таблицы или строки таблицы
.table-darkТемно-серый фон таблицы или строки таблицы

Цвета настольной головки

.thead-dark класс добавляет черный фон в заголовки таблицы, а .thead-light класс добавляет серый фон в заголовки таблицы:

Маленький столик

.table-sm класс делает таблицу меньше, сокращая заполнение ячеек пополам:

Адаптивные таблицы

.table-responsive класс создает адаптивную таблицу: горизонтальная полоса прокрутки добавляется к таблице на экранах, которые меньше, чем 992пкс Wide (при необходимости). При просмотре на что-либо больше, чем 992пкс широкий, нет никакой разницы:

Пример

<div>
  <table>
    …
  </table>
</div>

Вы также можете решить, когда таблица должна получить полосу прокрутки, в зависимости от ширины экрана:

КлассШирина экрана
.table-responsive-sm< 576px
.table-responsive-md< 768px
.table-responsive-lg< 992px
.table-responsive-xl< 1200px

Пример

<div>
  <table>
    …
  </table>
</div>


Руководство Bootstrap 4 Tables — Hoow

<

div itemprop=»articleBody»>

Bootstrap позволяет создавать красивые таблицы с помощью фреймворка CSS. В версии 4 есть несколько новых классов для инвертирования цвета таблицы и обеспечения адаптивности таблицы. В этом руководстве мы обсудим различные возможности создания таблиц Bootstrap 4.

Таблица Bootstrap 4 по умолчанию

В таблице начальной загрузки используются все теги таблицы HTML с заголовком внутри

и телом таблицы внутри тегов. В нашем примере давайте создадим простую таблицу оценок в формате таблицы с четырьмя именами учащихся (в строках) и пятью предметами со средним процентом (в столбцах). Ниже приведен код для таблицы Bootstrap по умолчанию.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!-- Start of Table -->
<table>
<thead>
<tr>
<th>Student Name</th>
<th>Sub1</th>
<th>Sub2</th>
<th>Sub3</th>
<th>Sub4</th>
<th>Sub5</th>
<th>%</th>
</tr>
</thead>
<tbody> <tr>
<td>Thomas</td>
<td>80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>
<td>Peter</td>
<td>100</td>
<td>90</td>
<td>68</td>
<td>75</td>
<td>89</td>
<td>84.4</td>
</tr>
<tr>
<td>John</td>
<td>55</td>
<td>43</td>
<td>57</td>
<td>76</td>
<td>45</td>
<td>55.2</td>
</tr>
<tr>
<td>Kelly</td>
<td>84</td>
<td>76</td>
<td>89</td>
<td>76</td>
<td>90</td>
<td>83</td>
</tr>
</tbody>
</table>
<!-- End of Table -->
<!-- Bootstrap 4 Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh5U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

По умолчанию единственный класс CSS, необходимый для создания таблицы Bootstrap, — это класс «table», применяемый непосредственно к элементу таблицы HTML. Вам не нужно создавать тег

<

div> для вставки таблиц в Bootstrap. Тег по умолчанию даст следующий результат:

Предлагает: Получите 97% скидку на конструктор сайтов Mobirise Bootstrap.

Инвертирование цветов таблицы

Bootstrap 4 позволяет вам инвертировать цвет вашей таблицы, добавляя «table-inverse» к тегу

<

table>. Фон будет темным, а текст — светлым. Код должен выглядеть так:

таблица-инверсия«>

Все содержимое здесь остается таким же, как и в таблице по умолчанию.

У обратной таблицы будет очень темный и привлекательный фон, как показано ниже:

Таблица обратного заголовка

В предыдущем случае класс «table-inverse» применялся ко всей таблице. Bootstrap 4 также позволяет инвертировать только цвет фона заголовка и текста. Чтобы инвертировать заголовок, просто добавьте класс thead-inverse к тегу

.
class = «thead-inverse»>

И наша таблица с отметками будет иметь черную строку заголовка, как показано ниже:

Это не все!!! С Bootstrap есть еще много возможностей. Создадим еще несколько вариаций.

Полосатый стол Bootstrap 4

Полосатая таблица позволяет создавать альтернативные цвета для строк. Просто добавьте «таблица с полосами» к существующему классу «таблица», и таблица будет иметь узор с полосами. Светло-серый цвет фона будет применен ко всем строкам с нечетными номерами, начиная с первой строки.

полосатый стол«>

Полосатая таблица в основном предпочтительна для разделения строк и демонстрации контента посетителям.

Таблица с границами Bootstrap

Это просто добавит границу в таблицу по умолчанию. Что вам нужно, так это добавить класс «с рамкой таблицы» к существующему классу «таблица».

Наша таблица маркировки с рамкой должна выглядеть так:

Вы также можете легко создать таблицу с границами с полосами на строках.

стол в полоску стол в полоску«>
Таблица с эффектами наведения на строки

Как насчет добавления эффектов наведения к вашей таблице? Класс «table-hover» сделает это за вас. Наведите указатель мыши на таблицу, чтобы увидеть, что соответствующая строка выделена светло-серым цветом фона.

парение стола«>

Ниже показано, как ваша таблица должна выглядеть, когда вы наводите указатель мыши на вторую строку.

Адаптивная таблица начальной загрузки для устройств размером менее 768 пикселей

Создать адаптивную таблицу в Bootstrap 4 очень просто. Вам не нужно добавлять дополнительный

для повышения отзывчивости. Просто вставьте класс «реагирующий на таблицу», горизонтальная полоса прокрутки будет автоматически добавлена ​​к таблице при просмотре в браузере с размером экрана ниже 768 пикселей.

таблица отзывчивый«>

Вот как будет выглядеть наша адаптивная таблица. Помните, что горизонтальная полоса прокрутки появится только тогда, когда таблица просматривается на экране размером менее 768 пикселей. В противном случае вы не найдете никакой разницы по сравнению с обычной таблицей Bootstrap.

Таблица начальной загрузки со сжатым текстом

Иногда бывает необходимо уменьшить высоту стола, чтобы уменьшить занимаемое пространство. Bootstrap позволяет сделать это, добавляя класс table-sm к существующему классу table, как показано ниже:

Это уберет набивку и уменьшит высоту стола.

Создание таблицы начальной загрузки с цветом фона

На данный момент мы обсудили создание простой таблицы или использование светло-серого фона по умолчанию для строк. Bootstrap также позволяет раскрашивать ячейки и строки таблицы, чтобы сделать ее красивой. Вы можете выделить любые строки или любые ячейки таблицы пятью разными цветами. Есть два набора классов CSS, которые помогут вам добавить цвета фона: один — это контекстные классы, а другой — вспомогательные классы фона. В таблице ниже описаны различные доступные варианты:

Таблица контекстных классов
таблица активнаСветло-серый цвет при наведении
таблица успехаСветло-зеленый успех или позитивное действие
информация о таблицеГолубой для информационного сообщения
таблица-предупреждениеСветло-желтый для индикации предупреждения
опасность за столомСветло-красный для обозначения опасности
таблица-первичныйГолубой для обозначения основного цвета в Bootstrap
стол вторичныйСветло-красный для обозначения опасности
настольная лампаСветло-серый для обозначения отсутствия цвета
стол-темныйСветло-черный для обозначения темноты
Фоновая служебная программа / контекстные классы
bg-primaryСредний синий как основной цвет
bg-успехЗеленый лес для успеха
bg-предупреждение Свобода слова зеленого цвета для предупреждения
bg-infoСветло-зеленый для информации
bg-опасностьКрасный (Киноварь) для опасности
bg-lightОдиночество для света
bg-darkЦвет Mirage для темноты
bg-вторичныйЦвет алюминия для вторичного
Помните, что эти классы могут применяться к отдельным строкам и ячейкам таблицы Bootstrap в любой комбинации.

Предлагает: Получите 97% скидку на конструктор сайтов Mobirise Bootstrap.

Цветные строки с контекстными классами

Давайте применим контекстные классы в нашей таблице оценок, чтобы увидеть их в действии. Код ниже применяет класс «table-active» к первой строке таблицы, чтобы изменить цвет фона на светло-серый.

class = «table-active»>
Томас 80 90 70 80 75 79

Ниже показано, как будет выглядеть полная таблица, когда вы примените классы «table-success», «table-warning» и «table-dangerous» ко второму, третьему и четвертому элементам

таблицы.

Цветные строки с цветами фона

Как и в случае с контекстными классами таблиц, вы можете применять цвета фона к строкам с помощью контекстных классов фона.

class = «bg-success»>
Томас 80 90 70 80 75 79

Ниже приведена привлекательная таблица, в которой к строкам применяются классы «bg-success», «bg-dangerous», «bg-warning», «bg-info» и другие служебные классы фона.

Цветные ячейки с контекстными классами

К каждой ячейке таблицы Bootstrap можно применить один из контекстных классов, чтобы выделить его из других ячеек. Это будет действительно полезно, когда у вас большая таблица и вы хотите выделить только несколько ячеек. Код ниже показывает применение контекстного класса «table-active» к ячейке таблицы.

Томасclass = «table-active»> 80 90 70 80 75 79

В таблице ниже четыре ячейки с разными цветами фона применены случайным образом.

Цветные строки и ячейки с фоновыми цветами и контекстными классами

Наконец, вы можете применить контекстный класс таблицы и контекстный класс фона в любой комбинации, чтобы сделать разные цвета фона для строк и ячеек.

class = «table-active»>
Томасclass = «информация о таблице»> 80 90 70 80 75class = «bg-success»> 79

Вот как будет выглядеть примерная таблица с различными цветами, примененными к строкам и ячейкам.

Навигация по записям

Похожие записи

Прокрутить вверх

Bootstrap таблицы для начинающих

Продолжаем изучать Bootstrap и сегодня как вы могли догадаться из название пойдет речь о таблицах.

Стандартные бутстраповские таблицы имеют такое оформление:

  • Внутренние отступы ячеек.
  • Нету вертикальных границ, но добавлены серые горизонтальные.

Для этого нужно добавить вашей таблице класс table :


  <table>
    <tbody>
      <tr>
        <th>Имя</th>
        <th>Работа</th>
        <th>Город</th>
      </tr>
      <tr>
        <td>Влад</td>
        <td>Занимаюсь Front end'ом</td>
        <td>Питер</td>
      </tr>
      <tr>
        <td>Андрей</td>
        <td>Back end разработчик</td>
        <td>Минск</td>
      </tr>
      <tr>
        <td>Максим</td>
        <td>Занимаюсь SEO оптимизацией</td>
        <td>Москва</td>
      </tr>
    </tbody>
  </table>


Но их можно улучшить под свои хотелки добавляя определенные классы.

Название классаЧто он делает
 table-stripedЧередует цвета строк
 table-borderedДобавляет ячейкам границы
 table-hoverИзменяет цвета строк при наведении
table-condensedУменьшает отступы ячеек
 Тут несколько классовИзменяет фон ячеек (смотрите внизу)
table-responsiveТаблица становиться адаптивной

Внизу находится подробная информация про каждый класс.

Чередование цвета строк


<table class = "table table-striped"> 
  ...
</table>

Этот эффект называют — зебра. Он добавляет серый цвет не четным строкам.

В Internet Explorer 8 и ниже вы не заметите никаких изменений (некоторые функции не используются).

Добавление границ


<table class = "table table-bordered"> 
  ...
</table>

У стандартной таблицы ячейки не имеют границ, поэтому нужно их самостоятельно добавлять.

Изменение цвета ячеек при наведении


<table class = "table table-hover"> 
  ...
</table>

При наведении на строки их фон будет становиться сероватым. Скажу сразу, увидеть хоть какие-то изменения сложно.

Компактные отступы


<table class = "table table-condensed"> 
  ...
</table>

Ячейки таблицы будут выглядеть меньше из-за уменьшения отступов (paddind). Так можно сделать таблицу компактнее, если мало места.

Фон ячеек

Bootstrap имеет пять стандартных фонов. Вы можете сделать тоже самое создав свой класс с background-color.

Название классаЧто он делает
activeИспользуется когда пользователь навел на строку или ячейку
warningПредупреждение, нужно обратить свое внимание
infoДополнительная информация
successУспешное выполнение
dangerЧто-то пошло неправильно

 

Адаптивные таблицы


<div class = "table-responsive">
  <table class = "table">
    ...
  </table>
</div>

Таблица автоматически подстраивается под размер окна. Так если ширина окна не вмещает содержимое внизу появится горизонтальный скрол. На ширине больше таблица выглядит как обычно.

Добавление этого класса идет к блоку div, который является родительским для таблицы

Поделиться ссылкой:

Центрирующая таблица на странице на bootstrap



Я пытаюсь центрировать таблицу с помощью bootstrap.

Вот это html:

<div>
    <table>
        <thead>
            <tr>
                <th>Total votes</th>
                <th> = </th>
                <th>Voter A</th>
                <th> + </th>
                <th>Voter B</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{ total_votes }}</td>
                <td> = </td>
                <td>{{ total_voter_a }}</td>
                <td> + </td>
                <td>{{ total_voter_b }}</td>
            </tr>
        </tbody>    
    </table>
</div>

Однако, как бы я ни настраивал css, таблица все равно выравнивается влево. Я уверен, что упускаю что-то простое. Я также думал, что container-fluid сделает таблицу охватывающей всю страницу.

вот это css:

.table th {
    text-align: center;
}

.table {
    border-radius: 5px;
    width: 50%;
    float: none;
}
html css twitter-bootstrap
Поделиться Источник H C     14 декабря 2015 в 15:50

2 ответа

  • Bootstrap-таблица: текст на китайском языке

    Я использую таблицу bootstrap на одной из своих веб-страниц. Таблица начальной загрузки: ссылка У меня есть маленькая и забавная проблема : Как вы можете видеть, тексты таблиц boostrap написаны на китайском языке. Как изменить язык ?

  • Центрирующая таблица и кнопка отправки CSS

    Центрирующая таблица на моем экране работает с такими CSS строками: margin-left: auto; margin-right: auto; Однако для кнопки отправки она не работает, нужно ли вводить ее вручную, как margin-right:400px ? Но если экран чужих людей имеет большее разрешение, то он не будет находиться в центре?


29

Ты пропускаешь margin:auto

.table {
    border-radius: 5px;
    width: 50%;
    margin: 0px auto;
    float: none;
}

Пример

Поделиться Antonio Smoljan     14 декабря 2015 в 15:57


6

Измените свой CSS на:

table{
   margin: 0 auto
}

Поделиться patrick     14 декабря 2015 в 15:56

Похожие вопросы:


Адаптивная таблица Bootstrap

Я пытаюсь сделать не реагирующую таблицу отзывчивой, используя bootstrap в Joomla. Таблица генерируется PHP для воспроизведения событий. Я уже применить загрузочный таблица классов и контейнер. Но…


Всплывающие подсказки Bootstrap не работают на странице, отличной от первой из datatables

Я разрабатываю несколько datatables, где ячейки некоторых столбцов имеют всплывающие подсказки bootstrap. Поэтому я использую: Фреймворк Bootstrap Datatables . Datatables состоит из нескольких…


Использование bootstrap и jqueryui на одной странице конфликтует?

У меня есть jqueryui и twitter bootstrap, загруженные на одной странице. Однако они оба содержат функцию всплывающей подсказки, весь сайт основан на bootstrap, поэтому я не могу удалить ее со…


Bootstrap-таблица: текст на китайском языке

Я использую таблицу bootstrap на одной из своих веб-страниц. Таблица начальной загрузки: ссылка У меня есть маленькая и забавная проблема : Как вы можете видеть, тексты таблиц boostrap написаны на…


Центрирующая таблица и кнопка отправки CSS

Центрирующая таблица на моем экране работает с такими CSS строками: margin-left: auto; margin-right: auto; Однако для кнопки отправки она не работает, нужно ли вводить ее вручную, как…


Поиск на странице с JavaScript Bootstrap

я бы построил страницу с Bootstrap и использовал форму navbar-search для поиска искомого текста на той же странице. Какой сценарий JS я должен использовать для этого? Я бы хотел, чтобы для каждого…


Рендеринг Bootstrap modal на той же странице

Привет, я пытаюсь визуализировать всплывающее окно входа в систему с помощью Bootstrap modal. Но это не рендеринг на той же странице, что и рендеринг на новой странице. Это мой код.: <%= link_to…


Bootstrap-таблица 1.15.4 разбиение на страницы количество строк на странице выпадающий список не работает

Bootstrap-таблица bootstrap-table.min.js 1.15.4 Bootstrap bootstrap.min.js 4.3.1 Jquery jquery-min.js 3.4.1 Страница загружается просто отлично. Однако выпадающий список для выбора количества строк…


Таблица Bootstrap не разбивается на страницы

Следуя онлайн-учебникам, я реализовал следующий простой код html с помощью Bootstrap в надежде получить разбиение на страницы, панель поиска и многое другое: <!DOCTYPE html> <html>…


Codeigniter загрузка bootstrap только на странице index.php

Я загружаю bootstrap таким образом на своей странице просмотра : <link rel=stylesheet href=<? echo base_url(‘assets/css/bootstrap.min.css’)?>> автоматическая загрузка:…

Bootstrap — Таблицы

Bootstrap обеспечивает чистый макет для построения таблиц. Некоторые из элементов таблицы поддерживаемых Bootstrap, являются:

 

 

 

ТегОписание
<table>Обертывание элемента для отображения данных в табличном формате
<thead>Элемент контейнера для заголовка таблицы строк, с (<tr>) для заголовка таблицы столбцов.
<tbody>Элемент контейнера для строк таблицы (<tr>) в теле таблицы.
<tr>Элемент контейнера для набора ячеек таблицы (<td> или <th>), которые появляется на одной строке.
<td>По умолчанию ячейки таблицы.
<th>Специальная ячейка таблицы для столбца (или строки, в зависимости от объема и размещения) заголовков. Должен быть использован в пределах <thead>
<caption>Описание или резюме того, что имеет место в таблице.

Базовая таблица

Если вы хотите хороший, основной стиль таблицы с только некоторыми световым отступов и горизонтальными разделителями, добавьте базовый класс .table для любой таблицы, как показано в следующем примере:

<table class = "table">
   <caption>Basic Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
	
</table>

 

Необязательные классы в таблице

Наряду с базовой разметкой таблиц и класса .table, есть несколько дополнительных классов, которые вы можете использовать, в качестве стиля разметки. Следующие разделы дадут вам представление о всех этих классах.

Полосатая Таблица

Добавляя класса .table-striped, вы получите полосы на границах строк в пределах <tbody>, как показано в следующем примере:

<table class = "table table-striped">
   <caption>Striped Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
   
</table>

 

Окаймленная таблица

Добавляя класс .table-bordered, вы получите границы вокруг каждого элемента и закругленные углы вокруг всей таблицы, как показано в следующем примере:

<table class = "table table-bordered">
   <caption>Bordered Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
	
</table>

 

Hover в таблице

При добавлении класса .table-hover, светло-серый фон будет добавлен к строкам, когда курсор находится над ними, как показано в следующем примере:

<table class = "table table-hover">
   <caption>Hover Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
   
</table>

 

Сокращенная таблица

Путем добавления класса .table-condensed, рамка строки разрезается пополам, чтобы сжать таблицу, как показано в следующем примере. Это полезно, если вы хотите указать какую-либо более плотную информацию.

<table class = "table table-condensed">
   <caption>Condensed Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
   
</table>

 

Контекстные классы

Контекстуальные классы, приведенные в следующей таблице позволят изменить цвет фона строк таблицы или отдельных ячеек.

КлассОписание
.activeПрименяется цвет при наведении к конкретной строке или ячейке
.successУказывает на успешное или положительное действие
.warningУказывает на предупреждение, что, возможно, потребуется внимание
.dangerУказывает на опасное или потенциально негативное действие

Эти классы могут быть применены к <tr>, <td> или <th>.

<table class = "table">
   <caption>Contextual Table Layout</caption>
   
   <thead>
      <tr>
         <th>Product</th>
         <th>Payment Date</th>
         <th>Status</th>
      </tr>
   </thead>
   
   <tbody>
      <tr class = "active">
         <td>Product1</td>
         <td>23/11/2013</td>
         <td>Pending</td>
      </tr>
      
      <tr class = "success">
         <td>Product2</td>
         <td>10/11/2013</td>
         <td>Delivered</td>
      </tr>
      
      <tr class = "warning">
         <td>Product3</td>
         <td>20/10/2013</td>
         <td>In Call to confirm</td>
      </tr>
      
      <tr class = "danger">
         <td>Product4</td>
         <td>20/10/2013</td>
         <td>Declined</td>
      </tr>
   </tbody>
   
</table>

 

Отзывчивые таблицы

При упаковке любого .table в класс .table-responsive, вы создадите в таблице прокрутку по горизонтали на небольших устройств (под 768px). При просмотре на что-либо большее, чем 768px в ширину, вы не увидите никакой разницы в этих таблицах.

<div class = "table-responsive">
   <table class = "table">
      
      <caption>Responsive Table Layout</caption>
      
      <thead>
         <tr>
            <th>Product</th>
            <th>Payment Date</th>
            <th>Status</th>
         </tr>
      </thead>
      
      <tbody>
         <tr>
            <td>Product1</td>
            <td>23/11/2013</td>
            <td>Pending</td>
         </tr>
         
         <tr>
            <td>Product2</td>
            <td>10/11/2013</td>
            <td>Delivered</td>
         </tr>
         
         <tr>
            <td>Product3</td>
            <td>20/10/2013</td>
            <td>In Call to confirm</td>
         </tr>
         
         <tr>
            <td>Product4</td>
            <td>20/10/2013</td>
            <td>Declined</td>
         </tr>
      </tbody>
      
   </table>
</div>

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Введение · Таблица начальной загрузки

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

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

Хотите быстро добавить Bootstrap Table в свой проект Bootstrap v4? Используйте CDN, бесплатно предоставляемый сотрудниками UNPKG. Используете менеджер пакетов или вам нужно скачать исходные файлы? Перейдите на страницу загрузок.

CSS

Скопируйте и вставьте таблицу стилей в свой перед всеми другими таблицами стилей, чтобы загрузить наш CSS.

JS

Поместите следующие

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

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

Для Bootstrap v4 мы используем Font Awesome в качестве значков по умолчанию, поэтому необходимо импортировать ссылку Font Awesome.

Сложите все вместе, и ваши страницы должны выглядеть так:

  

  
    
    
    
     Привет, таблица начальной загрузки! 

    
  
    

      
        

           Идентификатор позиции 
           Название предмета 
           Цена предмета 
        

      
      
        

           1 
           Пункт 1 
           1 доллар 
        

        

           2 
           Пункт 2 
           2 доллара

Тип документа HTML5

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

  

  ...

Будьте в курсе разработки Bootstrap Table и обращайтесь к сообществу с помощью этих полезных ресурсов.

Примеры таблиц начальной загрузки

Перейти к основному содержанию
  • Дом
  • Документация
  • Темы
  • Примеры
  • Онлайн редактор
  • Новости
  • Блог
  • Bootstrap v4 Bootstrap v5 Bootstrap v3 Таблица начальной загрузки Семантический интерфейс Бульма Материализовать Фонд
  • GitHub
  • Твиттер
  • Открытый коллектив
Скачать Поиск по Algolia Меню Добро пожаловать
  • Индекс
  • Из HTML
  • Из данных
  • С URL
  • Модальный стол
  • Модальный стол
  • Модальный стол
  • Модальный стол
  • Модальный стол
  • Модальный стол
  • Столбцы группы
  • Дополнительная таблица
  • Несколько таблиц
  • Плоский Json
  • Большие данные
  • Компонент Vue
Параметры
  • AJAX
  • Опции AJAX
  • Основные колонны
  • Пользовательские кнопки
  • Кнопки выравниваются
  • Кнопки класса
  • Кнопки Заказать
  • Префикс кнопок
  • Панель инструментов кнопок
  • Кэш
  • Просмотр карты
  • Заголовок флажка
  • Классы
  • Нажмите, чтобы выбрать
  • Пагинация на стороне клиента
  • Колонны
  • Поиск столбцов
  • Столбцы Переключить все
  • Тип содержимого
  • Пользовательский поиск
  • Пользовательская сортировка
  • Пользовательская панель инструментов
  • Тип данных
  • Детальный фильтр
  • Детальный вид
  • Детальный вид Выровнять
  • Значок детального просмотра
  • Побег
  • Поле нижнего колонтитула
  • Параметры фильтра
  • Стиль нижнего колонтитула
  • Стиль заголовка
  • Высота
  • Размер значка
  • Префикс значков
  • Поле идентификатора
  • Игнорировать Щелкните для выбора на
  • Большие колонны
  • Язык
  • Размер загружаемого шрифта
  • Загрузка шаблона
  • Ведение метаданных
  • Метод
  • Минимальное количество столбцов
  • Ряд с множественным выбором
  • Список страниц
  • Номер страницы
  • Размер страницы
  • Пагинация
  • Пагинация по горизонтали
  • Индексный номер страницы
  • Цикл разбиения на страницы
  • Части нумерации страниц
  • Разбиение на страницы текста
  • Пагинация по вертикали
  • Параметры запроса
  • Тип параметров запроса
  • Помните приказ
  • Обработчик ответа
  • Атрибуты строки
  • Стиль строк
  • Поиск
  • Нейтрализация с акцентом на поиск
  • Поиск Выровнять
  • Выделение поиска
  • Поиск при клавише ввода
  • Селектор поиска
  • Текст поиска
  • Истекло время поиска
  • Пагинация на стороне сервера
  • Сортировка сервера
  • Показать значок кнопки
  • Показать текст кнопки
  • Показать расширенную пагинацию
  • Показать нижний колонтитул
  • Показать полноэкранный режим
  • Показать заголовок
  • Показать переключатель разбивки на страницы
  • Показать Обновить
  • Показать кнопку поиска
  • Показать кнопку очистки поиска
  • Показать переключатель
  • Бесшумная сортировка
  • Однократный выбор
  • Умный дисплей
  • Класс сортировки
  • Сортировать по названию Порядок
  • Сортировка Сброс
  • Стабильная сортировка
  • Сортируемый
  • Строгий обыск
  • Табличные иконки
  • Классы Thead
  • Выровнять панель инструментов
  • Всего не отфильтрованное поле
  • Итого / Поле данных
  • Обрезка при поиске
  • Неопределенный текст
  • Видимый поиск
Параметры столбца
  • Выравнивающие колонны
  • Выравнивание нижнего колонтитула
  • Видимая карта
  • Тип ячейки
  • Флажок
  • Флажок отключен
  • Флажок установлен
  • Класс
  • Нажмите, чтобы выбрать
  • Модуль форматирования деталей
  • Побег
  • События
  • Поля
  • Форматирование нижнего колонтитула
  • Форматирование
  • Естественная сортировка
  • Радио
  • Рядный Колспан
  • Программа форматирования поиска
  • Форматирование выделенного фрагмента поиска
  • Доступен для поиска
  • Показать Выбрать заголовок
  • Сортировать по названию Порядок
  • Сортируемый
  • Сортировщик
  • переключаемый
  • Название
  • Подсказка к заголовку
  • видимый
  • Ширина
  • Блок ширины
Методы
  • Приложение
  • Обратный чек
  • Отметить / снять отметку
  • Отметить / Снять все отметки
  • Отметить / снять отметку с
  • Уничтожить
  • Развернуть / свернуть все строки
  • Развернуть / свернуть строку по uniqueId
  • Развернуть / свернуть строку
  • Фильтр по
  • Получить данные
  • Получить скрытые строки
  • Получить параметры
  • Получить строку по уникальному идентификатору
  • Получить позицию прокрутки
  • Получить выбор
  • Получить видимые / скрытые столбцы
  • Вставить строку
  • Нагрузка
  • Объединить ячейки
  • Подготовить
  • Обновить
  • Параметры обновления
  • Удалить
  • Удалить все
  • Удалить с помощью уникального идентификатора
  • Сбросить поиск
  • Сбросить вид
  • Прокрутите до
  • Выбрать / Предыдущая / Следующая страница
  • Показать / скрыть все столбцы
  • Показать / скрыть столбец
  • Показать / скрыть загрузку
  • Показать / скрыть строку
  • Переключить детальный вид
  • Переключить на полноэкранный режим
  • Переключить пагинацию
  • Переключить вид
  • Обновление по уникальному идентификатору
  • Обновить ячейку
  • Обновить ячейку по уникальному идентификатору
  • Обновить заголовок столбца
  • Обновить текст формата
  • Обновить строку
Расширения
  • Адрес
  • Автообновление
  • Печенье
  • Копировать строки
  • Пользовательский вид
  • Defer Url
  • Редактируемый
  • Экспорт
  • Контроль фильтра
  • Фиксированные колонны
  • Группировать по V2
  • I18n Улучшение
  • Ключевые события
  • мобильный
  • Множественная сортировка
  • Перейти на страницу
  • Трубопровод
  • Печать
  • Изменить порядок столбцов
  • Изменить порядок строк
  • Изменяемый размер
  • Закрепленный заголовок
  • Панель инструментов
  • Сетка деревьев
Проблемы
  • 137.Обновить с URL-адреса после использования параметра данных
  • 152. Как передать параметр на сервер
  • 177. Множественные поля в столбце.
  • 188. Показать только кнопку экспорта.
  • 220.Скрыть столбец состояния
  • 221. Используйте cellStyle.
  • 283. Используйте resetView, чтобы сбросить ширину заголовка.
  • 337. Пользовательские значки шрифтов.
  • 371. Использование содержимого таблицы в HTML-форме.
  • 383.Используйте Flat UI для стилизации флажков
  • 386. Переопределить переменные queryParam по умолчанию.
  • 395. Включение / отключение кнопки удаления при нажатии флажка.
  • 406. Совместите панель инструментов и поле поиска.
  • 409.Обновить метод с новым URL
  • 415. Получить проверенный индекс строки.
  • 424. Переключить пагинацию
  • 431. Загрузить данные разбивки на страницы.
  • 457. Установите глобальные значения по умолчанию для таблицы.
  • 563.Изменить цвет фона в выбранных строках
  • 579. Показать средство форматирования изображений.
  • 639. Проблема изменения размера нижнего колонтитула.
  • 917. Оставить выбранным на стороне сервера.
  • 986.Редактируемое поле выбора
  • 987. Сохраните данные строки с помощью ввода.
  • 1167. Отметить / снять отметку Все на странице со стороны клиента.
  • 2211. Повернутые заголовки столбцов таблицы.
  • 2619.Нажмите кнопку сортировки с помощью флажка html
  • 3345. Отметить / снять отметку Все на странице со стороны сервера.
  • 3784. Заменить полосу прокрутки таблицы.
  • 3830. Экспорт всех записей с разбивкой на страницы на стороне сервера.
  • 3949.Множественный заголовок группы и большие столбцы
  • 4210. Получить полный URL таблицы
  • 4214. Добавлено поле индекса.
  • 4586. Настроить атрибут данных td.
Примеры GitHub

Bootstrap 4 таблицы

Bootstrap 4 Базовая таблица

Базовый стол Bootstrap 4 имеет легкую обивку и горизонтальные разделители.

Класс .table добавляет к таблице базовый стиль:

Пример

Имя Фамилия Электронная почта
Джон Самка [email protected]
Мэри Moe [email protected]
июль Дули [email protected]
Попробуй сам "

полосатые ряды

Модель .table-striped class добавляет zebra-stripes к таблице:

Пример

Имя Фамилия Электронная почта
Джон Самка [email protected]
Мэри Moe [email protected]
июль Дули [email protected]
Попробуй сам "

Стол с рамкой

Модель .класс с границами таблицы добавляет границы со всех сторон таблицы и ячеек:

Пример

Имя Фамилия Электронная почта
Джон Самка [email protected]
Мэри Moe [email protected]
июль Дули [email protected]
Попробуй сам "

Hover Rows

Модель .table-hover класс добавляет эффект наведения (серый цвет фона) на строки таблицы:

Пример

Имя Фамилия Электронная почта
Джон Самка [email protected]
Мэри Moe [email protected]
июль Дули [email protected]
Попробуй сам "

Черный / Темный стол

Модель .table-dark class добавляет к таблице черный фон:

Пример

Имя Фамилия Электронная почта
Джон Самка [email protected]
Мэри Moe [email protected]
июль Дули [email protected]
Попробуй сам "

Стол в темную полоску

Комбайн .table-dark и . table-striped для создания темного, полосатого стола:

Пример

Имя Фамилия Электронная почта
Джон Самка [email protected]
Мэри Moe [email protected]
июль Дули [email protected]
Попробуй сам "

Темный стол Hoverable

Модель .table-hover класс добавляет эффект наведения (серый цвет фона) на строки таблицы:

Пример

Имя Фамилия Электронная почта
Джон Самка [email protected]
Мэри Moe [email protected]
июль Дули [email protected]
Попробуй сам "

Стол без полей

Модель .table-borderless класс удаляет границы из таблицы:

Пример

Имя Фамилия Электронная почта
Джон Самка [email protected]
Мэри Moe [email protected]
июль Дули [email protected]
Попробуй сам "

Контекстные классы

Контекстные классы могут использоваться для раскрашивания всей таблицы (

), строки таблицы () или ячейки таблицы (
).

Пример

Имя Фамилия Электронная почта
По умолчанию по умолчанию на [email protected]
Первичный Джо [email protected]
Успех Самка [email protected]
Опасность Moe мэри @ пример.com
Информация Дули [email protected]
Предупреждение Refs [email protected]
Активный Активсон [email protected]
Вторичная Секундсон [email protected]
Свет Энджи энджи @ пример.com
Темный Bo [email protected]
Попробуй сам "

Можно использовать следующие контекстные классы:

Класс Описание
. Стол первичный Синий: указывает на важное действие
. Стол-успех Зеленый: указывает на успешное или положительное действие
.Стол-опасность Красный: указывает на опасное или потенциально негативное действие
. Информация о таблице Голубой: указывает на нейтральное информативное изменение или действие
. Таблица-предупреждение Оранжевый: указывает на предупреждение, которое может потребовать внимания
. Стол-актив Серый: применяет цвет наведения к строке таблицы или ячейке таблицы
.стол вторичный Серый: указывает на менее важное действие
. Настольный светильник Светло-серый фон таблицы или строки таблицы
. Стол темный Темно-серый фон таблицы или строки таблицы

Цвет головки стола

Класс .thead-dark добавляет черный фон к заголовкам таблиц, а класс .thead-light добавляет серый фон к заголовкам таблиц:

Пример

Имя Фамилия Электронная почта
Джон Самка john @ example.com
Мэри Moe [email protected]
июль Дули [email protected]
Имя Фамилия Электронная почта
Джон Самка [email protected]
Мэри Moe [email protected]
июль Дули июль @ пример.com
Попробуй сам "

Маленький стол

Класс .table-sm делает таблицу меньше, разрезая заполнение ячеек пополам:

Пример

Имя Фамилия Электронная почта
Джон Самка [email protected]
Мэри Moe [email protected]
июль Дули июль @ пример.com
Попробуй сам "

Адаптивные таблицы

Класс .table-responsive добавляет полосу прокрутки к столу при необходимости (когда он велик по горизонтали):

Пример



...

Попробуй сам "

Вы также можете решить, когда в таблице должна появиться полоса прокрутки, в зависимости от ширины экрана:

Класс Ширина экрана
.таблица-отзывчивый-см <576 пикселей
.table-responseive-md <768 пикселей
.table-responseive-lg <992px
.table-responsive-xl <1200 пикселей

Пример



...

Попробуй сам "

wenzhixin / bootstrap-table: расширенная таблица для интеграции с некоторыми из наиболее широко используемых фреймворков CSS.(Поддерживает Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)

Расширенная таблица начальной загрузки с радио, флажком, сортировкой, разбивкой на страницы, расширениями и другими дополнительными функциями.

Для начала проверьте:

Список жертвователей

ЛИЦЕНЗИЯ

ПРИМЕЧАНИЕ. Bootstrap Table находится под лицензией MIT License. Абсолютно бесплатный, вы можете произвольно использовать и изменять этот плагин. Если этот плагин вам полезен, вы можете Star в этом репо, ваша поддержка - моя самая большая движущая сила, спасибо.

Характеристики

  • Создано для Twitter Bootstrap (поддерживаются все версии)
  • Адаптивный веб-дизайн
  • Прокручиваемая таблица с фиксированными заголовками
  • Полностью настраиваемый
  • Через атрибуты данных
  • Показать / скрыть столбцы
  • Показать / скрыть заголовки
  • Показать / скрыть нижние колонтитулы
  • Получить данные в формате JSON с помощью AJAX
  • Простая сортировка столбцов одним щелчком мыши
  • Форматный столбец
  • Выбор одной или нескольких строк
  • Мощная разбивка на страницы
  • Просмотр карты
  • Детальный вид
  • Локализация
  • Расширения

Как получить

Ручная загрузка

Используйте страницу релизов или источник.

Беседка 

  bower установка bootstrap-table

Нм 

  npm установить загрузочную таблицу

CDN

Вы можете получить исходную таблицу начальной загрузки непосредственно из CDN, например CDNJS, bootcss или jsdelivr.

Участие

Для запросов функций, отчетов об ошибках или отправки запросов на вытягивание, пожалуйста, сначала прочтите CONTRIBUTING.md.

Проблемы с отчетами

Как указано выше, прочтите ДОПОЛНИТЕЛЬНО.md, особенно отчеты об ошибках

И как там указано, пожалуйста, предоставьте онлайн-пример при создании проблем!

Это действительно экономит много времени.

Вы также можете использовать наш шаблон примеров, нажав кнопку Загрузить примеры:

Онлайн-редактор

Ваш отзыв очень важен!

Благодарности

Спасибо всем, кто оставил отзыв и отправил запросы на включение. Список всех участников можно найти здесь. Этот проект существует благодаря всем людям, которые вносят свой вклад.[Делать вклад].

История выпусков

Посмотрите журнал изменений

Местная разработка

Чтобы разработать локальную загрузочную таблицу, запустите:

 mkdir bootstrap-table-dev
cd bootstrap-table-dev
git clone https://github.com/wenzhixin/bootstrap-table
git clone https://github.com/wenzhixin/bootstrap-table-examples

пряжа добавить http-сервер
npx http-сервер

А затем откройте: http: // localhost: 8081 / bootstrap-table-examples

Локальная сборка

Чтобы создать локальную загрузочную таблицу, выполните:

Результат появится в каталоге dist .

Спонсоры PayPal

Спонсоры OpenCollective

Поддержите этот проект, став спонсором. Здесь будет отображаться ваш логотип со ссылкой на ваш веб-сайт. [Стать спонсором]

Поддерживающие OpenCollective

Поддержите этот проект, став спонсором. Ваше изображение появится здесь со ссылкой на ваш сайт. [Стать спонсором]

React-Bootstrap · Документация по React-Bootstrap

Используйте свойства с полосами , с границами и hover для настройки таблицы.

<Стол с полосатой окантовкой при наведении>
# Имя Фамилия Имя пользователя
1 Отметить Отто @mdo
2 Джейкоб Торнтон @fat
3 Птица Ларри @twitter

Копировать

Маленький стол #

Используйте size = "sm" , чтобы сделать столы компактными при разрезании. заполнение ячейки пополам.

<Таблица с полосами и границами при наведении указателя мыши = "sm"> # Имя Фамилия Имя пользователя 1 Отметить Отто @mdo 2 Джейкоб Торнтон @fat 3 Птица Ларри @twitter

Копировать

Темный стол #

Используйте variant = "dark" , чтобы инвертировать садитесь за стол и получайте светлый текст на темном фоне.

<Таблица с полосами и краями при наведении курсора = "dark"> # Имя Фамилия Имя пользователя 1 Отметить Отто @mdo 2 Джейкоб Торнтон @fat 3 Птица Ларри @twitter

Копировать

Адаптивный #

Адаптивный таблицы позволяют прокручивать таблицы d по горизонтали с легкостью.

Always Responsive #

Для каждой точки останова используйте response для горизонтальной прокрутки таблиц. Адаптивные таблицы автоматически упаковываются в div . В следующем примере 12 столбцов с возможностью горизонтальной прокрутки.

<Таблица реагирует> # {Array.from ({length: 12}). Map ((_, index) => ( Заголовок таблицы ))} 1 {Множество.из ({length: 12}). map ((_, index) => ( Ячейка таблицы {index} ))} 2 {Array.from ({length: 12}). Map ((_, index) => ( Ячейка таблицы {index} ))} 3 {Array.from ({length: 12}). Map ((_, index) => ( Ячейка таблицы {index} ))}

Копировать

Для конкретной точки останова #

Используйте responseive = "sm" , responseive = "md" , responseive = "lg" или responseive = "xl" по мере необходимости для создания отзывчивых таблиц до определенной точки останова.С этой точки останова и выше таблица будет вести себя нормально и не будет прокручиваться по горизонтали.

# Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
1 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
2 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
3 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
# Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
1 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
2 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
3 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
# Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
1 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
2 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
3 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
# Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
1 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
2 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
3 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

Копировать

API #

import Table из 'react-bootstrap / Table' Копировать код импорта для компонента Table.

.

Имя Тип По умолчанию Описание
с рамкой

логическое

Добавляет границы со всех сторон таблицы и ячеек.

без полей

логическое

Удаляет все границы таблицы и ячеек, включая заголовок таблицы.

hover

boolean

Включить состояние наведения курсора на строки таблицы в пределах

отзывчивый

логический | строка

Адаптивные таблицы позволяют легко прокручивать таблицы по горизонтали.Для каждой точки останова используйте отзывчивый для горизонтального прокрутка таблиц. Адаптивные таблицы автоматически упаковываются в div . Используйте responseive = "sm" , responseive = "md" , responseive = "lg" или responseive = "xl" по мере необходимости для создания адаптивных таблиц до конкретная точка останова. С этой точки останова и выше таблица будет вести себя нормально и не прокручивать по горизонтали.

размер

строка

Сделайте таблицы более компактными, разрезав заполнение ячеек пополам, установив размер как см .

полосатый

логический

Добавляет полосатую полосу зебры в любую строку таблицы в пределах

вариант

строка

Инвертировать цвета таблицы - светлый текст на темном фоне установив вариант как темный .

bsPrefix

строка

 'таблица'

Измените имя базового класса CSS базового компонента и префикс имен классов модификаторов. Это аварийный люк для работы с сильно настроенными бутстраповыми CSS.

Адаптивная таблица Bootstrap 4 - примеры и руководство. Базовое и расширенное использование

Компиляция и настройка

Чтобы еще больше уменьшить вес пакета MDBootstrap, вы можете скомпилировать свой собственный пакет, содержащий только эти компоненты и функции, которые вам нужны.

Если вам нужна дополнительная помощь в компиляции вашего пользовательского пакета, воспользуйтесь нашим руководством по компиляции и настройке.

Руководство по компиляции и настройке

Карта зависимостей файлов SCSS в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все бесплатные и профессиональные файлы требуют файлов из каталога 'core'

    'none' означает 'этот компонент не требует ничего, кроме файлов ядра'

    Файл, заключенный в ``, означает, что этот файл делает базовый компонент красивее, но это не обязательно для правильной работы.

    Для всех компонентов PRO требуется файл pro / _variables.scss.

    scss /
    |
    | - ядро ​​/
    | |
    | | - бутстрап /
    | | | - _функции.scss
    | | | - _variables.scss
    | |
    | | - _colors.scss
    | | - _global.scss
    | | - _helpers.scss
    | | - _masks.scss
    | | - _mixins.scss
    | | - _typography.scss
    | | - _variables.scss
    | | - _waves.scss
    |
    | - бесплатно /
    | | - _animations-basic.scss -> нет
    | | - _animations-extended.scss -> _animations-basic.scss
    | | - _buttons.scss -> нет
    | | - _cards.scss -> нет
    | | - _dropdowns.scss -> нет
    | | - _вход-группа.scss -> _forms.scss, _buttons.scss, _dropdowns.scss
    | | - _navbars.scss -> нет
    | | - _pagination.scss -> нет
    | | - _badges.scss -> нет
    | | - _modals.scss -> _buttons.scss, _forms.scss (PRO -> _tabs.scss)
    | | - _carousels.scss ->
    | | - _forms.scss -> нет
    | | - _msc.scss -> нет
    | | - _footers.scss нет (PRO :)
    | | - _list-group.scss -> нет
    | | - _tables.scss -> нет (PRO: _material-select.scss, pro / _forms.scss, _checkbox.scss, pro / _buttons.scss, pro / _cards.scss, _pagination.scss, pro / _msc.scss)
    | | - _depreciated.scss
    |
    | - pro /
    | |
    | | - сборщик /
    | | | - _default.scss -> нет
    | | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss
    | | | - _default-date.scss -> _default.scss, бесплатно / _forms.scss
    | |
    | | - разделы /
    | | | - _templates.scss -> _sidenav.scss
    | | | - _social.scss -> бесплатно / _cards.scss, бесплатно / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss,
    | | | - _team.scss -> бесплатно / _buttons.scss, pro / _buttons.scss, free / _cards.scss, pro / _cards.scss
    | | | - _testimonials.scss -> бесплатно / _carousels.scss, pro / _carousels.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _magazine.scss -> _badges.scss
    | | | - _pricing.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _contacts.scss -> бесплатно / _forms.scss, pro / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | |
    | | - _variables.scss
    | | - _buttons.scss -> бесплатно / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss
    | | - _social-buttons.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | - _tabs.scss -> _cards.scss
    | | - _cards.scss -> бесплатно / _cards.scss
    | | - _dropdowns.scss -> бесплатно / _dropdowns.scss, бесплатно / _buttons.scss
    | | - _navbars.scss -> бесплатно / _navbars.scss (PRO :)
    | | - _scrollspy.scss -> нет
    | | - _lightbox.scss -> нет
    | | - _chips.scss -> нет
    | | - _msc.scss -> нет
    | | - _forms.scss -> нет
    | | - _radio.scss -> нет
    | | - _checkbox.scss -> нет
    | | - _material-select.scss -> нет
    | | - _switch.scss -> нет
    | | - _file-input.scss -> бесплатно / _forms.scss, бесплатно / _buttons.scss
    | | - _range.scss -> нет
    | | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss
    | | - _autocomplete.scss -> бесплатно / _forms.scss
    | | - _accordion.scss -> pro / _animations.scss, бесплатно / _cards.scss
    | | - _parallax.scss -> нет
    | | - _sidenav.scss -> бесплатно / _forms.scss, pro / _animations.scss, разделы / _templates.scss
    | | - _ecommerce.scss -> бесплатно / _cards.scss, pro / _cards.scss, бесплатно / _buttons.scss, pro / _buttons.scss, pro / _msc.scss
    | | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss
    | | - _степеры.scss -> бесплатно / _buttons.scss
    | | - _blog.scss -> нет
    | | - _toasts.scss -> бесплатно / _buttons.scss
    | | - _animations.scss -> нет
    | | - _charts.scss -> нет
    | | - _progress.scss -> нет
    | | - _scrollbar.scss -> нет
    | | - _skins.scss -> нет
    | | - _depreciated.scss
    |
    `- _custom-skin.scss
    `- _custom-styles.scss
    `- _custom-variables.scss
    `- mdb.scss

Карта зависимостей модулей JavaScript в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все файлы требуют jQuery и начальной загрузки.js

    js /
    ├── dist /
    │ ├── buttons.js
    │ ├── cards.js
    │ ├── character-counter.js
    │ ├── chip.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── dropdown.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> поставщик / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src /
    │ ├── buttons.js
    │ ├── cards.js
    │ ├── character-counter.js
    │ ├── chip.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── dropdown.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── предварительная нагрузка.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    └── продавец /
        ├── аддоны /
        │ ├── datatables.js
        │ └── datatables.min.js
        ├── chart.js
        ├── extended-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js -> vendor / jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js -> vendor / hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js -> vendor / picker.js
        ├── picker.js
        ├── picker-time.js -> vendor / picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js

Bootstrap 5 полосатых, адаптивных таблиц и многое другое

В этом руководстве вы узнаете, как создавать элегантные таблицы с помощью Bootstrap.

Что такое таблица?

Таблицы HTML используются для представления данных в виде сетки, например строк и столбцов. Используя Bootstrap, вы можете быстро и легко значительно улучшить внешний вид таблицы.

См. Учебник по таблицам HTML, чтобы узнать больше о таблицах.

Создание простой таблицы с помощью Bootstrap

Вы можете создавать таблицы с базовым стилем, который имеет горизонтальные разделители и небольшие отступы ячеек (по умолчанию 8 пикселей), просто добавив класс Bootstrap.table в элемент

.

  <таблица>
# Имя Фамилия Электронная почта
1 Кларк Кент clarkkent @ mail.com
2 Питер Паркер [email protected]
3 Джон Картер [email protected]

- Результат приведенного выше примера будет выглядеть примерно так:

Создание таблиц с акцентом

Bootstrap даже предоставляет несколько контекстных классов, таких как .table-primary , .table-secondary , .table-success , .table-dangerous , .table-warning , .table-info , .table-light and .table -dark для раскрашивания таблиц, строк таблицы или отдельных ячеек.

Например, вы можете создать темную версию таблицы (то есть таблицу со светлым текстом на темном фоне), добавив контекстный класс .table-dark к базовому классу .table , например:

  <таблица>
    
        
             # 
             Имя 
             Фамилия 
             Электронная почта 
        
    
    
        
             1 
             Кларк 
             Кент 
             clarkkent @ mail.com 
        
        
             2 
             Питер 
             Паркер 
             [email protected] 
        
        
             3 
             Джон 
             Картер 
             [email protected]

- Результат приведенного выше примера будет выглядеть примерно так:

Аналогичным образом вы можете использовать другие контекстные классы.Например, в следующем примере используется класс .table-success на .table для создания варианта таблицы, окрашенного в зеленый цвет.

  <таблица>
    
        
             # 
             Имя 
             Фамилия 
             Электронная почта 
        
    
    
        
             1 
             Кларк 
             Кент 
             clarkkent @ mail.com 
        
        
             2 
             Питер 
             Паркер 
             [email protected] 
        
        
             3 
             Джон 
             Картер 
             [email protected]

- Результат приведенного выше примера будет выглядеть примерно так:

В разделе фрагментов приведены примеры красиво оформленных таблиц Bootstrap.

Подсказка: Вы можете использовать эти контекстные классы в базовом классе .table для создания цветной версии любой таблицы, такой как разделенная, с возможностью зависания, с границами, компактная таблица и т. Д.

Подобно таблицам, вы также можете использовать эти контекстные классы, чтобы выделить строки в таблице.Вот пример таблицы с выделенными строками, давайте посмотрим:

  <таблица>
    
        
             # 
             Билл 
             Дата платежа 
             Статус платежа 
        
    
    
        
             1 
             Кредитная карта 
             07.04.2021 
             Ожидание выписки 
        
        
             2 
             Страхование 
             07.02.2021 
             Отменено 
        
        
             3 
             Вода 
             07.01.2021 
             Платный 
        
        
             4 
             Интернет 
             07.05.2021 
             Изменить план 
        
        
             5 
             Электричество 
             07.03.2021 
             Ожидает 
        
        
             6 
             Телефон 
             07.06.2021 
             Срок 
        
        
             7 
             Автосервис 
             07.08.2021 
             Позвоните, чтобы подтвердить 
        
        
             8 
             Газ 
             07.06.2021 
             Платеж не прошел

- Результат приведенного выше примера будет выглядеть примерно так:

Создание таблиц с чередующимися строками

Вы также можете добавить полосу зебры к строкам таблицы в , просто добавив дополнительный класс . с полосами таблицы в базовый класс .table , как показано ниже:

  <таблица>
    
        
             # 
             Имя 
             Фамилия 
             Электронная почта 
        
    
    
        
             1 
             Кларк 
             Кент 
             clarkkent @ mail.com 
        
        
             2 
             Питер 
             Паркер 
             [email protected] 
        
        
             3 
             Джон 
             Картер 
             [email protected]

- Результат приведенного выше примера будет выглядеть примерно так:

Создание таблиц с границами

Вы можете добавить границы со всех сторон таблицы и ячеек, добавив класс модификатора . с границей таблицы до базового класса .table , как показано в следующем примере:

  <таблица>
    
        
             # 
             Имя 
             Фамилия 
             Электронная почта 
        
    
    
        
             1 
             Кларк 
             Кент 
             clarkkent @ mail.com 
        
        
             2 
             Питер 
             Паркер 
             [email protected] 
        
        
             3 
             Джон 
             Картер 
             [email protected]

- Результат приведенного выше примера будет выглядеть примерно так:

Создание таблиц без полей

Вы также можете создавать таблицы без полей, используя класс .table-borderless на элементе .table .

  <таблица>
    
        
             # 
             Имя 
             Фамилия 
             Электронная почта 
        
    
    
        
             1 
             Кларк 
             Кент 
             clarkkent @ mail.com 
        
        
             2 
             Питер 
             Паркер 
             [email protected] 
        
        
             3 
             Джон 
             Картер 
             [email protected]

- Результат приведенного выше примера будет выглядеть примерно так:

Включение состояния наведения на строки таблицы

Вы также можете включить состояние наведения курсора на строки таблицы в элементе , добавив класс модификатора .table-hover в базовый класс .table . Давайте попробуем следующий пример:

  <таблица>
    
        
             # 
             Имя 
             Фамилия 
             Электронная почта 
        
    
    
        
             1 
             Кларк 
             Кент 
             clarkkent @ mail.com 
        
        
             2 
             Питер 
             Паркер 
             [email protected] 
        
        
             3 
             Джон 
             Картер 
             [email protected]

- Результат приведенного выше примера будет выглядеть примерно так:

Создание небольших или компактных таблиц

Вы также можете сделать свои таблицы более компактными и сэкономить место, добавив класс модификатора .table-sm в базовый класс .table . Класс .table-sm делает стол компактным за счет разрезания всего заполнения ячеек пополам. Давайте посмотрим на следующий пример:

  <таблица>
    
        
             # 
             Имя 
             Фамилия 
             Электронная почта 
        
    
    
        
             1 
             Кларк 
             Кент 
             clarkkent @ mail.com 
        
        
             2 
             Питер 
             Паркер 
             [email protected] 
        
        
             3 
             Джон 
             Картер 
             [email protected]

- Результат приведенного выше примера будет выглядеть примерно так:

Цвета головки установочного стола

Подобно светлым и темным таблицам, вы можете использовать классы модификаторов .table-light или .table-dark в элементе , чтобы он выглядел светлым или темно-серым.

В следующем примере будет создана таблица со светло-серым фоном заголовка.

  <таблица>
    
        
             # 
             Имя 
             Фамилия 
             Электронная почта 
        
    
    
        
             1 
             Кларк 
             Кент 
             clarkkent @ mail.com 
        
        
             2 
             Питер 
             Паркер 
             [email protected] 
        
        
             3 
             Джон 
             Картер 
             [email protected]

- Результат приведенного выше примера будет выглядеть примерно так:

В следующем примере будет создана таблица с темно-серым фоном заголовка.

  <таблица>
    
        
             # 
             Имя 
             Фамилия 
             Электронная почта 
        
    
    
        
             1 
             Кларк 
             Кент 
             clarkkent @ mail.com 
        
        
             2 
             Питер 
             Паркер 
             [email protected] 
        
        
             3 
             Джон 
             Картер 
             [email protected]

- Результат приведенного выше примера будет выглядеть примерно так:

Создание адаптивных таблиц с помощью Bootstrap

Вы также можете создавать адаптивные таблицы для горизонтальной прокрутки на небольших устройствах.

Чтобы сделать любую таблицу адаптивной, просто поместите ее в элемент

и примените к нему класс .table-responsive . Вы также можете указать, когда в таблице должна быть полоса прокрутки, в зависимости от ширины области просмотра (т. Е. Точек останова), используя классы .table-responsive {-sm | -md | -lg | -xl} .

Давайте попробуем следующий пример, чтобы понять, как это в основном работает:

  

    <таблица>
        
            
                 # 
                 Имя 
                 Фамилия 
                 Электронная почта 
                 Биография 
            
        
        
            
                 1 
                 Кларк 
                 Кент 
                 clarkkent @ mail.com 
                 Lorem ipsum dolor sit amet ... 
            
            
                 2 
                 Питер 
                 Паркер 
                 [email protected] 
                 Целое число pulvinar leo id risus ... 
            
            
                 3 
                 Джон 
                 Картер 
                 johncarter @ mail.com 
                 Vestibulum Conctetur Scelerisque ...

Совет: Текст внутри ячеек всегда выравнивается по вертикали по нижнему краю. Принимая во внимание, что текст внутри ячеек наследует их выравнивание от

и по умолчанию выравнивается по вертикали по верхнему краю.
Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.

Карта сайта