Navigacijska traka

Dokumentacija i primjeri za Bootstrapovo moćno, osjetljivo navigacijsko zaglavlje, navigacijsku traku. Uključuje podršku za brendiranje, navigaciju i više, uključujući podršku za naš dodatak za sažimanje.

Kako radi

Evo što trebate znati prije nego počnete koristiti navigacijsku traku:

Navigacijske trake zahtijevaju omatanje .navbarza .navbar-expand{-sm|-md|-lg|-xl}odgovarajuće sažimanje i klase sheme boja .
Navigacijske trake i njihov sadržaj su fluidni prema zadanim postavkama. Upotrijebite dodatne spremnike kako biste ograničili njihovu vodoravnu širinu.
Upotrijebite naše pomoćne klase razmaka i savijanja za kontrolu razmaka i poravnanja unutar navigacijskih traka.
Navigacijske trake reagiraju prema zadanim postavkama, ali ih možete jednostavno modificirati da biste to promijenili. Responzivno ponašanje ovisi o našem dodatku Collapse JavaScript.
Navigacijske trake su prema zadanim postavkama skrivene prilikom ispisa. Prisilite ih da budu ispisani dodavanjem .d-printu .navbar. Pogledajte klasu korisnosti zaslona .
Osigurajte pristupačnost upotrebom <nav>elementa ili, ako koristite općenitiji element kao što je <div>, dodajte role="navigation"svakoj navigacijskoj traci kako biste je eksplicitno identificirali kao područje orijentira za korisnike pomoćnih tehnologija.

Čitajte dalje za primjer i popis podržanih podkomponenti.

Podržani sadržaj

Navigacijske trake dolaze s ugrađenom podrškom za pregršt podkomponenti. Po potrebi odaberite nešto od sljedećeg:

.navbar-brandza naziv vaše tvrtke, proizvoda ili projekta.
.navbar-navza laganu navigaciju pune visine (uključujući podršku za padajuće izbornike).
.navbar-togglerza korištenje s našim dodatkom za sažimanje i drugim načinima mijenjanja navigacije .
.form-inlineza bilo kakve kontrole i radnje oblika.
.navbar-textza dodavanje okomito centriranih nizova teksta.
.collapse.navbar-collapseza grupiranje i skrivanje sadržaja na navigacijskoj traci prema roditeljskoj prijelomnoj točki.

Evo primjera svih podkomponenti uključenih u responzivnu svjetlosnu navigacijsku traku koja se automatski skuplja na lg(velikoj) prijelomnoj točki.

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

Ovaj primjer koristi klase korisnosti boja ( bg-light) i razmaka ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Marka

Može se .navbar-brandprimijeniti na većinu elemenata, ali sidro najbolje funkcionira jer neki elementi mogu zahtijevati uslužne klase ili prilagođene stilove.

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

Dodavanje slika .navbar-brandvjerojatno će uvijek zahtijevati prilagođene stilove ili pomoćne programe za pravilnu veličinu. Evo nekoliko primjera za demonstraciju.

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

Nav

Veze na navigacijskoj traci nadograđuju se na naše .navmogućnosti s vlastitom klasom modifikatora i zahtijevaju upotrebu klasa preklopnika za ispravan responzivni stil. Navigacija u navigacijskim trakama također će se povećati kako bi zauzela što više vodoravnog prostora kako bi sadržaj vaše navigacijske trake bio sigurno poravnat.

Aktivna stanja—s—za .activeoznačavanje trenutne stranice mogu se primijeniti izravno na .nav-links ili njihov neposredni roditelj .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>

A budući da koristimo klase za naše navigacije, možete u potpunosti izbjeći pristup temeljen na popisima ako želite.

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

Također možete koristiti padajuće izbornike u navigacijskoj traci. Padajući izbornici zahtijevaju omotni element za pozicioniranje, pa svakako koristite zasebne i ugniježđene elemente za .nav-itemi .nav-linkkao što je prikazano u nastavku.

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

