Mine põhisisu juurde Jätke dokumentide navigeerimise juurde
Check
in English

Navibar

Bootstrapi võimsa ja tundliku navigeerimispäise, navigeerimisriba dokumentatsioon ja näited. Sisaldab brändingu, navigeerimise ja muu tuge, sealhulgas meie ahendamise pistikprogrammi tuge.

Sellel lehel

Kuidas see töötab

Enne navigeerimisriba kasutamist peate teadma järgmist.

  • Naviribad vajavad tundliku kokkuvarisemise ja värviskeemi klasside .navbarjaoks mähkimist..navbar-expand{-sm|-md|-lg|-xl|-xxl}
  • Navbarid ja nende sisu on vaikimisi sujuvad. Muutke konteinerit , et piirata nende horisontaalset laiust erineval viisil.
  • Kasutage meie vahekauguse ja paindlikkuse klasse, et juhtida navigeerimisribade vahekaugust ja joondust.
  • Navigeerimisribad reageerivad vaikimisi, kuid saate neid hõlpsalt muuta, et seda muuta. Reageerimiskäitumine sõltub meie Collapse JavaScripti pistikprogrammist.
  • Tagage juurdepääsetavus, kasutades <nav>elementi või kui kasutate üldisemat elementi (nt ) <div>, lisage role="navigation"igale navigeerimisribale, et see oleks abitehnoloogiate kasutajate jaoks maamärk.
  • Märkige praegune üksus, kasutades aria-current="page"praeguse lehe või aria-current="true"komplekti praeguse üksuse jaoks nuppu.
  • Uus versioonis 5.2.0: navigeerimisribasid saab teemastada CSS-i muutujatega, mis on hõlmatud .navbarpõhiklassiga. .navbar-lighton aegunud ja .navbar-darksee on ümber kirjutatud, et alistada CSS-i muutujad, selle asemel et lisada täiendavaid stiile.
Selle komponendi animatsiooniefekt sõltub prefers-reduced-motionmeediumipäringust. Vaadake meie juurdepääsetavuse dokumentatsiooni vähendatud liikumise jaotist .

Toetatud sisu

Naviribadel on sisseehitatud tugi käputäie alamkomponentide jaoks. Valige vastavalt vajadusele järgmiste valikute hulgast.

  • .navbar-brandteie ettevõtte, toote või projekti nime jaoks.
  • .navbar-navtäiskõrguse ja kerge navigatsiooni jaoks (sh rippmenüüde tugi).
  • .navbar-togglerkasutamiseks koos meie ahendamise pistikprogrammi ja muude navigeerimise ümberlülitustoimingutega .
  • Paind- ja vaheutiliidid mis tahes vormi juhtelementide ja toimingute jaoks.
  • .navbar-textvertikaalselt tsentreeritud tekstistringide lisamiseks.
  • .collapse.navbar-collapsenavigeerimisriba sisu grupeerimiseks ja peitmiseks vanema murdepunkti järgi.
  • Lisage valikuline laiendatud navigeerimisriba sisu.navbar-scroll määramiseks max-heightja kerimiseks .

Siin on näide kõigist alamkomponentidest, mis sisalduvad tundlikule valgusteemalisele navigeerimisribale, mis lg(suurel) katkestuspunktil automaatselt kokku vajub.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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>

See näide kasutab tausta ( bg-light) ja vahe ( me-auto, mb-2, mb-lg-0, me-2) utiliidi klasse.

Bränd

Seda .navbar-brandsaab rakendada enamikule elementidele, kuid ankur töötab kõige paremini, kuna mõned elemendid võivad vajada utiliidiklasse või kohandatud stiile.

Tekst

.navbar-brandLisage oma tekst klassiga elemendi sisse .

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

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

Pilt

Saate asendada teksti sees .navbar-brandmärgiga <img>.

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

Pilt ja tekst

Pildi ja teksti samaaegseks lisamiseks saate kasutada ka mõningaid täiendavaid utiliite. Pange tähele .d-inline-blockja .align-text-toplisamist <img>.

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

Navibari navigeerimislingid põhinevad meie .navvalikutel oma modifikaatoriklassiga ja nõuavad õigeks reageerivaks stiiliks lülitusklasside kasutamist. Navigeerimisribadel navigeerimine kasvab ka nii, et see hõivaks võimalikult palju horisontaalset ruumi, et navigeerimisriba sisu oleks kindlalt joondatud.

Lisage .activeklass .nav-linkpraeguse lehe näitamiseks.

Pange tähele, et aria-currentatribuut tuleks lisada ka aktiivsele .nav-link.

