in English

Ibha ye-Navbar

Amadokhumenti nezibonelo zesihloko sokuzulazula esinamandla, esisabelayo se-Bootstrap, ibha ye-navbar. Kufaka usekelo lwebhrendi, ukuzulazula, nokunye okwengeziwe, okuhlanganisa usekelo lwe-plugin yethu yokugoqa.

Kuleli khasi

Isebenza kanjani

Nakhu okudingeka ukwazi ngaphambi kokuthi uqale nge-navbar:

Ama-Navbar adinga ukugoqwa ukuze aphendule ukugoqa .navbarnamakilasi esikimu sombala ..navbar-expand{-sm|-md|-lg|-xl|-xxl}
Ama-Navbar nokuqukethwe kwawo kuwuketshezi ngokuzenzakalelayo. Shintsha isiqukathi ukuze ukhawulele ububanzi bazo obuvundlile ngezindlela ezahlukene.
Sebenzisa izikhala zethu kanye namakilasi ezinsiza eziguquguqukayo ukuze ulawule isikhala nokuqondanisa ngaphakathi kwama-navbar.
Ama-Navbar aphendula ngokuzenzakalelayo, kodwa ungakwazi ukuwashintsha kalula ukuze ashintshe lokho. Ukuziphatha okusabelayo kuncike ku-plugin yethu ye-Collapse JavaScript.
Qinisekisa ukufinyeleleka ngokusebenzisa i- <nav>elementi noma, uma usebenzisa i-elementi evamile njenge- <div>, engeza i- role="navigation"navbar ngayinye ukuze uyikhombe ngokusobala njengesifunda esiyingqopha-mlando kubasebenzisi bobuchwepheshe obusizayo.
Bonisa into yamanje ngokusebenzisa aria-current="page"ikhasi lamanje noma aria-current="true"into yamanje ngesethi.
Okusha ku-v5.2.0: Ama-Navbars angaba netimu ngeziguquguqukayo ze-CSS ezikhokhwa kusigaba .navbarsesisekelo. .navbar-lightyehlisiwe futhi .navbar-darkyabhalwa kabusha ukuze kukhishwe okuguquguqukayo kwe-CSS esikhundleni sokwengeza izitayela ezengeziwe.

Umthelela wokugqwayiza wale ngxenye uncike prefers-reduced-motionembuzweni wemidiya. Bona ingxenye yokunyakaza encishisiwe yemibhalo yethu yokufinyeleleka .

Okuqukethwe okusekelwe

Ama-Navbar eza nosekelo olwakhelwe ngaphakathi lwezingxenye ezincane ezimbalwa. Khetha kokulandelayo njengoba kudingeka:

.navbar-brandinkampani yakho, umkhiqizo, noma igama lephrojekthi.
.navbar-navukuze uthole ukuzulazula okugcwele ubude nokungasindi (okuhlanganisa nosekelo lokwehliswayo).
.navbar-togglerukuze sisetshenziswe ne-plugin yethu yokugoqa nokunye ukuziphatha kokuguqula indlela yokuzulazula.
Izinsiza ze-Flex nezikhala zanoma yiziphi izilawuli nezenzo zefomu.
.navbar-textyokwengeza amayunithi ezinhlamvu aphakathi nendawo aqondile.
.collapse.navbar-collapseukuze uqoqe futhi ufihle okuqukethwe kwe-navbar ngephuzu lomzali.
Engeza ongakukhetha .navbar-scrollukuze usethe max-heightfuthi uskrole okuqukethwe kwe-navbar enwetshiwe .

Nasi isibonelo sazo zonke izingxenye ezingaphansi ezifakwe ku-navbar enetimu yokukhanya esabelayo egoqa ngokuzenzakalelayo endaweni lgyokuphumula (enkulu).

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>

Lesi sibonelo sisebenzisa ingemuva ( bg-light) nesikhala ( me-auto, mb-2, mb-lg-0, me-2) amakilasi awusizo.

Ibhrendi

I- .navbar-brandelekthronikhi ingasetshenziswa kuma-elementi amaningi, kodwa ihange lisebenza kahle kakhulu, njengoba ezinye izici zingase zidinge izigaba eziwusizo noma izitayela zangokwezifiso.

