Bootstrap에서 탭 알약 및 세로 알약 탐색 메뉴 만들기

Bootstrap은 탭 및 수직 알약과 같은 탐색 메뉴를 생성하기 위한 여러 옵션을 제공합니다. Bootstrap에서 이러한 종류의 탐색 메뉴를 생성하려면 프레임워크에서 제공하는 내장 클래스와 구성 요소를 사용할 수 있습니다. 모든 기기에서 잘 작동하는 기능적 탐색 메뉴입니다.

방법 - 1: 탭 탐색

이 유형의 메뉴에서는 각 탭이 웹사이트의 다른 섹션을 나타냅니다. 탭을 클릭할 때마다 해당 섹션이 표시됩니다.

알고리즘

• Bootstrap의 CSS 및 JavaScript 파일을 로드하세요.

• 제목이 "Tutorialspoint"인 컨테이너 요소를 추가합니다.

• 3개의 탭으로 탐색 메뉴를 만듭니다.

• 각 탭을 선언하세요.

• 각 탭에 콘텐츠를 추가하세요.

• Bootstrap JavaScript 및 jQuery 파일을 로드합니다.

예

방법 – 2: 수직 알약 탐색

세로 탭은 링크가 가로가 아닌 세로로 배열되는 일종의 탐색 메뉴입니다. 이는 원활한 사용자 경험을 만드는 데 도움이 됩니다.

알고리즘

• "Tutorialspoint"라는 제목의 컨테이너를 만듭니다.

• 컨테이너에는 행 1개와 열 2개가 있어야 합니다.

• 첫 번째 열에는 수직 탐색 메뉴가 포함되고, 두 번째 열에는 선택한 메뉴 항목의 내용이 표시됩니다.

• 메뉴는 "nav" 및 "nav-pill" 클래스를 사용하여 생성되며, 이로 인해 메뉴 항목이 알약 모양의 세로 스타일로 표시됩니다.

• 각 항목은 해당 콘텐츠를 표시하는 "탭 패널"에 연결되는 고유한 "href"가 있는 앵커 태그입니다.

• 각 메뉴의 콘텐츠는 "탭 콘텐츠" 클래스로 묶인 "탭 창"에 표시됩니다.

• JavaScript 코드에는 메뉴 작동을 위한 jQuery 라이브러리와 일부 Bootstrap JavaScript 플러그인이 포함되어 있습니다.

예

결론

이러한 유형의 메뉴는 웹사이트의 사용자 인터페이스와 사용자 경험을 향상시킬 수 있습니다.

대체 구현 방법에는 다음이 포함됩니다.

• 사용자 정의 CSS 및 자바스크립트 기능을 사용하여 사용자 정의 메뉴를 만듭니다.

• Bootstrap 외에도 Materialise 및 Bulma와 같은 CSS 프레임워크는 유사한 기능을 제공합니다.

• 또한 jQuery UI, UIkit 및 Semantic UI와 같은 일부 타사 라이브러리를 사용하여 이러한 종류의 탐색 메뉴를 만들 수도 있습니다.

위 내용은 Bootstrap에서 탭 알약 및 세로 알약 탐색 메뉴 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!