목차
2. 중첩 메뉴에 맞춤 CSS를 추가하십시오
3. JavaScript를 사용한 하위 메뉴 핸들 (선택 사항)
4. 부트 스트랩 cDN 포함
기억해야 할 핵심 요점
웹 프론트엔드 부트스트랩 튜토리얼 부트 스트랩에서 다단계 드롭 다운을 만드는 방법

부트 스트랩에서 다단계 드롭 다운을 만드는 방법

Sep 20, 2025 am 04:08 AM

Bootstrap 5 용 다단계 드롭 다운 메뉴를 만들려면 사용자 정의 CSS 및 JavaScript 구현을 결합해야합니다. 1. 드롭 다운 -submenu 클래스와 함께 표준 드롭 다운 구조와 둥지 하위 메뉴를 사용하십시오. 2. CSS 포지셔닝 하위 메뉴 (예 : 왼쪽 : 100%)를 추가하고 선택적으로 화살표 스타일을 추가합니다. 3. JavaScript를 사용하여 이벤트가 버블 링 및 스위치 하위 메뉴 디스플레이를 방지하거나 다음을 사용하십시오. 호버 트리거; 4. 부트 스트랩의 CSS 및 JS CDN의 도입 5.3.2; ARIA 속성의 모바일 경험 및 접근성 지원에주의를 기울이고 마지막으로 장치에서 사용할 수있는 다단계 드롭 다운 메뉴를 실현하십시오.

부트 스트랩에서 다단계 드롭 다운을 만드는 방법

부트 스트랩에서 다단계 드롭 다운 (특히 부트 스트랩 5, 이전 버전은 드롭 다운을 더 내장 내장 지원했기 때문에)에는 약간의 맞춤형 CS와 적절한 HTML 구조가 필요합니다. 부트 스트랩 5는 기본적으로 중첩 드롭 다운을 지원하지 않기 때문에 약간의 맞춤형 CS와 적절한 HTML 구조가 필요합니다. Bootstrap 5를 사용하여 작동하는 다단계 드롭 다운 메뉴를 구축하는 방법은 다음과 같습니다.

부트 스트랩에서 다단계 드롭 다운을 만드는 방법

1. 기본 HTML 구조

표준 부트 스트랩 드롭 다운으로 시작하고 추가 드롭 다운 메뉴를 둥지로 시작하십시오.

 <div class = "드롭 다운">
  <button class = "btn-primary dropdown-toggle"type = "button"id = "dropdownmenubutton"data-bs-toggle = "dropdown"aria-expanded = "false">
    다단계 드롭 다운
  </버튼>
  <ul class = "dropdown-menu"aria-labelledby = "dropdownmenubutton">
    <li> <a class = "Dropdown-Item"href = "#"> 항목 1 </a> </li>
    <li> <a class = "Dropdown-Item"href = "#"> 항목 2 </a> </li>

    <!-중첩 드롭 다운 트리거->
    <li class = "Dropdown-Submenu">
      <a class = "Dropdown-Item Dropdown-Toggle"href = "#"> submenu </a>
      <ul class = "dropdown-menu">
        <li> <a class = "Dropdown-Item"href = "#"> sub-item 1 </a> </li>
        <li> <a class = "Dropdown-Item"href = "#"> sub-item 2 </a> </li>

        <!-3 단계->
        <li class = "Dropdown-Submenu">
          <a class = "Dropdown-Item Dropdown-Toggle"href = "#"> sub-submenu </a>
          <ul class = "dropdown-menu">
            <li> <a class = "Dropdown-Item"href = "#"> 최종 항목 1 </a> </li>
            <li> <A class = "Dropdown-Item"href = "#"> 최종 항목 2 </a> </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

2. 중첩 메뉴에 맞춤 CSS를 추가하십시오

부트 스트랩은 기본적으로 .dropdown-menu 요소를 스타일링하지 않으므로 올바르게 배치해야합니다.

부트 스트랩에서 다단계 드롭 다운을 만드는 방법
 / * 부모에 대한 하위 메뉴 */
.Dropdown-submenu {
  위치 : 상대;
}

/ * 호버 또는 클릭에 하위 메뉴 표시 (선택 사항) */
.Dropdown-submenu .Dropdown-menu {
  상단 : 0;
  왼쪽 : 100%;
  마진 -탑 : -6px;
  마진 왼쪽 : -1px;
  Border-Radius : 0.375rem;
}

/ * 선택 사항 : 하위 메뉴에 화살표 표시기 추가 */
. 드롭 다운-토글 :: 이후 {
  마진 좌파 : 자동;
  마진 오른쪽 : 0;
}

.dropdown-submenu .Dropdown-toggle :: 이후 {
  마진 왼쪽 : 0.25EM;
  수직-정렬 : 0.255EM;
  테두리 탑 : 0.3EM 고체;
  경계 오른쪽 : 0.3EM 고체 투명;
  국경 바닥 : 0;
  왼쪽 경계 : 0.3em 고체 투명;
}

