Bootstrap을 사용하여 반응형 레이아웃에서 요소를 숨기는 방법은 무엇입니까?

부트스트랩을 사용하여 반응형 레이아웃에서 요소 숨기기

반응형 레이아웃을 디자인할 때 특히 작은 화면에서는 공간 관리가 중요합니다. Bootstrap은 모바일 장치용 메뉴 표시줄 항목 축소를 지원하지만 다른 페이지 요소를 유사하게 숨기려면 어떻게 해야 할까요?

해결책:

Bootstrap은 다음을 수행할 수 있는 클래스를 제공합니다. 화면 크기에 따라 요소를 숨기려면:

• 초소형 장치: 휴대폰(<768px) - .visible-xs-*(표시), .hidden-xs(숨기기 )
• 소형 장치: 태블릿(≥768px) - .visible-sm-*(표시), .hidden-sm(숨기기)
• 중형 장치 : 데스크탑(≥992px) - .visible-md-*(표시), .hidden-md(숨기기)
• 대형 장치: 데스크탑(≥1200px) - .visible -lg-*(표시), .hidden-lg(숨기기)

사용 예:

작은 화면에서 .nav-pills 요소를 숨기려면 :

  ...
추가 참고 사항:

Bootstrap 4의 경우 Hidden-*-up(더 큰 중단점을 위해 숨김) 또는 Hidden-*-down을 사용하세요. (더 작은 중단점을 위해 숨김).
Bootstrap 3.2.0에서는 .hidden-*를 더 이상 사용하지 않고 .visible-*를 사용합니다.
이전 Bootstrap 버전에서는 .hidden-phone 및 .hidden-tablet를 사용합니다. 더 이상 사용되지 않습니다.

위 내용은 Bootstrap을 사용하여 반응형 레이아웃에서 요소를 숨기는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!