Warum gibt es in Bootstrap 3 keine integrierte Untermenüklasse und wie kann ich eine erstellen?

Problem mit dem Bootstrap-Untermenü: Ursachen und Lösungen

Trotz der Bedeutung von Bootstrap 3 in der Entwicklung gab es Bedenken hinsichtlich des offensichtlichen Fehlens eines Untermenüs Klasse. Dieser Leitfaden beleuchtet die Gründe für dieses Versäumnis und bietet praktische Abhilfemaßnahmen für die Implementierung von Untermenüs.

Warum fehlt das Dropdown-Untermenü in Bootstrap 3?

Auf der evolutionären Reise von Bootstrap, die Dropdown-Untermenü-Klasse, wurde mit der Einführung von Bootstrap 3 RC veraltet. Diese Entscheidung ergab sich aus der geringeren Relevanz von Untermenüs im modernen Webdesign, insbesondere auf mobilen Geräten.

Lösungen für den Aufbau von Untermenüs

Bootstrap 5:

• JavaScript-Methode: Verhindern, dass das Untermenü geschlossen wird wenn das übergeordnete Dropdown-Menü geöffnet ist, indem Sie die Anzeige zwischen „Blockieren“ und „Keine“ umschalten.
• Nur ​​CSS-Methode (für Navbar-Dropdowns):Positionieren Sie das Untermenü für die Anzeige mithilfe von CSS-Hover-Ereignissen.

Bootstrap 4:

• CSS-Hack: Simulieren Sie die Untermenüfunktionalität mit zusätzlichen CSS-Regeln, einschließlich Positionierungs- und Hover-Effekten.

Bootstrap 3:

• Vermächtnis Methode:Verwenden Sie das ursprüngliche CSS und Markup, um die Kompatibilität mit älteren Bootstrap-Versionen aufrechtzuerhalten.

Beispielimplementierung (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;
}

Hinweis: Möglicherweise sind zusätzliche CSS-Anpassungen erforderlich, um Untermenüs auszurichten richtig.

Durch Befolgen dieser Richtlinien können Entwickler mühelos Untermenüfunktionen in Bootstrap implementieren, unabhängig von der verwendeten Version.

Das obige ist der detaillierte Inhalt vonWarum gibt es in Bootstrap 3 keine integrierte Untermenüklasse und wie kann ich eine erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!