속성 표시

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

작동 방식

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

표기법

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

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

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

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

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

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

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

예

<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}-none

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

<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-table
• .d-print-table-row
• .d-print-table-cell
• .d-print-flex
• .d-print-inline-flex

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

<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>