Navibar

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

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}
Navbarid ja nende sisu on vaikimisi sujuvad. Kasutage valikulisi konteinereid , et piirata nende horisontaalset laiust.
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.
Navigeerimisribad on printimisel vaikimisi peidetud. Sundige need printima, .d-printlisades .navbar. Vaadake ekraani kasulikkuse klassi.
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.

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 .
.form-inlinemis tahes vormi juhtelementide ja toimingute jaoks.
.navbar-textvertikaalselt tsentreeritud tekstistringide lisamiseks.
.collapse.navbar-collapsenavigeerimisriba sisu grupeerimiseks ja peitmiseks vanema murdepunkti järgi.

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

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

Selles näites kasutatakse värvi ( bg-light) ja vahekauguste ( my-2, my-lg-0, mr-sm-0, my-sm-0) kasulikkust 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.

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

Piltide lisamiseks .navbar-brandon tõenäoliselt alati vaja kohandatud stiile või utiliite, et nende suurus oleks õige. Siin on mõned näited demonstreerimiseks.

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

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.

Aktiivsed olekud – tähisega .active– näitavad, et praegust lehte saab rakendada otse .nav-links-ile või nende vahetutele vanematele .nav-item.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

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

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

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.

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

Vormid

Asetage erinevad vormi juhtelemendid ja komponendid navigeerimisribale, kasutades .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>

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

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

Töötavad ka sisestusrühmad:

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

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

<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

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

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

Segage ja sobitage vastavalt vajadusele teiste komponentide ja utiliitidega.

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

Värvilahendused

Navigeerimisriba teemastamine pole kunagi olnud lihtsam tänu teemaklasside ja background-colorutiliitide kombinatsioonile. Valige .navbar-lightheledate taustavärvidega või .navbar-darktumedate taustavärvidega kasutamiseks. 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 navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Konteinerid

Kuigi see pole nõutav, saate navigeerimisriba mähkida a-sse, .containeret asetada see lehele keskele. Või võite lisada konteineri sisse, .navbaret tsentreerida ainult fikseeritud või staatilise ülemise navigeerimisriba sisu .

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

.navbar-expand{-sm|-md|-lg|-xl}Kui konteiner on navigeerimisribal, eemaldatakse selle horisontaalne polster teie määratud klassist madalamate katkestuspunktide juures . See tagab, et me ei kahekordista tarbetult polsterdust alumistes vaateavades, kui navigeerimisriba on ahendatud.

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

Paigutus

Kasutage meie asukohautiliite navigeerimisribade paigutamiseks mittestaatilistele kohtadele. Valige ülaosas fikseeritud, alla fikseeritud või ülaosas kleepuva (kerib koos lehega, kuni see jõuab ülaossa, seejärel jääb sinna). 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.

Pange tähele ka, et .sticky-topkasutab position: sticky, mida kõik brauserid täielikult ei toeta .

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

Kerimine

Lisamine .navbar-nav-scroll( .navbar-collapsevõ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 tekstisisese või kohandatud stiiliga. 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="max-height: 100px;", optimaalse vahekauguse tagamiseks mõned täiendavad veerisutiliitid.

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

Reageerivad käitumised

Navigeerimisribad saavad kasutada .navbar-toggler, .navbar-collapse, ja .navbar-expand{-sm|-md|-lg|-xl}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:

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

Vasakul kuvatud kaubamärgiga ja paremal lülitiga:

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

Vasakpoolse lülitiga ja paremal kaubamärgiga:

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

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-targetsobitab, on seda lihtne teha!

Ahendatud sisu

Vahetatav navigeerimisriba kaubamärgi kaudu.

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

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.