in English

Navbar

Dokumentation og eksempler til Bootstraps kraftfulde, responsive navigationsheader, navbaren. Inkluderer understøttelse af branding, navigation, kollaps plugin og mere.

Hvordan det virker

Her er hvad du skal vide, før du går i gang med navbaren:

  • Navbars kræver en indpakning .navbarmed .navbar-expand{-sm|-md|-lg|-xl}for responsiv kollaps og farveskemaklasser .
  • Navbars og deres indhold er flydende som standard. Brug valgfri beholdere til at begrænse deres vandrette bredde.
  • Brug vores spacing- og flex -værktøjsklasser til at kontrollere afstand og justering i navbarer.
  • Navbars er som standard responsive, men du kan nemt ændre dem for at ændre det. Responsiv adfærd afhænger af vores Collapse JavaScript-plugin.
  • Navbars er som standard skjult ved udskrivning. Tving dem til at blive udskrevet ved at tilføje .d-printtil .navbar. Se displayværktøjsklassen .
  • Sikre tilgængelighed ved at bruge et <nav>element, eller, hvis du bruger et mere generisk element som f.eks. en <div>, tilføj en role="navigation"til hver navbar for eksplicit at identificere den som et skelsættende område for brugere af hjælpeteknologier.
Animationseffekten af ​​denne komponent afhænger af prefers-reduced-motionmedieforespørgslen. Se afsnittet om reduceret bevægelse i vores tilgængelighedsdokumentation .

Understøttet indhold

Navbars kommer med indbygget understøttelse af en håndfuld underkomponenter. Vælg mellem følgende efter behov:

  • .navbar-brandfor dit firma-, produkt- eller projektnavn.
  • .navbar-navfor en fuld højde og let navigation (inklusive understøttelse af dropdowns).
  • .navbar-togglertil brug sammen med vores kollaps-plugin og anden navigationsskifteadfærd .
  • .form-inlinefor enhver form for kontrol og handlinger.
  • .navbar-texttil tilføjelse af lodret centrerede tekststrenge.
  • .collapse.navbar-collapsetil at gruppere og skjule navbarens indhold efter et overordnet brudpunkt.

Her er et eksempel på alle de underkomponenter, der er inkluderet i en responsiv lys-tema navbar, der automatisk kollapser ved det lg(store) brudpunkt.

<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 eksempel bruger hjælpeklasser farve ( bg-light) og mellemrum ( my-2, my-lg-0, mr-sm-0, my-sm-0).

Mærke

Den .navbar-brandkan anvendes på de fleste elementer, men et anker fungerer bedst, da nogle elementer muligvis kræver brugsklasser eller brugerdefinerede stilarter.

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

Tilføjelse af billeder til den .navbar-brandvil sandsynligvis altid kræve brugerdefinerede stilarter eller hjælpeprogrammer til korrekt størrelse. Her er nogle eksempler til demonstration.

<!-- 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-navigationslinks bygger på vores .navmuligheder med deres egen modifikationsklasse og kræver brug af skifteklasser for korrekt responsiv styling. Navigation i navbarer vil også vokse til at optage så meget vandret plads som muligt for at holde dit navbar-indhold sikkert justeret.

Aktive tilstande – med .active– for at angive, at den aktuelle side kan anvendes direkte på .nav-links eller deres umiddelbare forældre .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 bruger klasser til vores navs, kan du helt undgå den listebaserede tilgang, 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å bruge dropdowns i din navbar. Rullemenuer kræver et indpakningselement til placering, så sørg for at bruge separate og indlejrede elementer til .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>

Formularer

Placer forskellige formularkontrolelementer og komponenter i en navbar 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 af .navbarbrug flex layout og vil som standard være justify-content: space-between. Brug yderligere flex-værktøjer efter behov for at justere denne adfærd.

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

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

Forskellige knapper understøttes også som en del af disse navbar-formularer. Dette er også en god påmindelse om, at værktøjer til lodret justering kan bruges til at justere elementer i forskellige 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

Navbars kan indeholde bidder af tekst ved hjælp af .navbar-text. Denne klasse justerer lodret justering og vandret afstand for tekststrenge.

<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 værktøjer efter 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>

Farveskemaer

