Bootstrap 반응형 레이아웃에서 요소 가시성을 제어하는 ​​방법은 무엇입니까?

Bootstrap 반응형 레이아웃에서 요소 숨기기

다양한 화면 크기에서 콘텐츠 가시성을 최적화하여 Bootstrap 디자인을 향상하세요. Bootstrap은 더 작은 장치에 메뉴 항목을 표시하는 기능을 제공하지만 다른 페이지 요소는 어떻습니까?

이 문제를 해결하기 위해 Bootstrap은 화면을 기반으로 요소를 동적으로 표시하거나 숨길 수 있는 "표시" 및 "숨겨진" 클래스를 제공합니다. 크기. 사용 가능한 클래스는 다음과 같습니다.

표시되는 클래스:

• .visible-xs-block: 추가 소형 ​​장치(휴대폰)에 표시
• .visible-sm-block: 소형 기기(태블릿)에 표시
• .visible-md-block: 중형 기기(데스크톱)에 표시
• .visible-lg-block: 대형 기기에 표시 장치(데스크톱)

숨겨진 클래스:

• .hidden-xs: 추가 소형 ​​장치(휴대폰)에 숨기기
• .hidden-sm: 소형 기기(태블릿)에서 숨기기
• .hidden-md: 중형 기기(데스크톱)에서 숨기기
• .hidden-lg: 대형 기기(데스크톱)에서 숨기기

작은 화면에서 탐색 알약을 숨기려면 해당 컨테이너에 .hidden-xs 클래스를 추가하기만 하면 됩니다.

<code class="html"><div class="nav-pills hidden-xs float-right">...</div></code>

또는 "hidden-*-down"을 사용할 수도 있습니다. " 클래스는 지정된 중단점 이하의 요소를 숨깁니다.

<code class="html"><div class="nav-pills hidden-sm-down float-right">...</div></code>

지정된 중단점 이상의 요소를 표시하려면 "visible-*-up" 클래스를 사용하는 것을 잊지 마세요.

Bootstrap의 반응형 유틸리티 클래스에 대한 자세한 내용은 http://getbootstrap.com/css/#Response-utilities의 공식 문서를 참조하세요.

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