html 
<nav class="navbar navbar-expand-lg 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">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Ja kuna me kasutame oma navide jaoks klasse, saate soovi korral loendipõhist lähenemist täielikult vältida.

html 
<nav class="navbar navbar-expand-lg 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">Disabled</a>
      </div>
    </div>
  </div>
</nav>

Võite kasutada ka navigeerimisriba rippmenüüd. Rippmenüüd nõuavad positsioneerimiseks ümbriselementi, seega kasutage kindlasti eraldi ja pesastatud elemente, .nav-itemnagu .nav-linkallpool näidatud.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown 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><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Vormid

Asetage navigeerimisribale erinevad vormi juhtelemendid ja komponendid:

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <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>

Kasutamise kohesed .navbaralamelemendid painduvad ja vaikimisi on justify-content: space-between. Selle käitumise kohandamiseks kasutage vajadusel täiendavaid paindlikke utiliite .

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <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>

Töötavad ka sisestusrühmad. Kui teie navigeerimisriba on terve vorm või enamasti vorm, saate seda <form>elementi kasutada konteinerina ja salvestada veidi HTML-i.

html 
<nav class="navbar 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>

Nende navigeerimisriba vormide osana toetatakse ka mitmesuguseid nuppe. See on ka suurepärane meeldetuletus, et vertikaalse joonduse utiliite saab kasutada erineva suurusega elementide joondamiseks.

html 
<nav class="navbar 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>

Tekst

Naviribad võivad sisaldada tekstiosasid .navbar-text. See klass reguleerib tekstistringide vertikaalset joondust ja horisontaalset vahekaugust.

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

Segage ja sobitage vastavalt vajadusele teiste komponentide ja utiliitidega.

html 
<nav class="navbar navbar-expand-lg 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>

Värvilahendused

Uus versioonis 5.2.0: navigeerimisriba teemasid kasutavad nüüd CSS-i muutujad ja .navbar-lightselle tugi on aegunud. CSS-i muutujaid rakendatakse .navbar, vaikimisi "kerge" välimusega ja neid saab alistada .navbar-dark.

Tänu Bootstrapi Sassi ja CSS-i muutujate kombinatsioonile on navigeerimisriba teemad lihtsamad kui kunagi varem. Vaikimisi on meie "hele navigeerimisriba" kasutamiseks heledate taustavärvidega, kuid saate taotleda .navbar-darkka tumedaid taustavärve. Seejärel kohandage .bg-*utiliitidega.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Konteinerid

Kuigi see pole nõutav, saate navigeerimisriba mähkida a .container-sse, et see lehe keskele asetada, kuid pange tähele, et sisemine konteiner on siiski vajalik. Või võite lisada konteineri sisse, .navbaret tsentreerida ainult fikseeritud või staatilise ülemise navigeerimisriba sisu .

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

Kasutage mis tahes reageerivat konteinerit, et muuta navigeerimisriba sisu kuvamise laiust.

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

Paigutus

Kasutage meie asukohautiliite navigeerimisribade paigutamiseks mittestaatilistele kohtadele. Valige fikseeritud ülaosale, alla kinnitatud, ülaosale kleepuv (kerib koos lehega, kuni see jõuab ülaossa, seejärel jääb sinna) või kleepuv alla (kerib lehega, kuni see jõuab alla, seejärel jääb seal).

Fikseeritud navigeerimisribad kasutavad position: fixed, mis tähendab, et need eemaldatakse DOM-i tavapärasest voost ja võivad vajada kohandatud CSS-i (nt ), padding-topet <body>vältida kattumist teiste elementidega.

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

Kerimine

Lisamine .navbar-nav-scroll( .navbar-navvõi muule navigeerimisriba alamkomponendile), et võimaldada vertikaalset kerimist ahendatud navigeerimisriba ümberlülitatavas sisus. Vaikimisi algab kerimine 75vh(või 75% vaateava kõrgusest), kuid saate selle alistada kohaliku CSS-i kohandatud atribuudi --bs-navbar-heightvõi kohandatud stiilidega. Suuremates vaateavades, kui navigeerimisriba on laiendatud, kuvatakse sisu nagu vaikenavigeerimisribal.

Pange tähele, et sellel käitumisel on potentsiaalne puudus: overflowkui seadistus overflow-y: auto(siin on sisu kerimiseks vajalik), overflow-xon samaväärne parameetriga auto, mis kärbib osa horisontaalsest sisust.

Siin on näide navigeerimisriba kasutamisest .navbar-nav-scrollkoos style="--bs-scroll-height: 100px;", optimaalse vahekauguse tagamiseks mõned täiendavad veerisutiliitid.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-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" role="search">
        <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>

Reageerivad käitumised

