in English

Navbar

Dokumentacija i primjeri za Bootstrap moćno, prilagodljivo navigacijsko zaglavlje, navigacijsku traku. Uključuje podršku za brendiranje, navigaciju, dodatak za kolaps i još mnogo toga.

Kako radi

Evo šta trebate znati prije nego što počnete s navigacijskom trakom:

Navbarovi zahtijevaju premotavanje .navbarsa .navbar-expand{-sm|-md|-lg|-xl}za brzo sažimanje i klase sheme boja .
Trake za navigaciju i njihov sadržaj su prema zadanim postavkama tečni. Koristite opcionalne kontejnere da ograničite njihovu horizontalnu širinu.
Koristite naše klase za razmak i fleksibilnost za kontrolu razmaka i poravnanja unutar navigacijskih traka.
Trake za navigaciju su prema zadanim postavkama prilagodljive, ali ih možete lako modificirati da biste to promijenili. Responzivno ponašanje ovisi o našem dodatku Collapse JavaScript.
Trake za navigaciju su skrivene prema zadanim postavkama prilikom štampanja. Natjerajte ih da budu ispisani dodavanjem .d-printu .navbar. Pogledajte klasu uslužnih programa za prikaz .
Osigurajte pristupačnost korištenjem <nav>elementa ili, ako koristite generičniji element kao što je <div>, dodajte a role="navigation"na svaku navigacijsku traku kako biste je eksplicitno identificirali kao orijentirnu regiju za korisnike pomoćnih tehnologija.

Efekt animacije ove komponente ovisi o prefers-reduced-motionmedijskom upitu. Pogledajte odjeljak o smanjenom pokretu u našoj dokumentaciji o pristupačnosti .

Podržani sadržaj

Navbari dolaze sa ugrađenom podrškom za nekoliko podkomponenti. Po potrebi odaberite od sljedećeg:

.navbar-brandza naziv vaše kompanije, proizvoda ili projekta.
.navbar-navza navigaciju pune visine i laganu navigaciju (uključujući podršku za padajuće menije).
.navbar-togglerza upotrebu s našim dodatkom za kolaps i drugim načinima preklapanja navigacije .
.form-inlineza bilo koju formu kontrole i radnje.
.navbar-textza dodavanje vertikalno centriranih nizova teksta.
.collapse.navbar-collapseza grupisanje i skrivanje sadržaja navigacijske trake prema roditeljskoj tački prekida.

Evo primjera svih podkomponenti uključenih u brzu navigacijsku traku sa svjetlosnom tematikom koja se automatski ruši na lg(velikoj) tački prekida.

<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 boje ( bg-light) i razmak ( my-2, my-lg-0, mr-sm-0, my-sm-0) uslužne klase.

Brand

Može .navbar-brandse primijeniti 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-brandće vjerovatno uvijek zahtijevati prilagođene stilove ili usluž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

Navigacijske veze Navbar-a nadovezuju se na naše .navopcije sa svojom vlastitom klasom modifikatora i zahtijevaju korištenje preklopnih klasa za pravilan odzivni stil. Navigacija u navigacijskim trakama će također rasti kako bi zauzela što je moguće više horizontalnog prostora kako bi sadržaj vaše navigacijske trake bio sigurno poravnat.

Aktivna stanja—sa—za .activeoznačavanje trenutne stranice mogu se primijeniti direktno na .nav-links ili njihov neposredni roditelj .nav-items.

<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 pošto koristimo klase za naše navigacije, možete u potpunosti izbjeći pristup baziran na listi 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 menije na navigacijskoj traci. Padajući meniji zahtijevaju element omota za pozicioniranje, stoga obavezno koristite zasebne i ugniježđene elemente za .nav-itemi .nav-linkkao što je prikazano ispod.

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

Forms

Postavite različite kontrole obrasca 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 raspored i podrazumevano će biti justify-content: space-between. Koristite dodatne fleksibilne uslužne programe po potrebi da prilagodite ovo ponašanje.

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

Rade i grupe unosa:

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

Različiti tasteri su takođe podržani kao deo ovih obrazaca za navigaciju. Ovo je također odličan podsjetnik da se alati za vertikalno 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

