속성 표시
디스플레이 유틸리티를 사용하여 구성 요소의 표시 값 등을 빠르고 반응적으로 토글합니다. 좀 더 일반적인 값에 대한 지원과 인쇄 시 표시를 제어하기 위한 몇 가지 추가 기능이 포함됩니다.
작동 방식
반응형 디스플레이 유틸리티 클래스 를 사용하여 display
속성 값을 변경합니다 . 에 대해 가능한 모든 값의 하위 집합만 의도적으로 지원합니다 display
. 클래스는 필요에 따라 다양한 효과를 위해 결합될 수 있습니다.
표기법
모든 중단점 에 적용되는 표시 유틸리티 클래스 from xs
to 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;
.lg
xl
xxl
예
<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 |
<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
인쇄 및 표시 클래스를 결합할 수 있습니다.
<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
),