Source

Navigationsleiste

Dokumentation und Beispiele für den leistungsstarken, reaktionsschnellen Navigations-Header von Bootstrap, die Navigationsleiste. Beinhaltet Unterstützung für Branding, Navigation und mehr, einschließlich Unterstützung für unser Kollaps-Plugin.

Wie es funktioniert

Folgendes müssen Sie wissen, bevor Sie mit der Navigationsleiste beginnen:

  • Navbars erfordern eine Umhüllung .navbarmit .navbar-expand{-sm|-md|-lg|-xl}für ansprechende Minimierungs- und Farbschemaklassen .
  • Navbars und ihre Inhalte sind standardmäßig flüssig. Verwenden Sie optionale Container , um ihre horizontale Breite zu begrenzen.
  • Verwenden Sie unsere Spacing- und Flex -Utility-Klassen, um den Abstand und die Ausrichtung innerhalb der Navigationsleisten zu steuern.
  • Navbars reagieren standardmäßig, aber Sie können sie einfach ändern, um dies zu ändern. Das Antwortverhalten hängt von unserem Collapse-JavaScript-Plugin ab.
  • Navigationsleisten werden beim Drucken standardmäßig ausgeblendet. Erzwingen Sie das Drucken, indem Sie .d-printdie .navbar. Siehe die Display -Utility-Klasse.
  • Stellen Sie die Zugänglichkeit sicher, indem Sie ein <nav>Element verwenden, oder, wenn Sie ein allgemeineres Element wie ein verwenden <div>, fügen role="navigation"Sie jeder Navigationsleiste ein hinzu, um sie explizit als Orientierungspunkt für Benutzer von Hilfstechnologien zu kennzeichnen.

Der Animationseffekt dieser Komponente ist abhängig von der prefers-reduced-motionMedienanfrage. Weitere Informationen finden Sie im Abschnitt zur reduzierten Bewegung in unserer Dokumentation zur Barrierefreiheit .

Lesen Sie weiter für ein Beispiel und eine Liste der unterstützten Unterkomponenten.

Unterstützte Inhalte

Navbars verfügen über eine integrierte Unterstützung für eine Handvoll Unterkomponenten. Wählen Sie je nach Bedarf aus:

  • .navbar-brandfür Ihren Firmen-, Produkt- oder Projektnamen.
  • .navbar-navfür eine Navigation in voller Höhe und leichtgewichtig (einschließlich Unterstützung für Dropdowns).
  • .navbar-togglerzur Verwendung mit unserem Minimierungs-Plug-in und anderen Verhaltensweisen zum Umschalten der Navigation .
  • .form-inlinefür alle Formularsteuerelemente und Aktionen.
  • .navbar-textzum Hinzufügen von vertikal zentrierten Textfolgen.
  • .collapse.navbar-collapsezum Gruppieren und Ausblenden von Navigationsleisteninhalten nach einem übergeordneten Haltepunkt.

Hier ist ein Beispiel aller Unterkomponenten, die in einer responsiven Navigationsleiste mit Lichtdesign enthalten sind, die automatisch am lg(großen) Haltepunkt eingeklappt wird.

<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" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

In diesem Beispiel werden die Hilfsklassen Farbe ( bg-light) und Abstand ( my-2, my-lg-0, mr-sm-0, my-sm-0) verwendet.

Marke

Das .navbar-brandkann auf die meisten Elemente angewendet werden, aber ein Anker funktioniert am besten, da einige Elemente möglicherweise Hilfsklassen oder benutzerdefinierte Stile erfordern.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

Das Hinzufügen von Bildern zum .navbar-brandwird wahrscheinlich immer benutzerdefinierte Stile oder Dienstprogramme erfordern, um die richtige Größe zu erreichen. Hier sind einige Beispiele zur Veranschaulichung.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Navbar-Navigationslinks bauen auf unseren .navOptionen mit ihrer eigenen Modifikatorklasse auf und erfordern die Verwendung von Toggler-Klassen für das richtige Responsive-Styling. Die Navigation in Navbars wird auch wachsen, um so viel horizontalen Platz wie möglich einzunehmen, damit Ihre Navbar-Inhalte sicher ausgerichtet bleiben.

Aktive Zustände – mit .active– um anzuzeigen, dass die aktuelle Seite direkt auf .nav-links oder ihre unmittelbar übergeordneten .nav-items angewendet werden kann.

<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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Und da wir Klassen für unsere Navs verwenden, können Sie den listenbasierten Ansatz ganz vermeiden, wenn Sie möchten.

