in English

Navbar

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

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 .

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

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, siden noen elementer kan kreve bruksklasser eller tilpassede 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.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-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">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-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>

Du kan også bruke rullegardinmenyene i navigasjonslinjen. 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="#" 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>

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 av .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 for .containerå sentrere den på en side. Eller du kan legge til en beholder inni .navbarfor 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>

Rulling

Legg .navbar-nav-scrolltil en .navbar-collapse(eller annen underkomponent for navigasjonslinjen) for å aktivere vertikal rulling innenfor det vekslebare innholdet i en sammenslått navigasjonslinje. Som standard starter rulling ved 75vh(eller 75 % av visningsportens høyde), men du kan overstyre det med innebygde eller egendefinerte stiler. Ved større visningsporter når navigasjonslinjen utvides, vil innhold vises som det gjør i en standard navigasjonslinje.

Vær oppmerksom på at denne oppførselen har en potensiell ulempe av overflow—når innstilling overflow-y: auto(kreves for å rulle innholdet her), overflow-xtilsvarer auto, som vil beskjære noe horisontalt innhold.

Her er et eksempel på en navbar som bruker .navbar-nav-scrollmed style="max-height: 100px;", med noen ekstra marginverktøy for optimal avstand.

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

Responsiv oppførsel

Navbarer kan bruke .navbar-toggler, .navbar-collapse, og .navbar-expand{-sm|-md|-lg|-xl}klasser for å bestemme 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 ved det minste bruddpunktet:

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

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">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">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 et beholderelement for innhold som strukturelt sitter utenfor .navbar. Fordi plugin-en vår fungerer på idog data-targetmatching, er det enkelt å gjøre!

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

Når du gjør dette, anbefaler vi å inkludere ekstra JavaScript for å flytte fokuset programmatisk til beholderen når den åpnes. Ellers vil tastaturbrukere og brukere av hjelpeteknologier sannsynligvis ha vanskelig for å finne det nylig avslørte innholdet - spesielt hvis beholderen som ble åpnet kommer før veksleren i dokumentets struktur. Vi anbefaler også å sørge for at veksleren har aria-controlsattributtet som peker idpå innholdsbeholderen. I teorien lar dette hjelpemiddelbrukere hoppe direkte fra veksleren til beholderen den kontrollerer – men støtten for dette er for tiden ganske ujevn.