Umbhalo

Engeza umbhalo wakho ngaphakathi kwe-elementi .navbar-brandneklasi.

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>

Isithombe

Ungakwazi esikhundleni sombhalo ongaphakathi kwefayela .navbar-brandle- <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>

Isithombe nombhalo

Ungakwazi futhi ukusebenzisa ezinye izinsiza ezengeziwe ukwengeza isithombe nombhalo ngesikhathi esisodwa. Qaphela ukufakwa .d-inline-blockkanye .align-text-topnaku- <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>

Nav

Izixhumanisi zokuzulazula ze-Navbar zakhela phezu .navkwezinketho zethu ngesigaba sazo sokuguqula futhi zidinga ukusetshenziswa kwamakilasi e-toggler ukuthola isitayela esifanele sokuphendula. Ukuzulazula kuma-navbar nakho kuzokhula kuthathe indawo evundlile ngangokunokwenzeka ukuze ugcine okuqukethwe kwakho kwe-navbar kuhambisana ngokuphephile.

Engeza .activeikilasi .nav-linkukuze ubonise ikhasi lamanje.

Sicela uqaphele ukuthi kufanele futhi wengeze aria-currentisibaluli kokusebenzayo .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>

Futhi ngenxa yokuthi sisebenzisa amakilasi kuma-navs ethu, ungagwema indlela esuselwe ohlwini ngokuphelele uma uthanda.

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>

Ungasebenzisa futhi okwehliswayo ku-navbar yakho. Amamenyu okudonsela phansi adinga into yokugoqa ukuze ibekwe, ngakho-ke qiniseka ukuthi usebenzisa izinto ezihlukene nezibekwe esidlekeni .nav-itemfuthi .nav-linknjengoba kukhonjisiwe ngezansi.

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>

Amafomu

Beka izilawuli zamafomu ahlukahlukene kanye nezingxenye ngaphakathi kwe-navbar:

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>

Izinto ezisheshayo zezingane .navbarzokusetshenziswa kwesakhiwo esiguqukayo futhi zizozenzakalelayo zibe justify-content: space-between. Sebenzisa izinsiza ezengeziwe eziguquguqukayo njengoba kudingeka ukuze ulungise lokhu kuziphatha.

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>

Amaqembu okokufaka ayasebenza, nawo. Uma i-navbar yakho iyifomu lonke, noma ngokuvamile iyifomu, ungasebenzisa <form>isici njengesiqukathi futhi ulondoloze i-HTML ethile.

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>

Izinkinobho ezahlukahlukene zisekelwa njengengxenye yalawa mafomu e-navbar, nawo. Lesi futhi isikhumbuzo esihle sokuthi izinsiza zokuqondanisa okume mpo zingasetshenziswa ukuqondisa izinto ezinosayizi abahlukahlukene.

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>

Umbhalo

Ama-Navbar angase aqukathe izingcezu zombhalo ngosizo lwe- .navbar-text. Leli klasi lilungisa ukuqondanisa okume mpo kanye nesikhala esivundlile seyunithi yezinhlamvu zombhalo.

html

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

Hlanganisa futhi uhlanganise nezinye izingxenye kanye nezinsiza njengoba kudingeka.

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>

Izikimu zombala

Okusha ku-v5.2.0: Itimu ye- Navbar manje isinikwa amandla okuguquguqukayo kwe-CSS futhi .navbar-lightyehlisiwe. Okuguquguqukayo kwe-CSS kusetshenziswe kokuthi .navbar, ngokuzenzakalelayo ekubukekeni "okukhanyayo", futhi kungabhalwa ngaphezulu ngokuthi .navbar-dark.

Amatimu e-Navbar alula kunangaphambili ngenxa yenhlanganisela ye-Bootstrap yezinto eziguquguqukayo ze-Sass ne-CSS. Okuzenzakalelayo "kuyi-navbar" yethu esetshenziswayo ngemibala engemuva ekhanyayo, kodwa futhi ungafaka isicelo .navbar-darknemibala engemuva emnyama. Bese, yenza ngendlela oyifisayo .bg-*nezinsiza.

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

