in English

Navbar

Dokumentatioun an Beispiller fir Bootstrap's mächtege, reaktiounsfäeger Navigatiounsheader, d'Navbar. Ëmfaasst Ënnerstëtzung fir Branding, Navigatioun, Zesummebroch Plugin, a méi.

Wéi et funktionnéiert

Hei ass wat Dir wësse musst ier Dir mat der Navbar ufänkt:

  • Navbars verlaangen eng wrapping .navbarmat .navbar-expand{-sm|-md|-lg|-xl}fir reaktiounsfäeger Zesummebroch an Faarf Schema Klassen.
  • Navbars an hiren Inhalt si flësseg par défaut. Benotzt optional Container fir hir horizontal Breet ze limitéieren.
  • Benotzt eis Abstands- a Flex- Utility-Klassen fir Abstand an Ausriichtung bannent Navbars ze kontrolléieren.
  • Navbars reaktiounsfäeger par défaut, awer Dir kënnt se einfach änneren fir dat z'änneren. Responsabel Verhalen hänkt vun eisem Collapse JavaScript Plugin of.
  • Navbars sinn par défaut verstoppt beim Drock. Kraaft se fir gedréckt ze ginn andeems se .d-printop d' .navbar. Kuckt d' Display Utility Klass.
  • Vergewëssert Iech Accessibilitéit andeems Dir en <nav>Element benotzt oder, wann Dir e méi generescht Element benotzt wéi e <div>, füügt eng role="navigation"un all Navbar fir et explizit als Landmarkregioun fir Benotzer vun Hëllefstechnologien z'identifizéieren.
Den Animatiounseffekt vun dëser Komponent hänkt vun der prefers-reduced-motionMedienufro of. Kuckt d' Reduktiounsbewegungssektioun vun eiser Accessibilitéitsdokumentatioun .

Ënnerstëtzt Inhalt

Navbars kommen mat agebauter Ënnerstëtzung fir eng Handvoll Ënnerkomponenten. Wielt aus de folgende wéi néideg:

  • .navbar-brandfir Är Firma, Produkt oder Projet Numm.
  • .navbar-navfir eng voll Héicht a liicht Navigatioun (inklusiv Ënnerstëtzung fir Dropdowns).
  • .navbar-togglerfir ze benotzen mat eisem Zesummebroch Plugin an aner Navigatioun toggling Behuelen.
  • .form-inlinefir all Form Kontrollen an Aktiounen.
  • .navbar-textfir vertikal zentréiert Strings vum Text ze addéieren.
  • .collapse.navbar-collapsefir Gruppéierung an Verstoppen navbar Inhalt vun engem Elterendeel breakpoint.

Hei ass e Beispill vun all Ënnerkomponenten, déi an enger reaktiounsfäeger liichtthematescher Navbar abegraff sinn, déi automatesch um lg(grousse) Breakpunkt zesummeklappen.

<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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <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">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>

Dëst Beispill benotzt Faarf ( bg-light) an Abstand ( my-2, my-lg-0, mr-sm-0, my-sm-0) Utility Klassen.

Mark

Dee .navbar-brandkann op déi meescht Elementer applizéiert ginn, awer en Anker funktionnéiert am Beschten, well e puer Elementer Utilityklassen oder personaliséiert Stiler erfuerderen.

<!-- 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>

Fotoen op d'Biller ze addéieren .navbar-brandwäert wahrscheinlech ëmmer personaliséiert Stiler oder Utilities fir richteg Gréisst erfuerderen. Hei sinn e puer Beispiller fir ze demonstréieren.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/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.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Navbar Navigatiounslinks bauen op eis .navOptiounen mat hirer eegener Modifikateur Klass a verlaangen d'Benotzung vun Toggler Klassen fir e richtege reaktiounsfäeger Styling. Navigatioun an Navbars wäert och wuessen fir sou vill horizontal Plaz wéi méiglech ze besetzen fir Ären Navbar Inhalt sécher ausgeriicht ze halen.

Aktiv Staaten - mat .active- fir unzeginn déi aktuell Säit kann direkt op .nav-links oder hir direkt Elterendeel applizéiert ginn .nav-item.

<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">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

A well mir Klassen fir eis Navs benotzen, kënnt Dir d'Lëscht-baséiert Approche ganz vermeiden wann Dir wëllt.

<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-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

Dir kënnt och Dropdowns an Ärer Navbar benotzen. Dropdown-Menüen erfuerderen e Wrapping-Element fir d'Positionéierung, also gitt sécher datt Dir getrennt an nestet Elementer benotzt fir .nav-itema .nav-linkwéi hei ënnendrënner.

<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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <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

Place verschidde Form Kontrollen a Komponente bannent engem navbar mat .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>

Direkt Kand Elementer vun .navbarbenotzen flex Layout a wäert Standard op justify-content: space-between. Benotzt zousätzlech Flex Utilities wéi néideg fir dëst Verhalen unzepassen.

<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>

Input Gruppen funktionnéieren och:

<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>

Verschidde Knäppercher ginn och als Deel vun dësen Navbar Formen ënnerstëtzt. Dëst ass och eng super Erënnerung datt vertikal Ausrichtung Utilities kënne benotzt ginn fir Elementer vu verschiddene Gréissten auszegläichen.

<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

Navbars kënne Stécker vum Text mat der Hëllef vun .navbar-text. Dës Klass passt d'Vertikal Ausrichtung an d'horizontale Abstand fir Textsträicher un.

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

