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.

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="#">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.1/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.1/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" href="#">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="#">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: 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="#">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="#">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="#">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!

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