Izitsha

Nakuba kungadingeki, ungakwazi ukugoqa ibha yokuzulazula .containerukuze uyibeke maphakathi nekhasi–yize qaphela ukuthi isiqukathi sangaphakathi sisadingeka. Noma ungangeza isitsha ngaphakathi .navbarukuze ubeke phakathi kuphela okuqukethwe kwe- navbar engashintshi noma emile .

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>

Sebenzisa noma yiziphi iziqukathi eziphendulayo ukuze uguqule ukuthi okuqukethwe ku-navbar yakho kuvezwa kangakanani.

html

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

Ukubekwa

Sebenzisa izinsiza zethu zesikhundla ukuze ubeke ama-navbar ezindaweni ezingezona ezimile. Khetha kusuka kokugxilile kuye phezulu, okugxilile kuye phansi, kunamathele phezulu (skrola ngekhasi kuze kufike phezulu, bese uhlala lapho), noma unamathele phansi (ugoqa ngekhasi uze ufinyelele phansi, bese uhlala Lapho).

Ama-navbar angashintshi asebenzisa position: fixed, okusho ukuthi adonswa ekugelezeni okuvamile kwe-DOM futhi angase adinge i-CSS yangokwezifiso (isb., padding-topku- <body>) ukuze kuvinjelwe ukugqagqana nezinye izici.

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>

Ukuskrola

Engeza .navbar-nav-scrollku- .navbar-nav(noma enye ingxenye encane ye-navbar) ukuze unike amandla ukuskrola okuqondile ngaphakathi kokuqukethwe okuguqulwayo kwe-navbar egoqiwe. Ngokuzenzakalelayo, ukuskrola kungena 75vh(noma ku-75% wobude bembobo yokubuka), kodwa ungakwazi ukukukhipha lokho ngempahla yangokwezifiso ye-CSS yasendaweni --bs-navbar-heightnoma izitayela zangokwezifiso. Ezikhumulweni zokubuka ezinkulu lapho ibha ye-navbar inwetshwa, okuqukethwe kuzovela njengoba kwenzeka ku-navbar ezenzakalelayo.

Sicela uqaphele ukuthi lokhu kuziphatha kuza nesiphambeko esingase sibe khona— overflowlapho kulungiselelwa overflow-y: auto(okudingekile ukuskrola okuqukethwe lapha), overflow-xkulingana autonokuthi , okuzonqampuna okunye okuqukethwe okuvundlile.

Nasi isibonelo se-navbar esisebenzisa .navbar-nav-scrollne- style="--bs-scroll-height: 100px;", nezinye izinsiza ze-margin eyengeziwe ukuze uthole isikhala esiphezulu.

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>

Ukuziphatha okusabelayo

Ama-Navbar angasebenzisa .navbar-toggler, .navbar-collapse, kanye .navbar-expand{-sm|-md|-lg|-xl|-xxl}namakilasi ukuze anqume lapho okuqukethwe kwawo kugoqeka ngemva kwenkinobho. Ngokuhambisana nezinye izinsiza, ungakhetha kalula ukuthi uzibonisa nini noma uzifihle nini izinto ezithile.

Kuma-navbar angawi, engeza .navbar-expandiklasi ku-navbar. Kuma-navbar ahlala egoqa, ungangezi noma yisiphi .navbar-expandisigaba.

I-Toggler

Iziguquli zebha ye-Navbar ziqondaniswe kwesokunxele ngokuzenzakalelayo, kodwa uma zilandela i-elementi eyizelamani njenge- , zizoqondaniswa .navbar-brandngokuzenzakalelayo kwesokudla. Ukubuyisela emuva imakhaphu yakho kuzohlehlisa ukubekwa kwesiguquli. Ngezansi kunezibonelo zezitayela ezahlukene zokuguqula.

Ngaphandle .navbar-brandkokuboniswa endaweni encane yokuphumula:

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>

Ngegama lomkhiqizo eliboniswa kwesokunxele kanye ne-toggler kwesokudla:

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>

