Wie erstelle ich mit Bootstrap 4 eine zweizeilige Navigationsleiste?

Bootstrap 4-Navigationsleiste mit zwei Zeilen

In diesem Bootstrap 4-Tutorial zeigen wir Ihnen, wie Sie eine Navigationsleiste mit zwei Zeilen erstellen. Dies ist ein gängiges Designmuster für Websites, die viele Navigationsoptionen haben oder verschiedene Arten der Navigation trennen möchten.

Voraussetzungen

Um mitzumachen, benötigen Sie:

• Grundkenntnisse von HTML und CSS
• Bootstrap 4 auf Ihrem installiert System

Erstellen der Navigationsleiste

1. Erstellen Sie zunächst eine neue HTML-Datei.
2. Fügen Sie den folgenden Code zu Ihrer Datei hinzu, um die grundlegende Struktur der Navigationsleiste zu erstellen:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse">

Zwei Zeilen hinzufügen

Zum Hinzufügen von zwei Zeilen zum navbar verwenden wir die Flex-Column-Klasse für das Navbar-Collapse-Div. Dadurch werden die untergeordneten Elemente des Navbar-Collapse-Divs vertikal gestapelt.

<div class="collapse navbar-collapse flex-column">

Navigationslinks hinzufügen

Da wir nun zwei Zeilen haben, können wir ihnen die Navigationslinks hinzufügen. Wir erstellen zwei ul-Elemente, eines für jede Zeile.

<div class="collapse navbar-collapse flex-column">

Ergebnis

Hier ist die resultierende Navigationsleiste mit zwei Zeilen:

  Navbar
  
    
  

  <div class="collapse navbar-collapse flex-column">

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit Bootstrap 4 eine zweizeilige Navigationsleiste?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!