in English

Navbar

Zvinyorwa uye mienzaniso yeBootstrap ine simba, inopindura navigation musoro, iyo navbar. Inosanganisira tsigiro yekumaka, kufamba, nezvimwe, kusanganisira rutsigiro rwekudonha kwedu plugin.

Pa peji ino

Zvinoshanda sei

Hezvino izvo zvaunoda kuziva usati watanga ne navbar:

Navbars inoda kuputirwa neiyo .navbarinopindura .navbar-expand{-sm|-md|-lg|-xl|-xxl}kudonha uye ruvara chirongwa makirasi.
Navbars uye zviri mukati mavo zvinoyerera nekusarudzika. Shandura mudziyo kuti udzikise hupamhi hwayo hwakachinjika nenzira dzakasiyana.
Shandisa nzvimbo yedu uye flex utility makirasi ekudzora nzvimbo uye kurongeka mukati menavbar.
MaNavbars anopindura nekukasira, asi unogona kuzvishandura zviri nyore kuti uchinje izvozvo. Maitiro ekupindura anoenderana neyedu Collapse JavaScript plugin.
Ita shuwa kuwanikwa nekushandisa <nav>chinhu kana, kana uchishandisa chimwe chinhu chakajairwa senge <div>, wedzera a role="navigation"kune yega navbar kuti uiratidze zvakajeka senzvimbo inocherekedza yevashandisi vetekinoroji inobatsira.
Ratidza chinhu chiripo nekushandisa aria-current="page"peji yazvino kana aria-current="true"yechinhu chiripo museti.

Iyo animation mhedzisiro yechikamu ichi zvinoenderana prefers-reduced-motionnemubvunzo wenhau. Ona chikamu chakaderedzwa chezvinyorwa zvedu zvekusvikika .

Zvinotsigirwa zvemukati

MaNavbars anouya neakavakirwa-mukati tsigiro kune mashoma mashoma ezvikamu. Sarudza kubva pane zvinotevera sezvinodiwa:

.navbar-brandyekambani yako, chigadzirwa, kana zita reprojekiti.
.navbar-navyehurefu hwakazara uye huremu hwekufamba (kusanganisira rutsigiro rwekudonha).
.navbar-toggleryekushandisa neyedu yekudonha plugin uye mamwe mafambiro ekuchinja maitiro.
Flex uye spacing zvinoshandiswa kune chero fomu kudzora uye zviito.
.navbar-textyekuwedzera tambo dzakadzika pakati pemavara.
.collapse.navbar-collapseyekuisa mumapoka nekuviga zvirimo zvemubhara nemubereki.
Wedzera sarudzo .navbar-scrollyekuseta max-heightuye kupuruzira yakawedzera navbar yemukati .

Heino muenzaniso wezvose zvidiki-zvinosanganisirwa mune inopindura mwenje-themed navbar iyo inongodonha pa lg(hombe) breakpoint.

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

Uyu muenzaniso unoshandisa kumashure ( bg-light) uye spacing ( my-2, my-lg-0, me-sm-0, my-sm-0) utility makirasi.

Brand

Iyo .navbar-brandinogona kuiswa kune zvakawanda zvinhu, asi anchor inoshanda zvakanyanya, sezvimwe zvinhu zvingangoda makirasi ekushandisa kana masitaera etsika.

Text

Wedzera zvinyorwa zvako mukati mechimwe chinhu .navbar-brandnekirasi.

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

Image

Unogona kutsiva mavara ari mukati me .navbar-brandne <img>.

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

Mufananidzo uye zvinyorwa

Iwe unogona zvakare kushandisa zvimwe zvinoshandiswa kuwedzera mufananidzo uye zvinyorwa panguva imwe chete. Cherechedza kuwedzera kwe .d-inline-blockuye .align-text-toppa <img>.

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

Nav

Navbar navigation links inovaka pane zvatinosarudza .navnekirasi yavo yekugadziridza uye inoda kushandiswa kwemakirasi etoggler kuti aite maitiro anoteerera. Kufamba mumabhawa kunozokurawo kutora nzvimbo yakatwasuka sezvinobvira kuti uchengetedze zvirimo zvemubhara wako zvakabatana.

Wedzera .activekirasi .nav-linkkuratidza peji iripo.

