Preskoči na glavno vsebino Preskoči na navigacijo po dokumentih
in English

Navbar

Dokumentacija in primeri za Bootstrapovo zmogljivo, odzivno navigacijsko glavo, navbar. Vključuje podporo za blagovno znamko, navigacijo in drugo, vključno s podporo za naš vtičnik za strnitev.

Na tej strani

Kako deluje

Preden začnete uporabljati navbar, morate vedeti naslednje:

  • Vrstice za krmarjenje zahtevajo ovoj .navbarza .navbar-expand{-sm|-md|-lg|-xl|-xxl}odzivno strnjenje in razrede barvne sheme .
  • Vrstice za krmarjenje in njihova vsebina so privzeto tekoče. Spremenite posodo , da na različne načine omejite vodoravno širino.
  • Uporabite naše pomožne razrede za razmik in upogibanje za nadzor razmika in poravnave v vrsticah za krmarjenje.
  • Vrstice za krmarjenje so privzeto odzivne, vendar jih lahko preprosto spremenite, da to spremenite. Odzivnost je odvisna od našega vtičnika Collapse JavaScript.
  • Zagotovite dostopnost z uporabo <nav>elementa ali, če uporabljate bolj splošen element, kot je <div>, dodajte role="navigation"v vsako vrstico za krmarjenje, da jo izrecno identificirate kot območje mejnika za uporabnike podpornih tehnologij.
  • Označite trenutni element z uporabo aria-current="page"za trenutno stran ali aria-current="true"za trenutni element v nizu.
Učinek animacije te komponente je odvisen od prefers-reduced-motionmedijske poizvedbe. Oglejte si razdelek o zmanjšanem gibanju v naši dokumentaciji o dostopnosti .

Podprta vsebina

Navbars ima vgrajeno podporo za peščico podkomponent. Po potrebi izberite med naslednjim:

  • .navbar-brandza ime vašega podjetja, izdelka ali projekta.
  • .navbar-navza enostavno navigacijo v polni višini (vključno s podporo za spustne menije).
  • .navbar-togglerza uporabo z našim vtičnikom za strnitev in drugimi načini preklopa navigacije .
  • Pripomočki za upogibanje in razmik za kakršne koli kontrole in dejanja obrazcev.
  • .navbar-textza dodajanje navpično centriranih nizov besedila.
  • .collapse.navbar-collapseza združevanje in skrivanje vsebin navbara z nadrejeno prelomno točko.
  • Dodajte možnost .navbar-scrollza nastavitev max-heightin pomikanje po razširjeni vsebini navbara .

Tukaj je primer vseh podkomponent, vključenih v odzivno svetlobno navigacijsko vrstico, ki se samodejno zruši na lg(veliki) prelomni točki.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Ta primer uporablja razrede pripomočkov za ozadje ( bg-light) in razmike ( my-2, my-lg-0, me-sm-0, ).my-sm-0

Znamka

Lahko se .navbar-branduporabi za večino elementov, vendar sidro deluje najbolje, saj lahko nekateri elementi zahtevajo uporabne razrede ali sloge po meri.

Besedilo

Dodajte svoje besedilo znotraj elementa z .navbar-brandrazredom.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

Slika

Besedilo znotraj lahko zamenjate .navbar-brandz <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    </a>
  </div>
</nav>

Slika in besedilo

Uporabite lahko tudi nekaj dodatnih pripomočkov za istočasno dodajanje slike in besedila. Upoštevajte dodatek .d-inline-blockin .align-text-topna <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Navigacijske povezave Navbar gradijo na naših .navmožnostih z lastnim modifikatorskim razredom in zahtevajo uporabo preklopnih razredov za pravilno odzivno oblikovanje. Navigacija v vrsticah za krmarjenje se bo prav tako povečala, da bo zavzela čim več vodoravnega prostora, da bo vsebina vrstice za krmarjenje varno poravnana.

Dodajte .activerazred, .nav-linkda označite trenutno stran.

Upoštevajte, da morate aria-currentatribut dodati tudi na active .nav-link.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Home</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="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

In ker za naše krmarjenje uporabljamo razrede, se lahko pristopu, ki temelji na seznamu, popolnoma izognete, če želite.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </div>
</nav>

Uporabite lahko tudi spustne menije v vrstici za krmarjenje. Spustni meniji zahtevajo ovojni element za pozicioniranje, zato uporabite ločene in ugnezdene elemente za .nav-itemin .nav-link, kot je prikazano spodaj.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Obrazci

V vrstico za krmarjenje postavite različne kontrolnike obrazca in komponente:

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Neposredni podrejeni elementi .navbaruporabljajo postavitev flex in bodo privzeto nastavljeni na justify-content: space-between. Po potrebi uporabite dodatne pripomočke flex , da prilagodite to vedenje.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Delujejo tudi vnosne skupine. Če je vaša vrstica za krmarjenje celoten obrazec ali večinoma obrazec, lahko uporabite <form>element kot vsebnik in shranite nekaj HTML-ja.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Različni gumbi so podprti tudi kot del teh obrazcev navbara. To je tudi odličen opomnik, da lahko pripomočke za navpično poravnavo uporabite za poravnavo elementov različnih velikosti.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Besedilo

Navbars lahko vsebuje koščke besedila s pomočjo .navbar-text. Ta razred prilagodi navpično poravnavo in vodoravni razmik za nize besedila.

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

