Bootstrap 4 Navigation Bar

Eine Navigation Bar ist eine Navigationsleiste, die meist oben auf der Seite platziert wird.

Basis Navbar

Mit Bootstrap kann eine Navigationsleiste je nach Bildschirmgröße vergrößert oder verkleinert werden.
Eine Standardnavigationsleiste wird mit der Klasse .navbar erstellt, gefolgt von einer responsiven Reduzierungsklasse: .navbar-expand-xl | lg | md | sm (Stapelt die Navigationsleiste vertikal auf extra großen, großen, mittleren oder kleinen Bildschirmen).

Um Links innerhalb der Navigationsleiste hinzuzufügen, verwenden Sie ein <ul> -Element mit class = "navbar-nav". Fügen Sie dann <li> -Elemente mit einer .nav-item Klasse hinzu, gefolgt von einem <a> -Element mit einer .nav-link-Klasse

Beispiel:

<!-- Eine graue horizontale Navigationsleiste, die auf kleinen Bildschirmen vertikal wird -->

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>

</nav>

Vertikale Navbar

Entfernen Sie die Klasse .navbar-expand-xl | lg | md | sm, um eine vertikale Navigationsleiste zu erstellen.

Beispiel:

<!-- Spaltenbreite col-3/25% -->
    <div class="col-3">
        <!-- Vertikale Navbar -->
            <nav class="navbar navbar-dark bg-dark">
                <!-- Links -->
                <ul class="nav navbar-nav">
                    <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0)">Link 1</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0)">Link 2</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0)">Link 3</a>
                    </li>
                </ul>
            </nav>
        </div>

Zentrierte Navbar

Fügen Sie die Klasse .justify-content-center hinzu, um die Navigationsleiste zu zentrieren.

Im folgenden Beispiel wird die Navigationsleiste auf mittleren, großen und extragroßen Bildschirmen zentriert. Auf kleinen Bildschirmen wird es vertikal und linksbündig angezeigt (wegen der Klasse .navbar-expand-sm)

Beispiel:

<nav class="navbar navbar-dark bg-dark navbar-expand-sm justify-content-center">

    <!-- Links -->
    <ul class="nav navbar-nav" style="visibility: visible;">
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)">Link 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)">Link 2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)">Link 3</a>
        </li>
    </ul>
</nav>

farbige Navbar

Verwenden Sie eine der .bg-color-Klassen, um die Hintergrundfarbe der Navigationsleiste zu ändern (.bg-primär, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-sekundary, .bg - Dunkel- und .bg-Licht)

Tipp: Fügen Sie allen Links in der Navigationsleiste eine weiße Textfarbe mit der Klasse .navbar-dark hinzu oder verwenden Sie die Klasse .navbar-light, um eine schwarze Textfarbe hinzuzufügen.

Beispiele:

<!-- Grau mit schwarzen Text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>

<!-- Schwarz mit weißen Text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>

<!-- Blau mit weiße Text -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
                

Status "Aktiv / Deaktiviert": Fügen Sie einem <a>-Element die Klasse .active hinzu, um den aktuellen Link hervorzuheben, oder die Klasse .disabled, um anzugeben, dass der Link deaktiviert (nicht anklickbar) ist.

Brand / Logo

Die .navbar-brand Klasse wird verwendet, um die Marke / das Logo / den Projektnamen Ihrer Seite hervorzuheben:

Beispiel

 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Bootstrap-Forum</a>
  ...
</nav> 

Wenn Sie die .navbar-brand-Klasse für Bilder verwenden, formatiert Bootstrap 4 das Bild automatisch so, dass es vertikal in die Navbar passt.

Beispiel

 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <a class="navbar-brand" href="#">
    <img src="bild.jpg" alt="Logo" style="width:40px;">
    </a>
      ...
</nav> 

Die Navigationsleiste einklappen

Sehr oft, insbesondere auf kleinen Bildschirmen, möchten Sie die Navigationslinks ausblenden und durch eine Schaltfläche ersetzen, die sie beim Anklicken anzeigen soll.

Um eine reduzierbare Navigationsleiste zu erstellen, verwenden Sie eine Schaltfläche mit class = "navbar-toggler", data-toggle = "collapse" und data-target = "# thetarget". Packen Sie dann den Inhalt der Navigationsleiste (Links usw.) in ein div-Element mit class = "collapse navbar-collapse" gefolgt von einer ID, die mit dem Datenziel der Schaltfläche übereinstimmt: "dasZiel".

Beispiel

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand / Logo-->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- Toggler Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav> 

Tip: Sie können auch die .navbar-expand-md-Klasse entfernen, um IMMER die Navigationsleisten-Links auszublenden und die Umschalttaste anzuzeigen.

Navbar With Dropdown

Navbars können auch Dropdown-Menüs enthalten:

Beispiel

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Logo</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Dropdown-Link 1</a>
        <a class="dropdown-item" href="#">Dropdown-Link 2</a>
        <a class="dropdown-item" href="#">Dropdown-Link 3</a>
      </div>
    </li>
  </ul>
</nav> 

Navbar Forms and Buttons

Fügen Sie ein <form> -Element mit class="form-inline" hinzu, um Eingaben und Schaltflächen nebeneinander zu gruppieren:

Beispiel

 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline" action="/action_page.php">
    <input class="form-control mr-sm-2" type="text" placeholder="Search">
    <button class="btn btn-success" type="submit">Search</button>
  </form>
</nav> 

Sie können auch andere Eingabeklassen wie .input-group-prepend oder .input-group-append verwenden, um neben dem Eingabefeld ein Symbol oder einen Hilfetext anzuhängen. Sie erfahren mehr über diese Klassen im Kapitel Bootstrap-Eingänge.

Beispiel

 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline" action="/action_page.php">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username">
    </div>
  </form>
</nav>

Navbar Text

Verwenden Sie die .navbar-text-Klasse, um alle Elemente innerhalb der Navigationsleiste, die keine Links sind, vertikal auszurichten (sorgt für richtige Ausrichtung und Textfarbe)

 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
  </ul>

  <!-- Navbar Text-->
  <span class="navbar-text">
    Navbar-Text
  </span>

</nav>

Fixed Navigation Bar

Die Navigationsleiste kann oben oder unten auf der Seite fixiert werden.
Eine feste Navigationsleiste bleibt an einer festen Position (oben oder unten) unabhängig vom Seitenwechsel sichtbar.
Die .fixed-top-Klasse setzt die Navigationsleiste oben fest:

Beispiel

 <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

Verwenden Sie die Klasse .fixed-bottom, damit die Navigationsleiste am unteren Seitenrand bleibt.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

Verwenden Sie die Klasse .sticky-top, um die Navigationsleiste am Anfang der Seite zu fixieren / bleiben, wenn Sie daran vorbei blättern. Hinweis: Diese Klasse funktioniert nicht in IE11 und früher (behandelt sie als Position: relativ).

Verwenden Sie die Klasse .sticky-top, um die Navigationsleiste am Anfang der Seite zu fixieren wenn Sie beim scrollen erreicht wird.
Hinweis: Diese Klasse funktioniert nicht in IE11 und früher.

Beispiel

 <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>