Navigeerimisribad saavad kasutada .navbar-toggler, .navbar-collapse, ja .navbar-expand{-sm|-md|-lg|-xl|-xxl}klasse, et määrata, millal nende sisu nupu taga kokku kukub. Koos teiste utiliitidega saate hõlpsalt valida, millal konkreetseid elemente näidata või peita.

Naviribade jaoks, mis kunagi kokku ei vaju, lisage .navbar-expandklass navigeerimisribale. Alati ahenevate navigeerimisribade puhul ärge .navbar-expandklassi lisage.

Lüliti

Naviriba lülitid on vaikimisi joondatud vasakule, kuid kui need järgivad sõsarelementi (nt ) .navbar-brand, joondatakse need automaatselt parempoolsesse serva. Märgistuse ümberpööramine muudab lüliti paigutuse vastupidiseks. Allpool on näited erinevatest lülitusstiilidest.

.navbar-brandVäikseimas katkestuspunktis ei kuvata:

html 
<nav class="navbar navbar-expand-lg 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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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>

Vasakul kuvatud kaubamärgiga ja paremal lülitiga:

html 
<nav class="navbar navbar-expand-lg 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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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>

Vasakpoolse lülitiga ja paremal kaubamärgiga:

html 
<nav class="navbar navbar-expand-lg 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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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>

Väline sisu

Mõnikord soovite kasutada ahendamise pistikprogrammi, et käivitada konteineri element sisu jaoks, mis asub struktuuriliselt väljaspool .navbar. Kuna meie pistikprogramm töötab idja data-bs-targetsobitab, on seda lihtne teha!

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

Kui teete seda, soovitame lisada täiendava JavaScripti, et viia fookus programmiliselt konteinerisse selle avamisel. Vastasel juhul on klaviatuurikasutajatel ja abitehnoloogiate kasutajatel tõenäoliselt raske äsja avaldatud sisu leida – eriti kui avatud konteiner on dokumendi struktuuris enne lülitit. Samuti soovitame veenduda, et lülitil oleks aria-controlsatribuut, mis osutab sisukonteinerile id. Teoreetiliselt võimaldab see abitehnoloogia kasutajatel hüpata otse lülitist selle juhitavasse konteinerisse, kuid selle tugi on praegu üsna ebaühtlane.

Offcanvas

Muutke oma laienev ja ahendav navigeerimisriba lõuendivälise komponendiga sahtliks . Laiendame mõlemat offcanvase vaikestiili ja kasutame oma .navbar-expand-*klasse dünaamilise ja paindliku navigeerimise külgriba loomiseks.

.navbar-expand-*Allolevas näites jätke klass täielikult välja, et luua lõuendivälise navigeerimisriba, mis on alati ahendatud kõigis katkestuspunktides .

html 
<nav class="navbar bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </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>
        </ul>
        <form class="d-flex" role="search">
          <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>
  </div>
</nav>

Lõuendivälise navigeerimisriba loomiseks, mis laieneb kindlas katkestuspunktis tavaliseks navigeerimisribaks lg, kasutage .navbar-expand-lg.

<nav class="navbar navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

Kui kasutate väljaspool lõuendit tumedal navigeerimisribal, pidage meeles, et teksti loetamatuks muutumise vältimiseks peate võib-olla kasutama offcanvase sisu tumedat tausta. Allolevas näites lisame .navbar-darkja .bg-dark, .navbar, , .text-bg-darkja , et luua tume lõuendiga õige stiil..offcanvas.dropdown-menu-dark.dropdown-menu.btn-close-white.btn-close

html 
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <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>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

Muutujad

Lisatud versioonisse v5.2.0

Bootstrapi areneva CSS-muutujate lähenemisviisi osana kasutavad navigeerimisribad nüüd .navbartäiustatud reaalajas kohandamiseks kohalikke CSS-i muutujaid. CSS-i muutujate väärtused määratakse Sassi kaudu, seega toetatakse endiselt ka Sassi kohandamist.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

Mõned täiendavad CSS-muutujad on samuti olemas .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

CSS-i muutujate kaudu kohandamist saab näha .navbar-darkklassis, kus me alistame konkreetsed väärtused ilma dubleerivaid CSS-i valijaid lisamata.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Sassi muutujad

Kõikide navigeerimisribade muutujad:

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

Tumeda navigeerimisriba muutujad :

$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-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

Sassi silmus

Tundliku navigeerimisriba laiendamise/ahendamise klassid (nt .navbar-expand-lg) kombineeritakse $breakpointskaardiga ja genereeritakse tsükli kaudu 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: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}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;
        }

        .offcanvas {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

          .offcanvas-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}