Дисплей

С помощью экранных помощников вы можете контролировать отображение содержимого. Это включает в себя условное отображение на основе текущего viewport (области просмотра) или фактического типа отображения элемента.

Material Design Viewport Breakpoints
DeviceCodeTypesRange
Extra smallxssmall to large handset< 600px
Smallsmsmall to medium tablet600px > < 960px
Mediummdlarge tablet to laptop960px > < 1264*
Largelgdesktop1264 > < 1904px*
Extra largexl4k and ultra-wides> 1904px*
* -16px on Desktop

Видимость

Условно отобразить элемент, основанный на текущем viewport (области просмотра). Эти классы могут быть применены с использованием следующего формата hidden- {breakpoint} - {condition}

Контрольная точка устанавливает размер окна просмотра:

  • xs - маленькие устройства
  • sm - небольшие устройства
  • md - средние устройства
  • lg - большие устройства
  • xl - очень большие

condition применяется база классов:

  • only - скрыть элемент только на xs через xl контрольные точки
  • and-down - скрыть элемент на указанной точке останова и скрыть sm через контрольные точкиlg
  • and-up -скрыть элемент в указанной точке останова и до sm через контрольные точкиlg

Additionally, media types can be targeted using the only condition. Both hidden-screen-only and hidden-print-only are currently supported.

Overflow

Set the overflow for an element with overflow-{axis}-hidden or simply overflow-hidden.

  • overflow-hidden - hide overflow on both the x and y axis
  • overflow-y-hidden - hide overflow on the y axis
  • overflow-x-hidden - hide overflow on the x axis

Дисплей

Укажите свойство display. Эти классы могут быть применены в следующем формате d- {display}.

  • d-inline-flex - устанавливает свойство отображения элемента inline-flex
  • d-flex - устанавливает свойство отображения элемента flex
  • d-inline-block - устанавливает свойство отображения элемента inline-block
  • d-block - устанавливает свойство отображения элемента block
  • d-inline - устанавливает свойство отображения элемента inline
  • d-none - устанавливает свойство отображения элемента none

Примеры

Resize your screen to see the elements conditionally hide.

Edit this page | language on Github