Все записи с тегом: bootstrap 4

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

Содержание статьи:

  • Синтаксис использования display-классов Bootstrap 4;
  • Список всех display-классов Bootstrap 4;

1. Синтаксис использования display-классов Bootstrap 4

Синтаксис display-класса Bootstrap 4:

d-{breakpoint}-{?}

Где, {breakpoint} — это название контрольной точки (sm, md, lg, xl), начиная с которой будет применяться указанное CSS свойство display к HTML элементу.

А, {?} — одно из значений показа блоков: none, inline, inline-block, block, table, table-cell, flex, inline-flex.

Примеры: d-none — элемент будет скрыт на любых разрешениях; d-sm-none — элемент будет скрыт на мальньких устройствах и выше (разрешениях начиная от 576px).

Допускается использование нескольких классов, например:d-sm-block d-md-inline — на маленьких экранах (разрешение от 576px до 768px) блок будет показан блочным, на средних (разрешение от 768px до 992px) будет строчным.


2. Список всех display-классов Bootstrap 4

  • d-none — скрытие элемента на любом разрешении;
  • d-inline — показывает элемент строчным;
  • d-inline-block — показывает элемент строчно-блочным;
  • d-block — показывает элемент блочным;
  • d-table — показывает элемент таблицей;
  • d-table-cell — показывает элемент ячейкой таблицы;
  • d-flex — показывает элемент блочным flex-контейнером;
  • d-inline-flex — показывает элемент строчным flex-контейнером;
  • d-sm-none — скрывает элемент на маленьких экранах и выше;
  • d-sm-inline — на маленьких экранах показывает элемент строчным;
  • d-sm-inline-block — на маленьких экранах показывает элемент строчно-блочным;
  • d-sm-block — на маленьких экранах показывает элемент блочным;
  • d-sm-table — на маленьких экранах показывает элемент таблицей;
  • d-sm-table-cell — на маленьких экранах показывает элемент ячейкой таблицы;
  • d-sm-flex — на маленьких экранах показывает элемент блочным flex-контейнером;
  • d-sm-inline-flex — на маленьких экранах показывает элемент строчным flex-контейнером;
  • d-md-none — скрывает элемент на средних экранах и выше;
  • d-md-inline — на средних экранах показывает элемент строчным;
  • d-md-inline-block — на средних экранах показывает элемент строчно-блочным;
  • d-md-block — на средних экранах показывает элемент блочным;
  • d-md-table — на средних экранах показывает элемент таблицей;
  • d-md-table-cell — на средних экранах показывает элемент ячейкой таблицы;
  • d-md-flex — на средних экранах показывает элемент блочным flex-контейнером;
  • d-md-inline-flex — на средних экранах показывает элемент строчным flex-контейнером;
  • d-lg-none — скрывает элемент на больших экранах и выше;
  • d-lg-inline — на больших экранах показывает элемент строчным;
  • d-lg-inline-block — на больших экранах показывает элемент строчно-блочным;
  • d-lg-block — на больших экранах показывает элемент блочным;
  • d-lg-table — на больших экранах показывает элемент таблицей;
  • d-lg-table-cell — на больших экранах показывает элемент ячейкой таблицы;
  • d-lg-flex — на больших экранах показывает элемент блочным flex-контейнером;
  • d-lg-inline-flex — на больших экранах показывает элемент строчным flex-контейнером;
  • d-xl-none — скрывает элемент на очень больших экранах и выше;
  • d-xl-inline — на очень больших экранах показывает элемент строчным;
  • d-xl-inline-block — на очень больших экранах показывает элемент строчно-блочным;
  • d-xl-block — на очень больших экранах показывает элемент блочным;
  • d-xl-table — на очень больших экранах показывает элемент таблицей;
  • d-xl-table-cell — на очень больших экранах показывает элемент ячейкой таблицы;
  • d-xl-flex — на очень больших экранах показывает элемент блочным flex-контейнером;
  • d-xl-inline-flex — на очень больших экранах показывает элемент строчным flex-контейнером;
04 июня