<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="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Sie können auch Dropdowns in Ihrer Navigationsleiste verwenden. Dropdown-Menüs erfordern ein Wrapping-Element für die Positionierung, verwenden Sie also unbedingt separate und verschachtelte Elemente für .nav-itemund .nav-linkwie unten gezeigt.

<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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Formen

Platzieren Sie verschiedene Formularsteuerelemente und Komponenten innerhalb einer Navigationsleiste mit .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Unmittelbar untergeordnete Elemente .navbarverwenden Flex-Layout und sind standardmäßig justify-content: space-between. Verwenden Sie nach Bedarf zusätzliche Flex-Dienstprogramme , um dieses Verhalten anzupassen.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Eingangsgruppen funktionieren auch:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Als Teil dieser Navigationsleistenformulare werden auch verschiedene Schaltflächen unterstützt. Dies ist auch eine großartige Erinnerung daran, dass Dienstprogramme für die vertikale Ausrichtung verwendet werden können, um Elemente unterschiedlicher Größe auszurichten.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Text

Navigationsleisten können mit Hilfe von Textschnipsel enthalten .navbar-text. Diese Klasse passt die vertikale Ausrichtung und den horizontalen Abstand für Textzeichenfolgen an.

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

Mischen und kombinieren Sie es nach Bedarf mit anderen Komponenten und Dienstprogrammen.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

Farbschemata

Dank der Kombination von Designklassen und background-colorDienstprogrammen war die Gestaltung der Navigationsleiste noch nie so einfach. Wählen Sie aus .navbar-lightfür die Verwendung mit hellen Hintergrundfarben oder .navbar-darkfür dunkle Hintergrundfarben. Passen Sie dann mit .bg-*Dienstprogrammen an.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Behälter

Obwohl dies nicht erforderlich ist, können Sie eine Navigationsleiste in ein einschließen .container, um sie auf einer Seite zu zentrieren, oder eine hinzufügen, um nur den Inhalt einer festen oder statischen oberen Navigationsleiste zu zentrieren .

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

Wenn sich der Container in Ihrer Navigationsleiste befindet, wird seine horizontale Polsterung an Haltepunkten entfernt, die niedriger als Ihre angegebene .navbar-expand{-sm|-md|-lg|-xl}Klasse sind. Dadurch wird sichergestellt, dass wir die Polsterung nicht unnötig in unteren Ansichtsfenstern verdoppeln, wenn Ihre Navigationsleiste eingeklappt ist.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Platzierung

Verwenden Sie unsere Positionsdienstprogramme , um Navigationsleisten an nicht statischen Positionen zu platzieren. Wählen Sie „oben fixiert“, „unten fixiert“ oder „oben fixiert“ (scrollt mit der Seite, bis sie ganz oben ist, und bleibt dann dort). Feste Navigationsleisten verwenden position: fixed, was bedeutet, dass sie aus dem normalen Fluss des DOM gezogen werden und möglicherweise benutzerdefiniertes CSS (z. B. padding-topauf dem <body>) erfordern, um Überschneidungen mit anderen Elementen zu vermeiden.

Beachten Sie auch, dass .sticky-topverwendet position: stickywird, was nicht von jedem Browser vollständig unterstützt wird .

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

Ansprechende Verhaltensweisen

Navigationsleisten können .navbar-toggler, .navbar-collapseund .navbar-expand{-sm|-md|-lg|-xl}Klassen verwenden, um sich zu ändern, wenn ihr Inhalt hinter einer Schaltfläche zusammenbricht. In Kombination mit anderen Dienstprogrammen können Sie ganz einfach auswählen, wann bestimmte Elemente angezeigt oder ausgeblendet werden sollen.

Fügen Sie für Navigationsleisten, die niemals einklappen, die .navbar-expandKlasse zur Navigationsleiste hinzu. Fügen Sie für Navigationsleisten, die immer einklappen, keine .navbar-expandKlasse hinzu.

Umschalter

Navbar Toggler sind standardmäßig linksbündig, aber wenn sie einem gleichgeordneten Element wie einem folgen .navbar-brand, werden sie automatisch ganz rechts ausgerichtet. Wenn Sie Ihr Markup umkehren, wird die Platzierung des Umschalters umgekehrt. Nachfolgend finden Sie Beispiele für verschiedene Umschaltstile.

Ohne .navbar-brandam niedrigsten Haltepunkt angezeigt:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Mit einem Markennamen auf der linken Seite und einem Umschalter auf der rechten Seite:

<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="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Mit Umschalter links und Markenname rechts:

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

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Externe Inhalte

Manchmal möchten Sie das Minimierungs-Plugin verwenden, um versteckte Inhalte an anderer Stelle auf der Seite auszulösen. Da unser Plugin auf dem idund dem data-targetMatching funktioniert, ist das ganz einfach!

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>