Nge-toggler kwesokunxele kanye negama lomkhiqizo kwesokudla:

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>

Okuqukethwe kwangaphandle

Kwesinye isikhathi ufuna ukusebenzisa i-plugin yokugoqa ukuze uqalise isici sesiqukathi sokuqukethwe okuhlala ngaphandle kwe- .navbar. Ngoba i-plugin yethu isebenza ekufaniseni idnasekufaniseni data-bs-target, lokho kwenziwa kalula!

Okuqukethwe okugoqiwe

Iguquleka ngebhrendi ye-navbar.

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>

Uma wenza lokhu, sincoma ukuthi ufake i-JavaScript eyengeziwe ukuze uhambise ukugxila ngokohlelo kusiqukathi uma sivulwa. Uma kungenjalo, abasebenzisi bekhibhodi nabasebenzisi bobuchwepheshe obusizayo bazoba nobunzima bokuthola okuqukethwe okusha okuveziwe - ikakhulukazi uma isiqukathi esivuliwe siza ngaphambi komguquli esakhiweni sedokhumenti. Futhi sincoma ukuthi wenze isiqiniseko sokuthi isiguquli sinesibaluli aria-controls, esikhomba idesiqukathi sokuqukethwe. Ngokombono, lokhu kuvumela abasebenzisi bobuchwepheshe obusizayo ukuthi bagxume ngokuqondile ukusuka kusiguquli baye esitsheni esisilawulayo–kodwa usekelo lwalokhu okwamanje alunalutho.

I-offcanvas

Guqula i-navbar yakho ekhulayo negoqikayo ibe ikhabethe le-offcanvas elinengxenye ye- offcanvas . Sinweba zombili izitayela ezizenzakalelayo ze-offcanvas futhi sisebenzisa .navbar-expand-*amakilasi ethu ukuze sakhe ibha eseceleni eguqukayo neguquguqukayo.

Esibonelweni esingezansi, ukuze udale i-offcanvas navbar ehlala igoqiwe kuwo wonke ama-breakpoint, yeka .navbar-expand-*ikilasi ngokuphelele.

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>

Ukudala i-offcanvas navbar enwebeka ibe yi-navbar evamile endaweni ethile yokuphumula efana lg, sebenzisa .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>

Uma usebenzisa i-offcanvas ku-navbar emnyama, qaphela ukuthi ungase udinge ukuba nengemuva elimnyama kokuqukethwe kwe-offcanvas ukuze ugweme umbhalo ukuthi ungafundeki. Esibonelweni esingezansi, sengeza .navbar-darkfuthi .bg-darkku- .navbar, .text-bg-darkku- .offcanvas, .dropdown-menu-darkku- .dropdown-menu, futhi .btn-close-whiteukwenza .btn-closeisitayela esifanele ngekhanvasi emnyama.

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

Okuguquguqukayo

Kwengezwe ku-v5.2.0

Njengengxenye yendlela yokuguquguquka kwe-CSS ye-Bootstrap, ama-navbar manje asebenzisa okuguquguqukayo kwasendaweni kwe-CSS .navbarukuze enze ngokwezifiso isikhathi sangempela esithuthukisiwe. Amanani okuguquguquka kwe-CSS asethwa nge-Sass, ngakho ukwenza ngokwezifiso kwe-Sass kusasekelwa, nakho.

  --#{$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};

Okunye okuhlukile kwe-CSS okwengeziwe kukhona ku- .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);

Ukwenza ngendlela oyifisayo ngokusebenzisa okuguquguqukayo kwe-CSS kungabonakala .navbar-darkekilasini lapho sikhipha khona amanani athile ngaphandle kokwengeza izikhethi ze-CSS eziyimpinda.

  --#{$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)};

Izinguquko ze-Sass

Okuguquguqukayo kwawo wonke ama-navbar:

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

Okuguquguqukayo kwe- navbar emnyama :

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

Sass loop

Ibha ye- navbar ephendulayo izigaba zokunweba/zokugoqa (isb, .navbar-expand-lg) zihlanganiswa $breakpointsnemephu futhi zenziwa nge-loop ku- 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;
          }
        }
      }
    }
  }
}