Display
디스플레이 헬퍼들로 컨텐츠의 디스플레이를 조절할 수 있습니다. 여기에는 현재 뷰포트 또는 실제 요소의 표시 유형에 따라 조건부로 보여주는 것이 포함됩니다.
| 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 | |||
Visibility
현재의 뷰포트에 따라 조건부로 보여줍니다. 클래스 형식은 hidden-{breakpoint}-{condition} 입니다.`
breakpoint 는 뷰포트의 크기입니다.
xs- extra small devices 아주 작은 장치sm- small devices 작은 장치md- medium devices 중간 장치lg- large devices 큰 장치xl- extra large 아주 큰 장치
condition applies the class base on:
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 axisoverflow-y-hidden- hide overflow on the y axisoverflow-x-hidden- hide overflow on the x axis
Display
요소의 display 속성을 지정합니다. 클래스 형식은 d-{display} 입니다.
d-inline-flex- 요소의 display 속성을inline-flex로 정합니다.d-flex- 요소의 display 속성을flex로 정합니다.d-inline-block- 요소의 display 속성을inline-block으로 정합니다.d-block- 요소의 display 속성을block으로 정합니다.d-inline- 요소의 display 속성을inline으로 정합니다.d-none- 요소의 display 속성을none으로 정합니다.
예제
Resize your screen to see the elements conditionally hide.