>웹 프론트엔드 >프런트엔드 Q&A >부트스트랩과 함께 제공되는 숨겨진 클래스는 무엇입니까?

부트스트랩과 함께 제공되는 숨겨진 클래스는 무엇입니까?

青灯夜游
青灯夜游원래의
2022-01-10 11:04:532548검색

Bootstrap의 자체 히든 클래스는 ".hidden", ".visible-xs-*", ".visible-sm-*", ".visible-md-*", ".visible-lg-*" , " .hidden-xs", ".hidden-sm" 등.

부트스트랩과 함께 제공되는 숨겨진 클래스는 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, bootsrap 버전 3.3.7, DELL G3 컴퓨터

Bootstrap은 모바일 장치 친화적인 개발을 더 빠르게 달성하기 위해 몇 가지 보조 클래스를 제공합니다. 미디어 쿼리를 통해 대형, 소형 및 중형 장치와 결합하여 장치에 콘텐츠를 표시하거나 숨길 수 있습니다.

이러한 도구는 동일한 사이트의 완전히 다른 버전이 생성되지 않도록 주의해서 사용해야 합니다. 반응형 유틸리티는 현재 블록 및 테이블 전환에서만 작동합니다.

클래스 설명
.show 강제로 요소 표시
.hidden 강제로 요소 숨기기
Hidden-xsshiddenvisible visible .hidden-smvisible hiddenvisible.hid den-mdvisible VisibleHideVisible.hidden-lgVisibleVisibleVisibleHide.visible-*-inline

초소형 화면
​ ​ 휴대폰 (<768px)
작은 화면
태블릿(≥768px)
중형 화면
데스크톱(≥992px)
대형 화면
데스크톱(≥1200px)
.visible-xs-*visiblehidehidehide
.visible-sm-*hide 표시 숨기기
.visible-md-*HideHideVisibleHide
.visible-lg-*HideHide숨기기 가시적
v3.2.0부터 .visible-*-* 각 화면 크기에는 세 가지 변형이 있으며 각각은 아래 나열된 것처럼 CSS의 서로 다른 디스플레이 속성을 대상으로 합니다. : block;
display: inline;

.visible-*-inline-block그래서 초소형으로 화면(xs)을 예로 들면 사용 가능한 .visible-*-* 클래스는 .visible-xs-block, .visible-xs-inline 및 .visible-xs-inline-block입니다. .visible-xs, .visible-sm, .visible-md 및 .visible-lg 클래스도 존재합니다. 그러나 v3.2.0부터는 더 이상 사용이 권장되지 않습니다.
display: inline-block;
관련 요소의 특별한 경우를 제외하면 .visible-*-block과 대부분 동일합니다. 부트스트랩에 대한 자세한 내용을 보려면 을 방문하세요! !
부트스트랩 기본 튜토리얼

위 내용은 부트스트랩과 함께 제공되는 숨겨진 클래스는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.