부트스트랩의 탐색 모음에는 어떤 패키지가 사용됩니까?-부트스트랩 튜토리얼-php.cn

부트스트랩의 탐색 모음에는 어떤 패키지가 사용됩니까?

WBOY

풀어 주다： 2022-02-11 16:54:03

원래의

2446명이 탐색했습니다.

부트스트랩에서 탐색 표시줄은 "nav" 요소로 래핑됩니다. nav 요소는 탐색 표시줄을 래핑하기 위해 이 요소를 사용하여 탐색 표시줄을 반응형으로 만들 수 있습니다. ; 탐색 표시줄'.

부트스트랩의 탐색 모음에는 어떤 패키지가 사용됩니까?

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

부트스트랩에서 탐색 모음을 래핑하는 방법

Bootstrap의 탐색 모음(navbar)은 애플리케이션 또는 웹 사이트의 헤드, 반응형 탐색의 기본 구성 요소로서 브라우저 창의 너비에 따라 탐색 표시줄의 표시 상태를 자동으로 조정할 수 있고, 모바일 장치에서 접을 수 있으며(열거나 닫을 수 있음) 점차적으로 수평 확장 모드가 됩니다.

기본 스타일 탐색 모음

Bootstrap의 탐색 모음은 두 부분으로 구성되어 있습니다. 한 부분은 .navbar-header 컨테이너로 정의된 아이콘 버튼을 배치하는 데 사용되고, 다른 부분은 .nav-collapse로 정의된 탐색 구성 요소를 배치하는 데 사용됩니다. .collapse 컨테이너 정의.

.navbar-header 컨테이너에는 일반적으로 사이트 이름과 아이콘 버튼이 포함되어 있지만 사이트 이름은 항상 표시되지만 아이콘 버튼은 작은 화면에만 표시됩니다. 사이트 이름은 .navbar-brand 링크입니다. 아이콘 버튼은 class="icon-bar"인 세 가지 요소를 포함하는 .navbar-toggle 클래스의 버튼입니다. 버튼을 정의할 때 데이터 전환 및 데이터 대상 속성도 함께 제공합니다. data-toggle 속성은 버튼이 수행하는 작업을 JavaScript에 알려주고, data-target 속성은 버튼을 클릭할 때 표시할 메뉴 요소를 나타냅니다.

.nav-collapse.collapse 컨테이너에는 일반적으로 탐색 링크, 양식, 버튼, 드롭다운 메뉴, 텍스트, 비탐색 링크 등과 같은 탐색 구성 요소만 포함됩니다. 탐색 구성 요소는 대형 화면에서 수평으로만 확장되며 작은 화면에서는 클릭하면 됩니다. 간단한 탐색 모음의 경우 일반적으로 탐색 링크만 포함됩니다. 탐색 링크는 .nav.navbar의 목록 요소를 사용하여 정의됩니다.

내비게이션 바를 반응형으로 만들기 위해 일반적으로 .navbar

요소로 래핑됩니다.

태그는 탐색 링크 부분을 정의합니다.

물론

요소를 사용할 수도 있지만 보조 장치를 사용하는 사용자가 이것이 탐색 영역임을 명확하게 알 수 있도록 role="navigation" 속성을 설정해야 합니다. 또는 적절한 정렬과 패딩을 얻으려면 전체 탐색 모음을 .container 또는 .container-fluid 컨테이너에 배치하세요.

관련 권장 사항: 부트스트랩 튜토리얼

위 내용은 부트스트랩의 탐색 모음에는 어떤 패키지가 사용됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!