Navbari mogu sadržavati dijelove teksta uz pomoć .navbar-text. Ova klasa prilagođava vertikalno poravnanje i horizontalni razmak za nizove teksta.

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

Pomiješajte i uskladite s drugim komponentama i uslužnim programima po potrebi.

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

Šeme boja

Tematiziranje navigacijske trake nikada nije bilo lakše zahvaljujući kombinaciji tematskih klasa i background-coloruslužnih programa. Odaberite .navbar-lightza korištenje sa svijetlim bojama pozadine ili .navbar-darkza tamne boje pozadine. Zatim prilagodite .bg-*usluž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 to nije potrebno, možete umotati navigacijsku traku u a .containerda biste je centrirali na stranici. Ili možete dodati kontejner unutar .navbarsamo da centrirate 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 kontejner unutar vaše navigacijske trake, njegov horizontalni padding se uklanja na tačkama prekida nižim od vaše specificirane .navbar-expand{-sm|-md|-lg|-xl}klase. Ovo osigurava da ne udvostručujemo nepotrebno popunjavanje na nižim okvirima za prikaz kada je vaša navigacijska traka skupljena.

<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 uslužne programe za postavljanje navigacijskih traka na nestatične pozicije. Odaberite između fiksnog na vrhu, fiksiranog na dnu ili zalijepljenog na vrhu (pomiče se sa stranicom dok ne dođe do vrha, a zatim ostaje tamo). 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 sa drugim elementima.

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

<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-scrollu .navbar-collapse(ili drugu podkomponentu navigacijske trake) da omogućite vertikalno pomicanje unutar promjenjivog sadržaja skupljene navigacijske trake. Prema zadanim postavkama, pomicanje počinje na 75vh(ili 75% visine prozora za prikaz), ali to možete poništiti umetnutim ili prilagođenim stilovima. U većim okvirima za prikaz kada se navigacijska traka proširi, sadržaj će se pojaviti kao u zadanoj navigacijskoj traci.

Imajte na umu da ovo ponašanje dolazi s potencijalnim nedostatkom — overflowkada je postavljanje overflow-y: auto(potrebno za pomicanje sadržaja ovdje) overflow-xekvivalentno auto, što će izrezati neki horizontalni sadržaj.

Evo primjera navigacijske trake koja koristi .navbar-nav-scrollsa style="max-height: 100px;", s nekim dodatnim uslužnim programima za margine za optimalan 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

Navbari mogu koristiti .navbar-toggler, .navbar-collapse, i .navbar-expand{-sm|-md|-lg|-xl}klase da odrede kada se njihov sadržaj skupi iza dugmeta. U kombinaciji s drugim uslužnim programima, lako možete 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 nijednu .navbar-expandklasu.

Toggler

Prekidači navigacijske trake su prema zadanim postavkama poravnati lijevo, ali ako prate srodni element kao što je .navbar-brand, automatski će biti poravnati krajnje desno. Obrnutim označavanjem će se obrnuti položaj prekidača. Ispod su primjeri različitih stilova prebacivanja.

Bez .navbar-brandprikazanog na najmanjoj tački prekida:

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

Sa imenom brenda prikazanim na lijevoj strani i prekidačem na desnoj strani:

<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 prekidačem na lijevoj strani i imenom marke na desnoj strani:

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

Eksterni sadržaj

Ponekad želite da koristite dodatak za kolaps da pokrenete element kontejnera za sadržaj koji se strukturno nalazi izvan .navbar. Budući da naš dodatak radi na idi data-targetpodudaranju, to je lako učiniti!

Skupljeni sadržaj

Prebacivanje putem brenda 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 da uključite dodatni JavaScript kako biste programski premjestili fokus na spremnik kada se otvori. U suprotnom, korisnici tastature i korisnici pomoćnih tehnologija će vjerovatno imati poteškoća u pronalaženju novootkrivenog sadržaja – posebno ako se otvoreni kontejner nalazi ispred prekidača u strukturi dokumenta. Također preporučujemo da provjerite da li prekidač ima aria-controlsatribut koji pokazuje na idkontejner sadržaja. U teoriji, ovo omogućava korisnicima pomoćne tehnologije da skoče direktno sa prekidača na kontejner koji kontroliše – ali podrška za to je trenutno prilično neujednačena.