Source

Navbar

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

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 uslužnih programa 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 kako biste to promijenili. Responzivno ponašanje ovisi o našem dodatku Collapse JavaScript.
Trake za navigaciju su skrivene po defaultu prilikom štampanja. Prisilite da se štampaju 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.

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

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 korištenje 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 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="#" 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 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.0/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.0/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 responzivni 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" href="#">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-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 menije u 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="#" id="navbarDropdownMenuLink" 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>

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>

Po potrebi uskladite sadržaj svojih inline obrazaca sa uslužnim programima.

<nav class="navbar navbar-light bg-light justify-content-between">
  <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 dodati jednu unutar samo 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>

Responzivna ponašanja

Navbari mogu koristiti .navbar-toggler, .navbar-collapse, i .navbar-expand{-sm|-md|-lg|-xl}klase za promjenu 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 slijede 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 u najnižoj 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" 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>

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

Eksterni sadržaj

Ponekad želite da koristite dodatak za sažimanje da pokrenete skriveni sadržaj na drugom mjestu na stranici. Budući da naš dodatak radi na idi data-targetpodudaranju, to je lako učiniti!

Skupljeni sadržaj

Može se prebaciti preko brenda navbara.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <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>