3. JavaScript를 사용한 하위 메뉴 핸들 (선택 사항)

기본적으로 Bootstrap은 클릭의 모든 드롭 다운을 숨 깁니다. 중첩 메뉴를 열려면 작은 스크립트를 사용하여 전파를 중지하고 가시성을 전환 할 수 있습니다.

 document.querySelectorall ( &#39;. Dropdown-Submenu A.Dropdown-Toggle&#39;). foreach (function (element) {
  element.addeventListener ( &#39;click&#39;, function (e) {
    e.preventDefault ();
    E.StopPropagation ();
    this.parentElement.classlist.toggle ( &#39;show&#39;);
    this.nextelementsibling.classlist.toggle ( &#39;show&#39;);
  });
});

또는 선호하는 경우 호버를 사용하십시오.

부트 스트랩에서 다단계 드롭 다운을 만드는 방법
 .dropdown-submenu : hover> .Dropdown-menu {
  디스플레이 : 블록;
}

참고 : 호버는 터치 장치에서 잘 작동하지 않을 수 있습니다.


4. 부트 스트랩 cDN 포함

부트 스트랩 5 CSS 및 JS를 포함시켜야합니다.

 <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"rel = "Stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/js/bootstrap.bundle.min.js"> </script>

기억해야 할 핵심 요점

  • dropdown-submenu 사용자 정의 클래스로 사용하여 중첩 항목을 식별하십시오.
  • 하위 메뉴를 left: 100% 부모의 오른쪽에 정렬하십시오.
  • JavaScript에서 stopPropagation() 사용한 이벤트 버블을 방지하십시오.
  • 모바일 테스트-다단계 드롭 다운은 터치 장치에서 사용하기가 어려울 수 있습니다.
  • 접근성을 고려하십시오 : 필요한 경우 aria-haspopuparia-expanded 속성을 동적으로 추가하십시오.

기본적으로 부트 스트랩은 기초를 제공하지만 중첩 드롭 다운에는 약간의 추가 마크 업과 스타일이 필요합니다. 올바른 구조와 약간의 조정으로 장치에서 작동하는 매끄러운 다중 레벨 드롭 다운을 가질 수 있습니다.

위 내용은 부트 스트랩에서 다단계 드롭 다운을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Stock Market GPT

Stock Market GPT

더 현명한 결정을 위한 AI 기반 투자 연구

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

부트 스트랩에서 끈적 끈적한 바닥 글을 만드는 방법 부트 스트랩에서 끈적 끈적한 바닥 글을 만드는 방법 Sep 16, 2025 am 06:00 AM

Flexbox 레이아웃을 사용하여 HTML과 바디 높이를 100%로 설정하고 D-Flex, Flex-Column 및 Min-VH-100 클래스를 컨테이너에 추가하십시오. 2. 나머지 공간을 차지하기 위해 Flex-Grow-1 클래스를 기본 요소에 추가하여 바닥 글을 바닥으로 밀어 넣습니다. 3. 바닥 글은 자연스럽게 컨텐츠의 끝에 있으며 짧은 내용이있을 때 바닥을 고수하고 긴 내용이 긴 컨텐츠 일 때 문서로 내려갑니다. 이 방법에는 추가 자바 스크립트 또는 고정 높이가 필요하지 않으며 반응 형 디자인과 호환되며 간단하고 신뢰할 수 있습니다.

내비게이션을 위해 부트 스트랩 목록 그룹을 사용하는 방법 내비게이션을 위해 부트 스트랩 목록 그룹을 사용하는 방법 Sep 21, 2025 am 06:31 AM

예, Bootstrap의 ListGroup을 탐색으로 사용할 수 있습니다. 1. List-Group 및 List-Group-Item-Action 클래스를 사용하여 각 프로젝트에 클릭 가능한 시각 효과 및 대화식 상태를 추가하십시오. 2. 활성 클래스를 사용하여 현재 페이지의 링크에 활성 클래스를 추가하여 현재 위치를 식별하십시오. 3. 선택적으로 정보 표시를 향상시키기 위해 아이콘이나 배지를 추가합니다. 4. 선택적으로 JavaScript를 사용하여 활성 상태를 동적으로 전환하여 단일 페이지 응용 프로그램에서 내비게이션을 실현합니다. 5. 목록 그룹을 사이드 바와 같은 반응 형 레이아웃에 배치하고 그리드 또는 탄성 레이아웃과 결합하여 전체 페이지 구조를 달성합니다. 블록 레벨 및 간격 내비게이션 항목이 필요한 경우 ListGroup이 선호됩니다.

부트 스트랩 알림을 사용하고 무시하는 방법은 무엇입니까? 부트 스트랩 알림을 사용하고 무시하는 방법은 무엇입니까? Sep 17, 2025 am 08:57 AM

