부트 스트랩 네이바에서 드롭 다운 메뉴를 만드는 방법은 무엇입니까?

부트 스트랩 네비게이션 바에서 드롭 다운 메뉴를 만들려면 부트 스트랩 클래스와 구조를 올바르게 사용해야합니다. 특정 단계는 다음과 같습니다. 1. .navbar, .navbar-nav, .nav-item 및 .nav-link를 사용하여 기본 내비게이션 막대를 작성하십시오. 2. 뽑아야하는 목록 항목에 .nav-item.dropdown 클래스를 추가하십시오. 3. 드롭 다운 트리거 링크에 .nav-link.dropdown-toggle 클래스를 추가하고 드롭 다운 함수를 활성화하려면 data-bs-toggle = "드롭 다운"을 설정합니다. 4. 드롭 다운 메뉴 컨테이너로 .dropdown-menu 클래스가 포함 된 변환되지 않은 목록을 작성하고 메뉴 항목을 .dropdown-item 클래스로 설정합니다. 5. 드롭 다운 상호 작용을 지원하기 위해 Bootstrap의 JavaScript 파일 (popper.js 포함)을 소개하십시오. 6. 선택적으로. 드롭 다운 메뉴-엔드를 사용하여 올바른 정렬을 달성하고, Dropdown-divider는 나누기 라인을 추가하고 .Dropdown-menu-dark는 어두운 테마를 활성화합니다. 7. 드롭 다운 메뉴를 정상적으로 클릭하여 확장 및 붕괴, 키보드 작업을 지원하고 외부 영역을 클릭하여 닫히고 완전하고 아름다운 드롭 다운 메뉴를 달성 할 수 있는지 테스트하십시오.

Bootstrap Navbar에서 드롭 다운 메뉴를 만드는 것은 Bootstrap의 내장 클래스 및 구조를 사용하여 간단합니다. 단계별로 수행하는 방법은 다음과 같습니다.

primal 올바른 부트 스트랩 네이바 구조를 사용하십시오

먼저 적절한 부트 스트랩 Navbar 마크 업을 사용하고 있는지 확인하십시오. .navbar , .navbar-nav 및 .nav-item / .nav-link 클래스가 필요합니다.

드롭 다운이있는 작업 예는 다음과 같습니다.

 <nav class = "Navbar Navbar-expand-lg navbar-light bg-light">
  <div class = "Container-Fluid">
    <a class = "navbar-brand"href = "#"> mysite </a>

    <div class = "Collapse Navbar-Collapse">
      <ul class = "Navbar-Nav Me-Auto">
        <li class = "nav-item">
          <a class = "nav-link"href = "#"> home </a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link"href = "#"> 정보 </a>
        </li>

        <!-드롭 다운 메뉴->
        <li class = "nav-item dropdown">
          <a class = "nav-link dropdown-toggle"href = "#"id = "navbardropdown"역할 = "버튼"data-bs-toggle = "dropdown"aria-expanded = "false">
            서비스
          </a>
          <ul class = "dropdown-menu"aria-labelledby = "navbardropdown">
            <li> <A Class = "Dropdown-Item"href = "#"> 웹 디자인 </a> </li>
            <li> <a class = "Dropdown-Item"href = "#"> 개발 </a> </li>
            <li> <hr class = "dropdown-divider"> </li>
            <li> <a class = "Dropdown-item"href = "#"> 컨설팅 </a> </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

? 기억해야 할 핵심 요점

<li> <li> 의 dropdown 클래스 : <li> 내부의 드롭 다운 토글과 메뉴를 클래스 .nav-item.dropdown 으로 래핑하십시오.<li> dropdown-toggle 및 data-bs-toggle="dropdown" : 토글 동작을 활성화합니다.<li> dropdown-menu : 드롭 다운 항목의 컨테이너입니다.<li> dropdown-item : 적절한 스타일링을 위해 드롭 다운 내부의 각 링크 에이 클래스를 적용하십시오.<li> Bootstrap JS 포함 : 드롭 다운에는 Bootstrap의 JavaScript (및 Popper.js)가 필요합니다. 포함했는지 확인하십시오.

 <script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"> </script>

선택적 향상

당신도 할 수 있습니다 :

<li> 드롭 다운 항목 안에 아이콘이나 배지를 추가하십시오<li> 시각적 분리를 위해 .dropdown-divider 사용하십시오<li> .dropdown-menu-end 로 오른쪽에 메뉴를 배치하십시오<li> .dropdown-menu-dark 로 어두운 드롭 다운을 활성화하십시오

올바른 정렬 드롭 다운의 예 :

 <ul class = "Dropdown-Menu Dropdown-Menu-End">
  ...
</ul>

? 테스트하십시오

확실하게 하다:

<li> 드롭 다운은 클릭에서 열립니다 (기본적으로 호버가 아닙니다) <li> 외부를 클릭하면 닫힙니다 <li> 키보드를 통해 액세스 할 수 있습니다 (탭 Enter)

그게 다야! 올바른 클래스와 부트 스트랩 JS가로드되면 Navbar 드롭 다운이 원활하게 작동합니다. 레이아웃에 연결하십시오.

위 내용은 부트 스트랩 네이바에서 드롭 다운 메뉴를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!