in English

Navigacijska traka

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

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.

Učinak animacije ove komponente ovisi o prefers-reduced-motionmedijskom upitu. Pogledajte odjeljak smanjenog kretanja u našoj dokumentaciji o pristupačnosti .

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

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, budući da 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.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>

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

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

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 flex layout i bit će postavljeni na justify-content: space-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, navigacijsku traku možete omotati u .containerda biste je centrirali na stranici. Ili možete dodati spremnik unutar .navbarsamo središta sadržaja 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>

Pomicanje

Dodajte .navbar-nav-scroll( .navbar-collapseili drugoj podkomponenti navigacijske trake) kako biste omogućili okomito pomicanje unutar sadržaja koji se može mijenjati na sažetoj navigacijskoj traci. Prema zadanim postavkama, pomicanje počinje na 75vh(ili 75% visine okvira za prikaz), ali to možete nadjačati ugrađenim ili prilagođenim stilovima. Na većim okvirima za prikaz kada je navigacijska traka proširena, sadržaj će se pojaviti kao na zadanoj navigacijskoj traci.

Imajte na umu da ovo ponašanje dolazi s mogućim nedostatkom overflow—kada je postavka overflow-y: auto(potrebna za pomicanje sadržaja ovdje), overflow-xekvivalentna auto, što će obrezati neki vodoravni sadržaj.

Evo primjera navigacijske trake koja koristi .navbar-nav-scrolls style="max-height: 100px;", s nekim dodatnim pomoćnim programima za margine za optimalni razmak.

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

Responzivna ponašanja

Navigacijske trake mogu koristiti .navbar-toggler, .navbar-collapse, i .navbar-expand{-sm|-md|-lg|-xl}klase za određivanje kada se njihov sadržaj sažima 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 na najmanjoj 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">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">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">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 element spremnika za sadržaj koji se strukturno nalazi izvan .navbar. Budući da naš dodatak radi na idi data-targetpodudaranju, to je jednostavno učiniti!

Sažeti sadržaj

Prebacivanje preko robne marke navigacijske trake.

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

Kada to učinite, preporučujemo uključivanje dodatnog JavaScripta za programsko premještanje fokusa na spremnik kada se otvori. Inače će korisnici tipkovnice i korisnici pomoćnih tehnologija vjerojatno imati poteškoća u pronalaženju novootkrivenog sadržaja - osobito ako spremnik koji je otvoren dolazi prije preklopnika u strukturi dokumenta. Također preporučujemo da provjerite ima li preklopnik aria-controlsatribut koji pokazuje na idspremnik sadržaja. U teoriji, ovo omogućuje korisnicima pomoćne tehnologije da skoče izravno s preklopnika na spremnik kojim upravlja – ali podrška za to trenutno je prilično neujednačena.