특정 클래스 및 JavaScript 지원을 추가하여 부트 스트랩 경고를 꺼질 수 있습니다. 1. .alert-success와 같은 .alert 및 컨텍스트 클래스를 사용하여 기본 경고를 만듭니다. 2. 셧다운 및 페이드 효과를 지원하기 위해 .Alert-dismissible, .fade 및 .show 클래스를 추가하십시오. 3. .BTN-CLOSE 클래스 및 DATA-BS-DISMISS = "ALERT"속성이있는 버튼을 알림에 추가하여 종료를 달성합니다. 4. 셧다운 동작을 활성화하기 위해 부트 스트랩 JavaScript 번들이 도입되어 있는지 확인하십시오. 5. 선택적으로 아이콘을 추가하거나 닫힌 청취 .B

부트 스트랩에서 기본 테마 색상을 변경하는 방법은 무엇입니까? 부트 스트랩에서 기본 테마 색상을 변경하는 방법은 무엇입니까? Sep 16, 2025 am 01:42 AM

ToChangeFaultTheMecolorsinbootstrap5, audesStoOverrideVaribles와 같은 audesStoOverrideVaribles와 같은 $ drimary-foreimportingbootstrap; 2.update $ teme-colorsmaptoaddormodifycolorssuchas "하이라이트"ForfullitilityClassSupport;

vue.js와 함께 부트 스트랩을 사용하는 방법? vue.js와 함께 부트 스트랩을 사용하는 방법? Sep 18, 2025 am 04:33 AM

UseBootstrap5asitisjQuery-freeandcompatiblewithVue;2.InstallBootstrapvianpmandimportitsCSSinyourmainfileforstyling;3.ApplyBootstrapclassesdirectlyinVuetemplatesforlayoutanddesign;4.OptionallyuseBootstrap-Vue-3forVue3toaccessnativeVuecomponentslikeand

그림자에 부트 스트랩 유틸리티를 사용하는 방법 그림자에 부트 스트랩 유틸리티를 사용하는 방법 Sep 20, 2025 am 04:01 AM

Bootstrap은 세 가지 그늘 클래스를 제공합니다. 1..shadow-sm은 약한 그림자에 사용되며, 2. 쉐이 드는 표준 그림자에 사용되며, 3.shadow-lg는 큰 그림자에 사용됩니다. 시각적 계층 구조를 높이기 위해 카드 및 버튼과 같은 요소에 직접 적용 할 수 있습니다. BG-White와 같은 배경색으로 가시성을 보장해야합니다. 4. 기본 그림자를 제거하려면 .Shadow-none을 사용하십시오. 5. 반응 형 그림자는 맞춤형 CS를 통해 달성 할 수 있습니다. 그림자의 올바른 선택은 요소의 3 차원을 빠르게 향상시키고 설계 일관성을 유지하고 궁극적으로 인터페이스 깊이를 간단한 방식으로 향상시켜 완전한 방식으로 끝납니다.

부트 스트랩에서 다단계 드롭 다운을 만드는 방법 부트 스트랩에서 다단계 드롭 다운을 만드는 방법 Sep 20, 2025 am 04:08 AM

Bootstrap5 용 다단계 드롭 다운 메뉴를 만들려면 사용자 정의 CSS 및 JavaScript 구현을 결합해야합니다. 1. 드롭 다운 -submenu 클래스와 함께 표준 드롭 다운 구조와 둥지 하위 메뉴를 사용하십시오. 2. CSS 포지셔닝 하위 메뉴 (예 : 왼쪽 : 100%)를 추가하고 선택적으로 화살표 스타일을 추가합니다. 3. JavaScript를 사용하여 이벤트가 버블 링 및 스위치 하위 메뉴 디스플레이를 방지하거나 다음을 사용하십시오. 호버 트리거; 4. Bootstrap5.3.2의 CSS 및 JSCDN이 도입되었는지 확인하십시오. ARIA 속성의 모바일 경험 및 접근성 지원에주의를 기울이고 마지막으로 장치에서 사용할 수있는 다단계 드롭 다운 메뉴를 실현하십시오.

부트 스트랩에서 비밀번호 강도 표시기를 만드는 방법 부트 스트랩에서 비밀번호 강도 표시기를 만드는 방법 Sep 17, 2025 am 02:07 AM

비밀번호 강도 표시기를 만드는 방법은 HTML, CSS 및 JavaScript를 암호 강도에 대한 실시간 피드백과 결합하는 것입니다. 1. 부트 스트랩을 사용하여 암호 입력 상자 및 진행률 막대가 포함 된 HTML 구조를 구축하십시오. 2. JavaScript를 통해 입력 이벤트를 듣고 길이, 대문자 및 대문자, 숫자 및 특수 문자의 5 가지 조건에 따라 비밀번호 강도를 평가하고 각 항목에 대해 20 점을 추가하십시오. 3. 점수에 따라 진행률 표시 줄, 색상 및 텍스트 프롬프트를 동적으로 업데이트합니다. 4. 선택적 최적화에는 비밀번호 가시성 토글 및 입력 추가가 포함됩니다.

See all articles