Bootstrap4를 이용한 요소를 표시하고 숨기는 방법

작은 쓰레기 같은 놈들 · 게시됨 2019. 4. 4. 오전 10:46:25

Bootstrap4를 이용한 요소를 표시하고 숨기는 방법

모바일 기기 개발을 빠르게 하려면 반응형 디스플레이 클래스를 사용해 기기별로 요소를 표시하고 숨기세요. 같은 사이트의 완전히 다른 버전을 만들지 말고, 각 화면 크기별로 요소를 숨기세요.

요소를 숨기려면 단순히 다음을 사용하세요.d-없어계급 또는 그들 중 하나.d-{sm,md,lg,xl}-none클래스가 반응하는 화면 변경을 할 수 있도록 합니다.

주어진 화면 크기 간격 내에서만 요소를 표시하려면 하나를 설정할 수 있습니다.d-*-없음클래스와 원.d-*-*클래스는 다음과 같이 그룹화됩니다..d-none .d-md-블록 .d-xl-none모든 화면 크기의 요소들은 숨겨지며, 중대형 기기를 제외하고는 예외입니다.

렌더링:

브레이크포인트와 다운을 위해 보여주기/숨기기:

숨겨진 xs-다운 (숨겨진 xs) = d-없음 d-sm-블록
숨겨진 SM-다운 (숨겨진 SM 숨겨진 xs) = d-none d-MD-블록
히든 MD-다운 (히든-MD 히든 SM 히든-xs) = d-none D-LG-블록
숨겨진 LG-다운 = d-없음 D-XL-블록
히든 XL-다운 (해당 없음 3.x) = D-없음 (숨겨진 것과 동일)

브레이크포인트 및 위쪽에서는 보여주기/숨기기:

히든 xs-up = D-없음 (숨겨진 것과 동일)
숨겨진 SM-UP = d-SM-없음
숨겨진 md-up = d-MD-없음
숨겨진 lg-up = d-lg-none
숨겨진 XL-UP (해당 없음 3.x) = D-XL-없음

단일 브레이크포인트만 표시/숨기기:

히든 XS (오직) = D-없음 D-SM-블록 (히든 XS-다운과 동일)
숨겨진 SM (only) = d-블록 d-sm-none d-MD-블록
숨겨진 MD (only) = d-블록 d-md-none d-lg-블록
숨겨진 LG(전용) = D-블록 d-LG-없음 D-XL-블록
숨겨진 XL (해당 없음 3.x) = D-블록 D-XL-없음
가시적-xs (only) = d-블록 d-sm-none
가시적-SM (오직) = d-없음 d-sm-블록 d-MD-없음
visible-md (only) = d-none d-md-블록 d-lg-none
visible-lg (only) = d-none d-lg-블록 d-XL-none
Visible-XL (해당 없음 3.x) = d-none d-XL-블록

시각화:

참고 링크:https://getbootstrap.com/docs/4.0/utilities/display/

[부츠스트랩] Bootstrap4를 이용한 요소를 표시하고 숨기는 방법

관련 게시물

본 섹션