Mix a passt mat anere Komponenten an Utilities wéi néideg.

<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>

Faarf Schemaen

Themen vun der Navbar war ni méi einfach dank der Kombinatioun vun Themeklassen an background-colorUtilities. Wielt aus .navbar-lightfir ze benotzen mat hellem Hannergrondfaarwen, oder .navbar-darkfir donkel Hannergrondfaarwen. Dann, personaliséiere mat .bg-*Utilities.

<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>

Container

Och wann et net erfuerderlech ass, kënnt Dir eng Navbar an engem wéckelen .containerfir se op enger Säit ze zentréieren. Oder Dir kënnt e Container bannen derbäisetzen .navbarfir nëmmen den Inhalt vun enger fixer oder statescher Top Navbar ze zentréieren .

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

Wann de Container an Ärer Navbar ass, gëtt seng horizontal Padding bei Breakpunkte méi niddereg wéi Är spezifizéierter .navbar-expand{-sm|-md|-lg|-xl}Klass geläscht. Dëst garantéiert datt mir net op der Padding onnéideg op ënneschten Viewports verduebelen wann Är Navbar zesummegeklappt ass.

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

Placement

Benotzt eis Positiouns Utilities fir Navbars an net-statesch Positiounen ze placéieren. Wielt tëscht fixéiert no uewen, fixéiert no ënnen oder eropgeknäppt (scrollt mat der Säit bis se uewen erreecht, da bleift do). Fixed Navbars benotzen position: fixed, dat heescht datt se aus dem normale Floss vun der DOM gezunn sinn a kënnen personaliséiert CSS erfuerderen (zB padding-topop der <body>) fir Iwwerlappung mat aneren Elementer ze vermeiden.

Notéiert och datt .sticky-topbenotzt position: sticky, déi net voll an all Browser ënnerstëtzt gëtt .

<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>

Scrollen

Füügt .navbar-nav-scrollun eng .navbar-collapse(oder aner Navbar Ënnerkomponent) fir vertikal Scrollen am toggleablen Inhalt vun enger zesummegeklappt Navbar z'erméiglechen. Par défaut gëtt d'Scrolling op 75vh(oder 75% vun der Viewport Héicht), awer Dir kënnt dat mat inline oder personaliséierte Stiler iwwerschreiden. Bei gréissere Viewports wann d'Navbar erweidert gëtt, erschéngt Inhalt wéi et an enger Standardnavbar ass.

Notéiert w.e.g. datt dëst Verhalen mat engem potenziellen Nodeel kënnt vun overflow-wann Astellung overflow-y: auto(erfuerderlech fir den Inhalt hei ze scrollen), overflow-xass d'Äquivalent vun auto, wat e puer horizontalen Inhalter cropt.

Hei ass e Beispill navbar benotzt .navbar-nav-scrollmat style="max-height: 100px;", mat e puer extra Margin Utilities fir optimal Abstand.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarScroll">
    <ul class="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Link
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Link</a>
      </li>
    </ul>
    <form class="d-flex">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Reaktiounsfäeger Verhalen

Navbars kënne benotzen .navbar-toggler, .navbar-collapse, a .navbar-expand{-sm|-md|-lg|-xl}Klassen fir ze bestëmmen wann hiren Inhalt hannert engem Knäppchen zesummeklappt. A Kombinatioun mat aneren Utilities kënnt Dir ganz einfach wielen wéini Dir speziell Elementer ze weisen oder verstoppt.

Fir Navbars déi ni zesummeklappen, füügt d' .navbar-expandKlass op der Navbar. Fir Navbars déi ëmmer zesummeklappen, füügt keng .navbar-expandKlass un.

Toggler

Navbar Togglers sinn par défaut lénks ausgeriicht, awer sollten se e Geschwësterelement wéi e verfollegen .navbar-brand, si ginn automatesch no riets ausgeriicht. Ëmgekéiert Är Markup wäert d'Placement vum Toggler ëmgedréint ginn. Drënner sinn Beispiller vu verschiddene Toggle Stiler.

Mat kee .navbar-brandgewisen um klengste Breakpunkt:

<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">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>

Mat engem Markennumm lénks gewisen an Toggler op der rietser Säit:

<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">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>

Mat engem Toggler op der lénker Säit a Markennumm op der rietser Säit:

<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">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>

Extern Inhalt

Heiansdo wëllt Dir den Zesummebroch Plugin benotzen fir e Containerelement fir Inhalter auszeléisen deen strukturell ausserhalb vun der .navbar. Well eise Plugin funktionnéiert op der ida data-targetpassend, dat ass einfach gemaach!

<div class="fixed-top">
  <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>

Wann Dir dëst maacht, empfeelen mir zousätzlech JavaScript abegraff fir de Fokus programmatesch op de Container ze réckelen wann et opgemaach gëtt. Soss wäerten d'Tastaturbenotzer an d'Benotzer vun Assistenztechnologien et méiglecherweis schwéier hunn den nei opgedeckten Inhalt ze fannen - besonnesch wann de Container, deen opgemaach gouf, virum Toggler an der Struktur vum Dokument kënnt. Mir recommandéieren och sécherzestellen datt den Toggler den aria-controlsAttribut huet, weist op idden Inhaltsbehälter. An der Theorie erlaabt dëst Hëllefstechnologie Benotzer direkt vum Toggler an de Container ze sprangen deen et kontrolléiert - awer d'Ënnerstëtzung fir dëst ass de Moment zimlech flësseg.