Source

Navbar

Dokumentation og eksempler til Bootstraps kraftfulde, responsive navigationsheader, navbaren. Inkluderer support til branding, navigation og mere, inklusive support til vores sammenbrudsplugin.

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 visningsvæ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 en skelsættende region for brugere af hjælpeteknologier.

Læs videre for et eksempel og en liste over understøttede underkomponenter.

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="#" 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 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 at 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-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" href="#">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-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å bruge dropdowns i din navbar nav. 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="#" 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>

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 børneelementer i .navbarbrug flex layout og vil som standard være justify-content: 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 tilføje en indeni for kun at centrere indholdet af en fast eller statisk topnavigationslinje .

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

Responsiv adfærd

Navbars kan bruge .navbar-toggler, .navbar-collapse, og .navbar-expand{-sm|-md|-lg|-xl}klasser til at ændre, nå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.

Uden .navbar-brandvist i laveste 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" 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 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" 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 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" 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 indhold

Nogle gange vil du bruge sammenbrudsplugin'et til at udløse skjult indhold andre steder på siden. Fordi vores plugin fungerer på idog data-targetmatcher, er det nemt at gø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>