"부트스트랩4 숨김 클래스"의 두 판 사이의 차이

2019년 3월 10일 (일) 20:35 기준 최신판

1 개요[ | ]

Bootstrap 4 Hiding elements
부트스트랩4 숨김 클래스

화면크기	클래스	비고
단독 사용
모두 숨김 ★	`.d-none`
sm 이상 숨김 ★	`.d-sm-none`
md 이상 숨김	`.d-md-none`
lg 이상 숨김	`.d-lg-none`
xl 에서 숨김	`.d-xl-none`
모두 보임	`.d-block`
sm 이상 보임	`.d-sm-block`
md 이상 보임	`.d-md-block`
lg 이상 보임	`.d-lg-block`
xl 에서 보임	`.d-xl-block`
조합 사용 예시
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`
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`

2 같이 보기[ | ]

3 참고[ | ]

https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

@@ 4번째 줄: / 4번째 줄: @@
 {| class='wikitable'
-! Screen Size !! Class
+! 화면크기 !! 클래스 !! 비고
 |-
-| 항상 숨김 || <code>.d-none</code>
+!colspan='3'| 단독 사용
 |-
-| xs 에서만 숨김 || <code>.d-none .d-sm-block</code>
+| 모두 숨김 ★ || <code>.d-none</code> ||
 |-
-| sm	에서만 숨김 || <code>.d-sm-none .d-md-block</code>
+| sm 이상 숨김 ★ || <code>.d-sm-none</code> ||
 |-
-| md	에서만 숨김 || <code>.d-md-none .d-lg-block</code>
+| md 이상 숨김 || <code>.d-md-none</code> ||
 |-
-| lg 에서만 숨김 || <code>.d-lg-none .d-xl-block</code>
+| lg 이상 숨김 || <code>.d-lg-none</code> ||
 |-
-| xl 에서만 숨김 || <code>.d-xl-none</code>
+| xl 에서 숨김 || <code>.d-xl-none</code> ||
 |-
-| 항상 보임 || <code>.d-block</code>
+| 모두 보임 || <code>.d-block</code> ||
 |-
-| xs 에서만 보임 || <code>.d-block .d-sm-none</code>
+| sm 이상 보임 || <code>.d-sm-block</code> ||
 |-
-| sm 에서만 보임 || <code>.d-none .d-sm-block .d-md-none</code>
+| md 이상 보임 || <code>.d-md-block</code> ||
 |-
-| md 에서만 보임 || <code>.d-none .d-md-block .d-lg-none</code>
+| lg 이상 보임 || <code>.d-lg-block</code> ||
 |-
-| lg 에서만 보임 || <code>.d-none .d-lg-block .d-xl-none</code>
+| xl 에서 보임 || <code>.d-xl-block</code> ||
 |-
-| xl 에서만 보임 || <code>.d-none .d-xl-block</code>
+!colspan='3'| 조합 사용 예시
+|-
+| xs 에서만 숨김 ★ || <code>.d-none .d-sm-block</code> ||
+|-
+| sm	에서만 숨김 || <code>.d-sm-none .d-md-block</code> ||
+|-
+| md	에서만 숨김 || <code>.d-md-none .d-lg-block</code> ||
+|-
+| lg 에서만 숨김 || <code>.d-lg-none .d-xl-block</code> ||
+|-
+| xs 에서만 보임 || <code>.d-block .d-sm-none</code> ||
+|-
+| sm 에서만 보임 || <code>.d-none .d-sm-block .d-md-none</code> ||
+|-
+| md 에서만 보임 || <code>.d-none .d-md-block .d-lg-none</code> ||
+|-
+| lg 에서만 보임 || <code>.d-none .d-lg-block .d-xl-none</code> ||
+|-
+| xl 에서만 보임 || <code>.d-none .d-xl-block</code> ||
 |}
 ==같이 보기==
 * [[CSS display]]
+* [[부트스트랩4 그리드 체계]]
 ==참고==
-* https://getbootstrap.com/docs/4.1/utilities/display/
+* https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements
 [[분류: Bootstrap 4]]
+[[분류: Bootstrap 유틸]]