주요 콘텐츠로 건너뛰기 문서 탐색으로 건너뛰기
in English

속성 표시

디스플레이 유틸리티를 사용하여 구성 요소의 표시 값 등을 빠르고 반응적으로 토글합니다. 좀 더 일반적인 값에 대한 지원과 인쇄 시 표시를 제어하기 위한 몇 가지 추가 기능이 포함됩니다.

작동 방식

반응형 디스플레이 유틸리티 클래스 를 사용하여 display속성 값을 변경합니다 . 에 대해 가능한 모든 값의 하위 집합만 의도적으로 지원합니다 display. 클래스는 필요에 따라 다양한 효과를 위해 결합될 수 있습니다.

표기법

모든 중단점 에 적용되는 표시 유틸리티 클래스 from xsto xxl에는 중단점 약어가 없습니다. 이는 해당 클래스가 이후부터 적용되어 min-width: 0;미디어 쿼리에 구속되지 않기 때문입니다. 그러나 나머지 중단점에는 중단점 약어가 포함됩니다.

따라서 클래스 이름은 다음 형식을 사용하여 지정됩니다.

  • .d-{value}~을 위한xs
  • .d-{breakpoint}-{value}sm, md, lg, xlxxl. _

여기서 은 다음 중 하나입니다.

  • none
  • inline
  • inline-block
  • block
  • grid
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

변수 를 변경 $displays하고 SCSS를 다시 컴파일하여 표시 값을 변경할 수 있습니다.

미디어 쿼리는 주어진 중단점 이상으로 화면 너비에 영향을 줍니다 . 예를 들어, , 및 화면 을 .d-lg-none설정합니다 display: none;.lgxlxxl

d-인라인
d-인라인
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
디 블록 디 블록
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

요소 숨기기

더 빠른 모바일 친화적인 개발을 위해 반응형 디스플레이 클래스를 사용하여 장치별로 요소를 표시하고 숨깁니다. 동일한 사이트의 완전히 다른 버전을 만드는 것을 피하고 대신 각 화면 크기에 반응하여 요소를 숨깁니다.

요소를 숨기려면 반응형 화면 변형에 대해 .d-none클래스 또는 클래스 중 하나를 사용하기만 하면 됩니다..d-{sm,md,lg,xl,xxl}-none

주어진 화면 크기 간격에서만 요소를 표시하려면 한 .d-*-none클래스를 클래스와 결합할 수 있습니다 .d-*-*. 예를 들어 .d-none .d-md-block .d-xl-none .d-xxl-none중대형 장치를 제외한 모든 화면 크기의 요소를 숨깁니다.

화면 크기 수업
모두에 숨겨진 .d-none
xs에서만 숨김 .d-none .d-sm-block
sm에만 숨김 .d-sm-none .d-md-block
md에서만 숨김 .d-md-none .d-lg-block
lg에서만 숨김 .d-lg-none .d-xl-block
xl에서만 숨김 .d-xl-none .d-xxl-block
xxl에서만 숨김 .d-xxl-none
모두에 표시 .d-block
xs에서만 볼 수 있음 .d-block .d-sm-none
sm에서만 볼 수 있음 .d-none .d-sm-block .d-md-none
md에서만 볼 수 있음 .d-none .d-md-block .d-lg-none
LG에서만 볼 수 있음 .d-none .d-lg-block .d-xl-none
xl에서만 볼 수 있음 .d-none .d-xl-block .d-xxl-none
xxl에서만 볼 수 있음 .d-none .d-xxl-block
hide on lg and wider screens
lg보다 작은 화면에 숨기기
<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

인쇄물로 표시

display인쇄 표시 유틸리티 클래스를 사용하여 인쇄할 때 요소 값을 변경합니다 . 반응형 유틸리티 와 동일한 display값 에 대한 지원을 포함합니다..d-*

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-grid
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

인쇄 및 표시 클래스를 결합할 수 있습니다.

화면만(인쇄 시에만 숨김)
Print Only (Hide on screen only)
화면에서는 크게 숨기지만 인쇄 시에는 항상 표시
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

사스

유틸리티 API

디스플레이 유틸리티는 의 유틸리티 API에 선언되어 있습니다 scss/_utilities.scss. 유틸리티 API를 사용하는 방법을 알아보세요.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),