Temalægning af navbaren har aldrig været nemmere takket være kombinationen af ​​temaklasser og background-colorhjælpeprogrammer. Vælg mellem .navbar-lighttil brug med lyse baggrundsfarver eller .navbar-darktil mørke baggrundsfarver. Tilpas derefter med .bg-*hjælpeprogrammer.

<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

Selvom det ikke er påkrævet, kan du pakke en navbar i en .containerfor at centrere den på en side. Eller du kan tilføje en beholder inde i .navbarfor kun at centrere indholdet af en fast eller statisk top navbar .

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

Når containeren er inden for din navbar, fjernes dens vandrette polstring ved pausepunkter, der er lavere end din specificerede .navbar-expand{-sm|-md|-lg|-xl}klasse. Dette sikrer, at vi ikke fordobler polstring unødigt på lavere visningsporte, når din navbar er klappet sammen.

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

Placering

Brug vores positionsværktøjer til at placere navbarer i ikke-statiske positioner. Vælg mellem fast til toppen, fastgjort til bunden eller klæbet til toppen (ruller med siden, indtil den når toppen, og bliver derefter der). Faste navbarer bruger position: fixed, hvilket betyder, at de er trukket fra det normale flow af DOM og kan kræve tilpasset CSS (f.eks. padding-toppå <body>) for at forhindre overlapning med andre elementer.

Bemærk også, at .sticky-topbruger position: sticky, som ikke er fuldt understøttet i alle browsere .

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

Rulning

Føj .navbar-nav-scrolltil en .navbar-collapse(eller anden navbar-underkomponent) for at aktivere lodret rulning inden for det omskiftelige indhold af en sammenklappet navbar. Som standard starter rulning ved 75vh(eller 75 % af visningsportens højde), men du kan tilsidesætte det med inline eller brugerdefinerede stilarter. Ved større viewports, når navbaren er udvidet, vil indholdet blive vist, som det gør i en standard navbar.

Bemærk venligst, at denne adfærd har en potentiel ulempe : overflow-når indstilling overflow-y: auto(kræves for at rulle indholdet her), overflow-xsvarer til auto, hvilket vil beskære noget vandret indhold.

Her er et eksempel på en navbar, der bruger .navbar-nav-scrollmed style="max-height: 100px;", med nogle ekstra margenværktøjer for optimal afstand.

<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 adfærd

Navbars kan bruge .navbar-toggler, .navbar-collapse, og .navbar-expand{-sm|-md|-lg|-xl}klasser til at bestemme, hvornår deres indhold kollapser bag en knap. I kombination med andre hjælpeprogrammer kan du nemt vælge, hvornår du vil vise eller skjule bestemte elementer.

For navbarer, der aldrig kollapser, skal du tilføje .navbar-expandklassen på navbaren. For navbarer, der altid skjuler, skal du ikke tilføje nogen .navbar-expandklasse.

Toggler

Navbar skifter er venstrejusteret som standard, men skulle de følge et søskendeelement som en .navbar-brand, vil de automatisk blive justeret til højre. Hvis du vender om din markering, vil du ændre placeringen af ​​skifteren. Nedenfor er eksempler på forskellige skifte-stile.

Med ingen .navbar-brandvist ved det mindste brudpunkt:

<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 mærkenavn vist til venstre og skifte til højre:

<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 skifter til venstre og mærkenavn til højre:

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

Nogle gange vil du bruge sammenbrudspluginnet til at udløse et containerelement for indhold, der strukturelt sidder uden for .navbar. Fordi vores plugin fungerer på idog data-targetmatcher, er det nemt at gø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 gør dette, anbefaler vi at inkludere yderligere JavaScript for at flytte fokus programmatisk til containeren, når den åbnes. Ellers vil tastaturbrugere og brugere af hjælpeteknologier sandsynligvis have svært ved at finde det nyligt afslørede indhold - især hvis containeren, der blev åbnet, kommer før skifteren i dokumentets struktur. Vi anbefaler også at sikre, at skifteren har aria-controlsattributten, der peger på idindholdsbeholderen. I teorien giver dette hjælpeteknologibrugere mulighed for at hoppe direkte fra skifteren til den beholder, den styrer - men understøttelsen af ​​dette er i øjeblikket ret usammenhængende.