Ndokumbira utarise kuti iwe unofanirwa kuwedzera aria-currenthunhu pane inoshanda .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">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Uye nekuti isu tinoshandisa makirasi kune edu navs, unogona kudzivirira iyo rondedzero-yakavakirwa maitiro zvachose kana uchida.

<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">Disabled</a>
      </div>
    </div>
  </div>
</nav>

Iwe unogona zvakare kushandisa kudonhedza mune yako navbar. Mamenu ekudonha anoda chinhu chekuputira chekumisikidza, saka iva nechokwadi chekushandisa zvakaparadzana uye nested zvinhu .nav-itemuye .nav-linksezvakaratidzwa pazasi.

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

Mafomu

Isa akasiyana mafomu ekudzora uye zvikamu mukati mebhara rekufamba:

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

Pakarepo zvinhu zvemwana .navbarzvekushandisa flex marongero uye zvichagara kune justify-content: space-between. Shandisa mamwe flex utilities sezvinodiwa kugadzirisa maitiro aya.

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

Mapoka ekuisa anoshanda, zvakare. Kana yako navbar iri fomu rese, kana kazhinji fomu, unogona kushandisa <form>chinhu semudziyo uye chengetedza imwe HTML.

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

Mabhatani akasiyana-siyana anotsigirwa sechikamu cheaya mafomu e navbar, zvakare. Ichi zvakare chiyeuchidzo chikuru chekuti vertical alignment utilities inogona kushandiswa kuwiriranisa hukuru hwakasiyana zvinhu.

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

Text

Navbar inogona kunge iine zvidimbu zvemavara nerubatsiro rwe .navbar-text. Kirasi iyi inogadzirisa kurongeka kwakatwasuka uye nzvimbo yakachinjika yetambo dzemavara.

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

Sanganisa uye sanganisa nezvimwe zvikamu uye zvishandiso sezvinodiwa.

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

Zvirongwa zvemavara

Theming the navbar haina kumbobvira yave nyore nekuda kwekusanganiswa kwemakirasi ezvidzidzo uye background-colorzvekushandisa. Sarudza kubva .navbar-lightkuti ushandise neyakajeka kumashure mavara, kana .navbar-darkkune yakasviba kumashure mavara. Zvadaro, gadzirisa .bg-*nezvinoshandiswa.

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

Containers

Kunyangwe zvisingadiwe, unogona kuputira navbar mukuisa .containerpakati pepeji-asi ona kuti chigadziko chemukati chichiri kudikanwa. Kana kuti iwe unogona kuwedzera mudziyo mukati meiyo .navbarchete pakati pezviri mukati meiyo yakagadziriswa kana static yepamusoro navbar .

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

Shandisa chero emidziyo inopindura kuti uchinje kuti zvakafara sei zviri mubhari yako zvinoratidzwa.

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

Placement

Shandisa zvinzvimbo zvedu zvekushandisa kuisa navbars munzvimbo dzisiri-static. Sarudza kubva kune yakagadziriswa kusvika kumusoro, yakagadziriswa kusvika pasi, kana yakanamatira kumusoro (mipumburu ine peji kusvikira yasvika kumusoro, zvino inogara ipapo). Fixed navbars use position: fixed, zvichireva kuti anodhonzwa kubva kune yakajairwa kuyerera kweDOM uye angangoda tsika CSS (semuenzaniso, padding-toppa <body>) kudzivirira kupindirana nezvimwe zvinhu.

Ziva zvakare kuti .sticky-topinoshandisa position: sticky, iyo isingatsigirwe zvizere mubrowser yega yega .

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

Kupuruzira

Wedzera .navbar-nav-scrollkune .navbar-nav(kana imwe navbar sub-component) kuti ugone kutenderera wakatwasuka mukati mezvinobatika zviri mukati mebhara rakapunzika. Nekumisikidza, kupuruzira kunopinda mukati 75vh(kana 75% yehurefu hwekutarisa), asi iwe unogona kudarika iyo neiyo CSS yemuno tsika chivakwa --bs-navbar-heightkana tsika masitaera. Pazviteshi zvakakura zvekuona kana iyo navbar yawedzerwa, zvirimo zvinoonekwa sezvazvinoita mubharari yekusarudzika.

Ndokumbira utarise kuti maitiro aya anouya neanogona kudzoka shure kwe overflow--pakuseta overflow-y: auto(inodiwa kupuruzira zvirimo pano), overflow-xinofanana ne auto, iyo inodyara zvimwe zvakachinjika.

