Таблиці в Bootstrap 4

Bootstrap 4 Основна таблиця

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

Клас .table додає основні стилі до таблиці:

See the Pen
Базова таблиця
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Смугасті рядки

Клас .table-stripedдодає смугасті рядки до таблиці:

See the Pen
Смугасті рядки
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Таблиця з рамками

Клас .table-borderedдодає рамки з усіх боків таблиці:

See the Pen
Таблиця з рамками
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

:hover для рядків

Клас .table-hoverдодає ефект при наведенні (сірий колір фону) на рядки таблиці:

See the Pen
Ефект при наведенні на рядки таблиці
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Темні таблиці

Клас.table-dark додає темний фон до таблиці:

See the Pen
Темна таблиця
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Темна смугаста таблиця

Якщо ви додасте обидва класи .table-darkі .table-stripedдо таблиці, то буде створена темна, смугаста таблиця:

See the Pen
Темна смугаста таблиця
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

:hover для рядків темної таблиці

Клас .table-hoverдодає ефект при наведенні (сірий колір фону) на рядках таблиці:

See the Pen
Ефект при наведенні на рядки темної таблиці
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Таблиця без рамок

Клас .table-borderlessстирає рамки в таблиці:

See the Pen
Таблиця без рамок
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Контекстні класи

Контекстні класи можна використовувати для фарбування всієї таблиці ( <table>), рядків таблиці ( <tr>) або клітинок ( <td>).

See the Pen
Контекстні класи для таблиць
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Існують наступні контекстні класи для таблиць:

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

Колір для заголовку таблиці

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

See the Pen
Колір для заголовку таблиці
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Маленька таблиця

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

See the Pen
Маленька таблиця
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Адаптивні таблиці

Клас .table-responsiveстворює адаптивну таблицю: горизонтальна смуга прокрутки додається до таблиці на екранах, які менше , ніж 992px в ширину ( в разі необхідності). При перегляді на екранах з шириною більш ніж 992px, різниці немає:

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

See the Pen
Адаптивна таблиця
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

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

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

Дякую за те, що присвятили свій дорогоцінний час і прочитали даний урок, сподіваюся він був для вас цікавим. Якщо ви пропустили минулий урок, то мерщій читати, там ми розбирали стандартні кольори в Bootstrap 4.

Перекладач: Гронюк Владислав
Посилання на оригінал: https://www.w3schools.com/bootstrap4/bootstrap_tables.asp

Сподобався урок? Поділись з друзями!

Вам також може сподобатись

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: