Bootstrap 3에 내장 하위 메뉴 클래스가 없는 이유는 무엇이며 어떻게 만들 수 있나요?

Bootstrap 하위 메뉴 문제: 원인 및 해결 방법

Bootstrap 3 개발이 눈에 띄게 발전함에도 불구하고 하위 메뉴가 명백히 없다는 우려가 제기되었습니다. 수업. 이 가이드는 이러한 누락의 이유를 밝히고 하위 메뉴 구현을 위한 실질적인 해결 방법을 제공합니다.

Bootstrap 3에서 드롭다운 하위 메뉴가 누락되는 이유는 무엇입니까?

드롭다운 하위 메뉴 클래스인 Bootstrap은 Bootstrap 3 RC의 출현으로 더 이상 사용되지 않습니다. 이 결정은 현대 웹 디자인, 특히 모바일 장치에서 하위 메뉴의 관련성이 감소한 데서 비롯되었습니다.

하위 메뉴 구축을 위한 솔루션

Bootstrap 5:

• 자바스크립트 방법: '차단'과 '없음' 사이에서 표시를 전환하여 상위 드롭다운이 열려 있을 때 하위 메뉴가 닫히는 것을 방지합니다.
• CSS 전용 방법(Navbar 드롭다운용): 위치 CSS 호버 이벤트를 사용하여 표시하기 위한 하위 메뉴.

부트스트랩 4:

• CSS 해킹: 위치 지정 및 호버 효과를 포함한 추가 CSS 규칙을 사용하여 하위 메뉴 기능을 시뮬레이션합니다.

부트스트랩 3:

• 레거시 방법: 원본 CSS 및 마크업을 활용하여 이전 Bootstrap 버전과의 호환성을 유지합니다.

예 구현(부트스트랩 3):

<div class="dropdown">
  <button class="dropdown-toggle" data-toggle="dropdown" type="button">
    Example Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li class="dropdown-submenu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
      <ul class="dropdown-menu">
        <li><a href="#">Link 1</a></li>
        <li class="dropdown-submenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
          <ul class="dropdown-menu">
            <li><a href="#">Link 3</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

참고: 하위 메뉴를 올바르게 정렬하려면 추가 CSS 조정이 필요할 수 있습니다.

이 지침에 따라 개발자는 다음을 수행할 수 있습니다. 사용되는 버전에 관계없이 Bootstrap에서 하위 메뉴 기능을 손쉽게 구현합니다.

위 내용은 Bootstrap 3에 내장 하위 메뉴 클래스가 없는 이유는 무엇이며 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!