Po potrebi mešajte in kombinirajte z drugimi komponentami in pripomočki.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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>
  </div>
</nav>

Barvne sheme

Tematiziranje navbarske vrstice še nikoli ni bilo lažje zahvaljujoč kombinaciji razredov in background-colorpripomočkov za temiranje. Izberite .navbar-lightza uporabo s svetlimi barvami ozadja ali .navbar-darkza temne barve ozadja. Nato prilagodite s .bg-*pripomočki.

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

Zabojniki

Čeprav to ni obvezno, lahko vrstico za krmarjenje zavijete v a, .containerda jo postavite na sredino strani – vendar upoštevajte, da je še vedno potreben notranji vsebnik. Lahko pa dodate vsebnik v .navbarsamo središče vsebine fiksne ali statične zgornje vrstice za krmarjenje .

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

Uporabite katerega koli od odzivnih vsebnikov, da spremenite, kako široka je predstavljena vsebina v vrstici za krmarjenje.

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

Umestitev

Uporabite naše pripomočke za določanje položaja , da postavite vrstice za krmarjenje v nestatične položaje. Izbirate lahko med pritrjenim na vrhu, pritrjenim na dnu ali prilepljenim na vrh (pomika se s stranjo, dokler ne doseže vrha, nato tam ostane). Fiksne vrstice za krmarjenje uporabljajo position: fixed, kar pomeni, da so potegnjene iz običajnega toka DOM in lahko zahtevajo CSS po meri (npr. padding-topna <body>), da preprečijo prekrivanje z drugimi elementi.

Upoštevajte tudi, da .sticky-topuporablja position: sticky, ki ni v celoti podprt v vseh brskalnikih .

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

Drsenje

Dodajte .navbar-nav-scroll( .navbar-navali drugi podkomponenti vrstice za krmarjenje), da omogočite navpično drsenje znotraj preklopne vsebine strnjene vrstice za krmarjenje. Privzeto se drsenje začne na 75vh(ali 75 % višine vidnega polja), vendar lahko to preglasite z lokalno lastnostjo po meri CSS --bs-navbar-heightali slogi po meri. Pri večjih pogledih, ko je vrstica za krmarjenje razširjena, bo vsebina prikazana kot v privzeti vrstici za krmarjenje.

Upoštevajte, da ima to vedenje potencialno pomanjkljivost overflow—ko je nastavitev overflow-y: auto(zahtevana za pomikanje po vsebini tukaj), overflow-xje enakovredna auto, kar bo obrezalo nekaj vodoravne vsebine.

Tukaj je primer vrstice za krmarjenje, ki uporablja .navbar-nav-scrollz style="--bs-scroll-height: 100px;", z nekaj dodatnimi pripomočki za rob za optimalen razmik.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <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" href="#" tabindex="-1" aria-disabled="true">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Odzivno vedenje

Vrstice za krmarjenje lahko uporabljajo razrede .navbar-toggler, .navbar-collapse, in .navbar-expand{-sm|-md|-lg|-xl|-xxl}za določanje, kdaj se njihova vsebina skrči za gumbom. V kombinaciji z drugimi pripomočki lahko preprosto izberete, kdaj želite prikazati ali skriti posamezne elemente.

Za vrstice za krmarjenje, ki se nikoli ne strnejo, dodajte .navbar-expandrazred v vrstico za krmarjenje. Za vrstice za krmarjenje, ki se vedno strnejo, ne dodajte nobenega .navbar-expandrazreda.

Preklopnik

Preklopniki Navbar so privzeto poravnani levo, a če sledijo sorodnemu elementu, kot je .navbar-brand, bodo samodejno poravnani skrajno desno. Če razveljavite svojo oznako, boste obrnili postavitev preklopnika. Spodaj so primeri različnih stilov preklopa.

Brez .navbar-brandprikaza na najmanjši prelomni točki:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Z imenom blagovne znamke, prikazanim na levi, in preklopnikom na desni:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

S preklopnikom na levi in ​​imenom blagovne znamke na desni:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Zunanja vsebina

Včasih želite uporabiti vtičnik za strnitev, da sprožite element vsebnika za vsebino, ki je strukturno zunaj .navbar. Ker naš vtičnik deluje na idin se data-bs-targetujema, je to preprosto!

<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">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

Ko to storite, priporočamo, da vključite dodaten JavaScript, da programsko premaknete fokus na vsebnik, ko se odpre. V nasprotnem primeru bodo uporabniki tipkovnice in uporabniki podpornih tehnologij verjetno težko našli novo razkrito vsebino – še posebej, če je vsebnik, ki je bil odprt, pred preklopnikom v strukturi dokumenta. Priporočamo tudi, da se prepričate, da ima preklopnik aria-controlsatribut, ki kaže na idvsebnika vsebine. Teoretično to omogoča uporabnikom podporne tehnologije, da skočijo neposredno s preklopnika na vsebnik, ki ga nadzoruje, vendar je podpora za to trenutno precej neenakomerna.

Sass

Spremenljivke

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);

$navbar-light-brand-color:                $navbar-light-active-color;
$navbar-light-brand-hover-color:          $navbar-light-active-color;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

Zanka

Razredi za razširitev/strnitev odzivne vrstice za krmarjenje (npr. .navbar-expand-lg) so združeni z $breakpointszemljevidom in ustvarjeni prek zanke v scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: $navbar-nav-link-padding-x;
            padding-left: $navbar-nav-link-padding-x;
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }
      }
    }
  }
}