Source

Navbar

Dokumentasjon og eksempler for Bootstraps kraftige, responsive navigasjonshode, navbaren. Inkluderer støtte for merkevarebygging, navigasjon og mer, inkludert støtte for vår kollaps-plugin.

Hvordan det fungerer

Her er det du trenger å vite før du begynner med navigasjonslinjen:

Navbars krever innpakning .navbarfor .navbar-expand{-sm|-md|-lg|-xl}responsiv kollaps og fargeskjemaklasser .
Navbarer og deres innhold er flytende som standard. Bruk valgfrie beholdere for å begrense deres horisontale bredde.
Bruk våre avstands- og flex -verktøyklasser for å kontrollere avstand og justering i navbarer.
Navbarer er responsive som standard, men du kan enkelt endre dem for å endre det. Responsiv oppførsel avhenger av vår Collapse JavaScript-plugin.
Navbarer er skjult som standard ved utskrift. Tving dem til å bli skrevet ut ved å legge .d-printtil i .navbar. Se skjermverktøyklassen .
Sørg for tilgjengelighet ved å bruke et <nav>element, eller, hvis du bruker et mer generisk element, for eksempel en <div>, legg til en role="navigation"til hver navigasjonslinje for å eksplisitt identifisere den som en landemerkeregion for brukere av hjelpeteknologier.

Animasjonseffekten til denne komponenten er avhengig av prefers-reduced-motionmediesøket. Se delen for redusert bevegelse i tilgjengelighetsdokumentasjonen vår .

Les videre for et eksempel og liste over støttede underkomponenter.

Støttet innhold

Navbars kommer med innebygd støtte for en håndfull underkomponenter. Velg mellom følgende etter behov:

.navbar-brandfor firma-, produkt- eller prosjektnavnet ditt.
.navbar-navfor en full høyde og lett navigering (inkludert støtte for rullegardinmenyene).
.navbar-togglerfor bruk med vår kollaps-plugin og annen navigasjonsbytteatferd .
.form-inlinefor alle former for kontroller og handlinger.
.navbar-textfor å legge til vertikalt sentrerte tekststrenger.
.collapse.navbar-collapsefor å gruppere og skjule navigasjonslinjeinnhold etter et overordnet bruddpunkt.

Her er et eksempel på alle underkomponentene som er inkludert i en responsiv lys-tema navbar som automatisk kollapser ved lg(det store) bruddpunktet.

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

Dette eksemplet bruker verktøyklassene farge ( bg-light) og mellomrom ( my-2, my-lg-0, mr-sm-0, my-sm-0).

Merke

Den .navbar-brandkan brukes på de fleste elementer, men et anker fungerer best ettersom noen elementer kan kreve bruksklasser eller egendefinerte stiler.

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

Å legge til bilder til .navbar-brandvil sannsynligvis alltid kreve tilpassede stiler eller verktøy for riktig størrelse. Her er noen eksempler for å demonstrere.

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

Nav

Navbar-navigasjonslenker bygger på .navalternativene våre med sin egen modifikasjonsklasse og krever bruk av veksleklasser for riktig responsiv styling. Navigering i navbarer vil også vokse til å oppta så mye horisontal plass som mulig for å holde navigasjonslinjens innhold sikkert justert.

Aktive tilstander – med .active– for å indikere at gjeldende side kan brukes direkte på .nav-links eller deres nærmeste overordnede .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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Og fordi vi bruker klasser for våre nav, kan du unngå den listebaserte tilnærmingen helt hvis du vil.

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

Du kan også bruke rullegardinmenyene i navbaren. Rullegardinmenyer krever et innpakningselement for posisjonering, så pass på å bruke separate og nestede elementer for .nav-itemog .nav-linksom vist nedenfor.

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

Skjemaer

Plasser ulike skjemakontroller og komponenter i en navigasjonslinje med .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>

Umiddelbare underordnede elementer i .navbarbruk flex layout og vil som standard være justify-content: space-between. Bruk ekstra flex-verktøy etter behov for å justere denne virkemåten.

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

Inndatagrupper fungerer også:

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

Ulike knapper støttes også som en del av disse navbar-skjemaene. Dette er også en flott påminnelse om at vertikaljusteringsverktøy kan brukes til å justere elementer i forskjellige størrelser.

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

Tekst

Navbarer kan inneholde tekstbiter ved hjelp av .navbar-text. Denne klassen justerer vertikal justering og horisontal avstand for tekststrenger.

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

Bland og match med andre komponenter og verktøy etter behov.

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

Fargevalg

Temasetting av navbaren har aldri vært enklere takket være kombinasjonen av temaklasser og background-colorverktøy. Velg mellom .navbar-lightfor bruk med lyse bakgrunnsfarger, eller .navbar-darkfor mørke bakgrunnsfarger. Tilpass deretter med .bg-*verktøy.

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

Containere

Selv om det ikke er nødvendig, kan du pakke inn en navigasjonslinje i en .containerfor å sentrere den på en side eller legge til en i for kun å sentrere innholdet i en fast eller statisk toppnavigasjonslinje .

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

Når beholderen er innenfor navigasjonslinjen, fjernes dens horisontale polstring ved bruddpunkter lavere enn den angitte .navbar-expand{-sm|-md|-lg|-xl}klassen. Dette sikrer at vi ikke dobler opp på utfylling unødvendig på lavere visningsporter når navigasjonslinjen er kollapset.

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

Plassering

Bruk posisjonsverktøyene våre til å plassere navbarer i ikke-statiske posisjoner. Velg mellom fast til toppen, fast til bunnen eller festet til toppen (ruller med siden til den når toppen, og blir der). Faste navbarer bruker position: fixed, noe som betyr at de er trukket fra den normale flyten av DOM og kan kreve tilpasset CSS (f.eks. padding-toppå <body>) for å forhindre overlapping med andre elementer.

Vær også oppmerksom på at .sticky-topbruker position: sticky, som ikke støttes fullt ut i alle nettlesere .

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

Responsiv oppførsel

Navbarer kan bruke .navbar-toggler, .navbar-collapse, og .navbar-expand{-sm|-md|-lg|-xl}klasser for å endre når innholdet deres kollapser bak en knapp. I kombinasjon med andre verktøy kan du enkelt velge når du vil vise eller skjule bestemte elementer.

For navbarer som aldri kollapser, legg til .navbar-expandklassen på navbaren. For navbarer som alltid skjuler seg, ikke legg til noen .navbar-expandklasse.

Toggler

Navbar-vekslere er venstrejustert som standard, men skulle de følge et søskenelement som en .navbar-brand, vil de automatisk bli justert helt til høyre. Reversering av markeringen vil reversere plasseringen av veksleren. Nedenfor er eksempler på forskjellige vekslingsstiler.

Med ingen .navbar-brandvist i laveste bruddpunkt:

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

Med et merkenavn vist til venstre og veksler til høyre:

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

Med en veksler til venstre og merkenavn til høyre:

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

Eksternt innhold

Noen ganger vil du bruke kollaps-pluginen for å utløse skjult innhold andre steder på siden. Fordi plugin-en vår fungerer på idog data-targetmatching, er det enkelt å gjøre!

Collapsed content

Toggleable via the navbar brand.

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