Heino muenzaniso navbar uchishandisa .navbar-nav-scrollne style="--bs-scroll-height: 100px;", iine zvimwe zvekuwedzera magineti ekushandisa kuitira nzvimbo yakakwana.

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

Maitiro ekupindura

Navbars inogona kushandisa .navbar-toggler, .navbar-collapse, uye .navbar-expand{-sm|-md|-lg|-xl|-xxl}makirasi kuona kana zvirimo zvadonha kuseri kwebhatani. Mukubatana nezvimwe zvinoshandiswa, unogona kusarudza zviri nyore nguva yekuratidza kana kuviga zvimwe zvinhu.

Kune ma navbar asingambopunzike, wedzera .navbar-expandkirasi pabhara rekufambisa. Kune ma navbar anogara achidhirika, usawedzera chero .navbar-expandkirasi.

Toggler

Navbar togglers inosiiwa-yakarongedzerwa nekusarudzika, asi kana vakatevera chinhu chehama senge , ivo vanozongoenderana nekurudyi .navbar-brand. Kudzosera markup yako kunodzosera kumashure kuiswa kwetoggler. Pazasi pane mienzaniso yemhando dzakasiyana dzekuchinja.

Pasina .navbar-brandkuratidzwa pane diki breakpoint:

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

Nezita remhando rinoratidzwa kuruboshwe uye toggler kurudyi:

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

Neine toggler kuruboshwe uye zita rechiratidzo kurudyi:

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

Zvekunze zvemukati

Dzimwe nguva iwe unoda kushandisa iyo yekudonha plugin kukonzeresa mudziyo wemukati wemukati unogara kunze kweiyo .navbar. Nekuti yedu plugin inoshanda pane iduye data-bs-targetnekufananidza, izvo zviri nyore kuita!

Collapsed content

Toggleable via the navbar brand.

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

Paunoita izvi, isu tinokurudzira kusanganisira yekuwedzera JavaScript kuti ifambise inotarisisa zvine hurongwa kumudziyo kana yavhurwa. Zvikasadaro, vashandisi vekhibhodi nevashandisi veanobatsira matekinoroji vangangove nenguva yakaoma kuwana izvo zvichangoburwa zvemukati - kunyanya kana mudziyo wakavhurwa ukauya pamberi pemugadziri muchimiro chegwaro. Isu tinokurudzirawo kuve nechokwadi chekuti toggler ine aria-controlshunhu, inonongedza kune yemukati idmudziyo. Muchirevo, izvi zvinobvumira vashandisi vetekinoroji yekubatsira kuti vasvetuke vakananga kubva kune toggler kuenda kumudziyo waunodzora-asi tsigiro yeiyi parizvino iri patchy.

Offcanvas

Shandura navbar yako iri kukura uye inodonha kuita dhirowa rekunze recanvas ine offcanvas plugin. Isu tinowedzera ese ari offcanvas default masitaera uye tinoshandisa .navbar-expand-*makirasi edu kugadzira ine simba uye inochinjika yekufamba padivi pebar.

Mumuenzaniso uri pazasi, kugadzira offcanvas navbar inogara yakadhirika pane ese mabreakpoint, siya .navbar-expand-*kirasi zvachose.

<nav class="navbar navbar-light 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 text-reset" 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="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <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">
          <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>

Kugadzira offcanvas navbar inokura kuita yakajairwa navbar pane chaiyo breakpoint senge lg, shandisa .navbar-expand-lg.

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

Sass

Variables

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

Loop

Inopindura navbar inowedzera/kudonha makirasi (eg, .navbar-expand-lg) anosanganiswa $breakpointsnemepu uye anogadzirwa kuburikidza ne loop mu 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;
        }

        .offcanvas-header {
          display: none;
        }

        .offcanvas {
          position: inherit;
          bottom: 0;
          z-index: 1000;
          flex-grow: 1;
          visibility: visible !important; // stylelint-disable-line declaration-no-important
          background-color: transparent;
          border-right: 0;
          border-left: 0;
          @include transition(none);
          transform: none;
        }
        .offcanvas-top,
        .offcanvas-bottom {
          height: auto;
          border-top: 0;
          border-bottom: 0;
        }

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