Die Kernmethode zur Implementierung einer Dual-Row-Navigationsleiste in Bootstrap besteht darin, Strukturen und Stilanpassungen zu kombinieren. 1. Verwenden Sie verschachtelte Container, um eine Dual-Line-Struktur zu erstellen, verwenden Sie zwei unabh?ngige .navbars oder .container, um den oberen und unteren Navigationsinhalt zu platzieren. In der ersten Zeile werden Sekund?rinformationen wie Sprachwechsel und Kontaktinformationen verwendet, und die zweite Zeile wird als Hauptmenü verwendet. 2. Verwenden Sie das Flex-Layout, um in einen Beh?lter zu verschmelzen, d-flex-flex-s?ule durch das ?u?ere Div zu setzen, um vertikales Stapeln zu erzielen, und verwalten Sie Stile und Breiten gleichm??ig. 3. Die Optimierungsdetails umfassen die Steuerung des Abstands, das Verstecken des ersten Zeileninhalts, die Stilisolation und die Koordination von Farbanpassungen. Diese Schritte erm?glichen eine klare Struktur und eine reaktionsschnelle und freundliche Dual-Line-Navigationsleiste.

Das Implementieren der Doppelzeile -Navigationsleiste in Bootstrap ist eigentlich keine Funktion, die mit dem Framework geliefert wird. Dieser Effekt kann jedoch durch eine einfache HTML -Struktur und CSS -Anpassungen erzielt werden. Der Fokus liegt auf dem Verst?ndnis des Layoutmechanismus von Bootstrap und der rationalen Verwendung seines Rastersystems oder der Flex -Tools.

Aufbau einer Doppelreihenstruktur mit verschachtelten Beh?ltern

Eine g?ngige Praxis besteht darin, zwei separate .navbar oder .container zu verwenden, um Navigationsinhalte oben bzw. unten zu platzieren.

 <div class = "top-nav">
  <div class = "container">
    <!-Der Inhalt der ersten Zeile, wie z. B. Sprachauswahl, Kontaktinformationen usw.->
    <div class = "d-flex gerechtfertigte content dazwischen">
      <span> Chinesisch/ Englisch </ span>
      <Pan> Kontaktieren Sie uns </span>
    </div>
  </div>
</div>

<nav class = "navbar navbar-expand-lg navi-light bg-light">
  <div class = "container">
    <a class = "navbar-brand" href = "#"> logo </a>
    <button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#mainnav">
      <span class = "navbar-toggler-icon"> </span>
    </button>
    <div class = "Collapse Navi-Collapse" id = "mineNav">
      <ul class = "navbar-nav ms-auto">
        <li class = "nav-iTem"> <a class = "nav-link" href = "#"> home </a> </li>
        <li class = "nav-item"> <a class = "nav-link" href = "#"> Produkt </a> </li>
        <li class = "nav-iTem"> <a class = "nav-link" href = "#"> Kontaktieren Sie uns </a> </li>
      </ul>
    </div>
  </div>
</nav>

• Die erste Zeile kann sekund?re Informationen wie Sprachwechsel, Anmeldeverbindungen usw. einstellen.
• Die zweite Zeile ist die Standard -Bootstrap -Navigationsleiste für das Hauptmenü.
• Diese Methode ist in der Struktur klar und für die reaktionsschnelle Verarbeitung geeignet.

Führen Sie mit Flex -Layout in einen Beh?lter zusammen

Wenn Sie m?chten, dass die Dual-Line-Navigation in einem übergeordneten Container verwaltet wird, k?nnen Sie zwei Inhaltslinien mit einem benutzerdefinierten Flex-Container einwickeln:

 <div class = "Doppel-Navbar D-Flex Flex-S?ule">
  <div class = "Top-Bar BG-Light Py-2">
    <div class = "Container D-Flex Justify-Content-dazwischen">
      <span> Willkommen auf unserer Website </span>
      <Pan> Login | Register </span>
    </div>
  </div>

  <nav class = "navbar navbar-expand-lg navbar-light bg-White">
    ...
  </nav>
</div>

• Durch das Einstellen der Au?enschicht d-flex flex-column k?nnen zwei Teile vertikal gestapelt werden.
• Die Breite oder die Hintergrundfarbe k?nnen gleichm??ig eingestellt werden, sodass sie insgesamt visuell st?rker wird.
• Achten Sie darauf, ob sich die Faltungslogik auf den Inhalt der ersten Zeile auswirkt, wenn sie sich an das mobile Terminal anpasst.

Kleine Details Optimierungsvorschl?ge

• Abstandskontrolle : Es ist am besten, einen kleinen Spielraum oder eine Polsterung zwischen den beiden Zeilen hinzuzufügen, um eine visuelle überfüllung zu vermeiden.

• Verantwortlich ausblenden Sie die erste Zeile : Auf dem kleinen Bildschirm k?nnen Sie in Betracht ziehen, die sekund?ren Informationen in der oberen Zeile zu verbergen:

  

   <div class = "Top-Bar D-None D-Md-Block">

• Stilisolation : Versuchen Sie, nicht zu viele Stile für die beiden Navigationsstangen zu teilen, um eine St?rung miteinander zu vermeiden.

• Farbanpassung : Die Farbunterschiede zwischen den oberen und unteren Linien sollten nicht zu offensichtlich sein und die Gesamtkoordination beibehalten.

---

Grunds?tzlich sind dies die Methoden. Obwohl Bootstrap eine Dual-Line-Navigationsleiste nicht direkt unterstützt, kann sie leicht erreicht werden, indem vorhandene Komponenten mit ein wenig CSS-Tweak kombiniert werden. Der Schlüssel besteht darin, das strukturelle Niveau zu kl?ren und auf die Erfahrungen im reaktionsschnellen Design zu achten.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine doppelte Zeilen -Navigation in Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!