속성 표시

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

이 페이지에서

작동 방식

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

표기법

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

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

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

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

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

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

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

예

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