Obrasci

Postavite različite kontrole obrazaca i komponente unutar navigacijske trake pomoću .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>

Neposredni podređeni elementi .navbarkoriste fleksibilni raspored i zadano će biti justify-content: between. Po potrebi upotrijebite dodatne flex pomoćne programe za prilagodbu ovog ponašanja.

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

Grupe unosa također rade:

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

Razni gumbi također su podržani kao dio ovih navigacijskih obrazaca. Ovo je također odličan podsjetnik da se pomoćni programi za okomito poravnanje mogu koristiti za poravnavanje elemenata različitih veličina.

<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

Navigacijske trake mogu sadržavati dijelove teksta uz pomoć .navbar-text. Ova klasa podešava okomito poravnanje i vodoravni razmak za nizove teksta.

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

Po potrebi pomiješajte i uskladite s ostalim komponentama i alatima.

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

Sheme boja

Tematizacija navigacijske trake nikada nije bila lakša zahvaljujući kombinaciji klasa i background-coloruslužnih programa za tematiziranje. Odaberite .navbar-lightza korištenje sa svijetlim bojama pozadine ili .navbar-darkza tamne boje pozadine. Zatim prilagodite .bg-*pomoćnim programima.

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

Kontejneri

Iako nije potrebno, možete omotati navigacijsku traku u .containerda biste je centrirali na stranici ili je dodati unutar samo da biste centrirali samo sadržaj fiksne ili statične gornje navigacijske trake .

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

Kada je spremnik unutar vaše navigacijske trake, njegovo vodoravno ispunjavanje uklanja se na prijelomnim točkama nižim od vaše navedene .navbar-expand{-sm|-md|-lg|-xl}klase. Time se osigurava da ne udvostručujemo nepotrebno podmetanje na donjim okvirima za prikaz kada je vaša navigacijska traka sažeta.

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

Plasman

Koristite naše pomoćne programe za postavljanje navigacijskih traka u nestatične položaje. Odaberite fiksno na vrh, fiksirano na dno ili zalijepljeno na vrh (pomiče se sa stranicom dok ne dođe do vrha, a zatim tamo ostaje). Fiksne navigacijske trake koriste position: fixed, što znači da su izvučene iz normalnog toka DOM-a i mogu zahtijevati prilagođeni CSS (npr. padding-topna <body>) kako bi se spriječilo preklapanje s drugim elementima.

Također imajte na umu da .sticky-topkoristi position: sticky, što nije u potpunosti podržano u svakom pregledniku .

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

Responzivna ponašanja

Navigacijske trake mogu koristiti .navbar-toggler, .navbar-collapse, i .navbar-expand{-sm|-md|-lg|-xl}klase za promjenu kada se njihov sadržaj skupi iza gumba. U kombinaciji s drugim uslužnim programima, možete jednostavno odabrati kada želite prikazati ili sakriti određene elemente.

Za navigacijske trake koje se nikada ne skupljaju, dodajte .navbar-expandklasu na navigacijsku traku. Za navigacijske trake koje se uvijek skupljaju, nemojte dodavati nikakvu .navbar-expandklasu.

Prekidač

Prekidači na navigacijskoj traci su prema zadanim postavkama poravnati lijevo, ali ako slijede srodni element kao što je .navbar-brand, automatski će se poravnati krajnje desno. Obrnutim označavanjem promijenit ćete položaj preklopnika. Ispod su primjeri različitih stilova prebacivanja.

Bez .navbar-brandprikaza u najnižoj prijelomnoj točki:

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

S nazivom marke prikazanim s lijeve strane i prekidačem s desne strane:

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

S preklopnikom s lijeve strane i imenom robne marke s desne strane:

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

Vanjski sadržaj

Ponekad želite upotrijebiti dodatak za sažimanje da pokrenete skriveni sadržaj negdje drugdje na stranici. Budući da naš dodatak radi na idi data-targetpodudaranju, to je jednostavno učiniti!

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>