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

Bootstrap을 사용하여 반응형 레이아웃에서 요소 숨기기

알다시피 Bootstrap은 작은 화면에서 탐색 메뉴 항목을 축소하는 기본 지원을 제공합니다. 그러나 비슷한 상황에서는 페이지의 다른 요소를 숨기고 싶을 수도 있습니다.

Bootstrap의 가시성 클래스 소개

이러한 요구를 해결하기 위해 Bootstrap은 일련의 가시성 클래스를 제공합니다. 화면 크기에 따라 요소의 존재 여부를 제어할 수 있는 클래스입니다. 이러한 클래스에는 다음이 포함됩니다.

• visible-xs-block, Hidden-xs: 매우 작은 장치(768px 미만)에서 요소를 숨깁니다.
• visible-sm-block, Hidden-sm: 소형 장치(768px 이상)에서 요소를 숨깁니다.
• visible-md-block, Hidden-md: 중간 장치에서 요소를 숨깁니다. 장치(992px 이상).
• visible-lg-block, Hidden-lg: 대형 장치(1200px 이상)에서 요소를 숨깁니다.

사용법

작은 화면에서 요소를 숨기려면 해당 요소에 적절한 숨겨진 클래스를 추가하기만 하면 됩니다. 예를 들어, 언급한 탐색 알약을 숨기려면 다음을 사용할 수 있습니다.

<code class="html"><ul class="nav nav-pills navbar-right hidden-sm">
  ...
</ul></code>

추가 옵션

Bootstrap 4에는 두 가지 추가 유형이 있습니다. 가시성 클래스:

• hidden-*-up: 뷰포트가 지정된 중단점 이상에 있을 때 요소를 숨깁니다.
• hidden-* -down: 뷰포트가 지정된 중단점 이하에 있을 때 요소를 숨깁니다.

참고: 이전 버전의 Bootstrap은 .hidden-phone 및 과 같은 클래스를 사용했습니다.

결론

Bootstrap의 가시성 클래스를 활용하면 다양한 화면 크기에서 요소 표시를 효과적으로 관리할 수 있습니다. 이러한 다용성을 통해 다양한 장치 크기에 맞게 적절하게 적응하는 반응형 레이아웃을 만들 수 있습니다.

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