Дисплей
С помощью экранных помощников вы можете контролировать отображение содержимого. Это включает в себя условное отображение на основе текущего viewport (области просмотра) или фактического типа отображения элемента.
| Device | Code | Types | Range |
|---|---|---|---|
| phone_iphoneExtra small | xs | small to large handset | < 600px |
| tabletSmall | sm | small to medium tablet | 600px > < 960px |
| laptopMedium | md | large tablet to laptop | 960px > < 1264* |
| desktop_windowsLarge | lg | desktop | 1264 > < 1904px* |
| tvExtra large | xl | 4k and ultra-wides | > 1904px* |
| * -16px on Desktop | |||
Видимость
Условно отобразить элемент, основанный на текущем viewport (области просмотра). Эти классы могут быть применены с использованием следующего формата hidden- {breakpoint} - {condition}
Контрольная точка устанавливает размер окна просмотра:
xs- маленькие устройстваsm- небольшие устройстваmd- средние устройстваlg- большие устройстваxl- очень большие
condition применяется база классов:
only- скрыть элемент только наxsчерезxlконтрольные точкиand-down- скрыть элемент на указанной точке останова и скрытьsmчерез контрольные точкиlgand-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 axisoverflow-y-hidden- hide overflow on the y axisoverflow-x-hidden- hide overflow on the x axis
Дисплей
Укажите свойство display. Эти классы могут быть применены в следующем формате d- {display}.
d-inline-flex- устанавливает свойство отображения элементаinline-flexd-flex- устанавливает свойство отображения элементаflexd-inline-block- устанавливает свойство отображения элементаinline-blockd-block- устанавливает свойство отображения элементаblockd-inline- устанавливает свойство отображения элементаinlined-none- устанавливает свойство отображения элементаnone
Примеры
Resize your screen to see the elements conditionally hide.