반응형 헬퍼

반응형 헬퍼 (Responsive helpers)

요소를 보이게 하거나 숨기는 작업은 반응형 UI에서 아주 자주 하게 돼요. Bulma는 브레이크포인트별로 display를 바꾸거나 요소를 숨길 수 있는 헬퍼 클래스를 제공해요. 표를 보며 어떤 클래스가 어떤 화면 크기에서 동작하는지 확인해 보세요.

출처: 문서

본문

다음 display 클래스 중 하나를 사용할 수 있어요.

  • is-block
  • is-flex
  • is-inline
  • is-inline-block
  • is-inline-flex

예를 들어 is-flex 헬퍼가 동작하는 방식을 살펴볼게요.

Class Mobile up to 768px Tablet between 769px and 1023px Desktop between 1024px and 1215px Widescreen between 1216px and 1407px FullHD 1408px and above
is-flex-mobile Flex Unchanged Unchanged Unchanged Unchanged
is-flex-tablet-only Unchanged Flex Unchanged Unchanged Unchanged
is-flex-desktop-only Unchanged Unchanged Flex Unchanged Unchanged
is-flex-widescreen-only Unchanged Unchanged Unchanged Flex Unchanged

특정 브레이크포인트 까지 또는 부터 표시하는 클래스들:

Class Mobile Tablet Desktop Widescreen FullHD
is-flex-touch Flex Flex Unchanged Unchanged Unchanged
is-flex-tablet Unchanged Flex Flex Flex Flex
is-flex-desktop Unchanged Unchanged Flex Flex Flex
is-flex-widescreen Unchanged Unchanged Unchanged Flex Flex
is-flex-fullhd Unchanged Unchanged Unchanged Unchanged Flex

다른 display 옵션은 is-flex를 is-block, is-inline, is-inline-block, is-inline-flex 중 하나로 바꾸기만 하면 돼요.

숨기기 (Hide)

Class Mobile up to 768px Tablet between 769px and 1023px Desktop between 1024px and 1215px Widescreen between 1216px and 1407px FullHD 1408px and above
is-hidden-mobile Hidden Visible Visible Visible Visible
is-hidden-tablet-only Visible Hidden Visible Visible Visible
is-hidden-desktop-only Visible Visible Hidden Visible Visible
is-hidden-widescreen-only Visible Visible Visible Hidden Visible

특정 브레이크포인트 까지 또는 부터 숨기는 클래스들:

Class Mobile Tablet Desktop Widescreen FullHD
is-hidden-touch Hidden Hidden Visible Visible Visible
is-hidden-tablet Visible Hidden Hidden Hidden Hidden
is-hidden-desktop Visible Visible Hidden Hidden Hidden
is-hidden-widescreen Visible Visible Visible Hidden Hidden
is-hidden-fullhd Visible Visible Visible Visible Hidden

기타 가시성 헬퍼 (Other visibility helpers)

Class Description
is-invisible visibility: hidden을 추가해요
is-hidden 요소를 숨겨요
is-sr-only 시각적으로는 숨기되, 화면 낭독기(screen reader) 가 요소를 읽을 수 있게 남겨둬요

더 알아보기 (Learn more)