in English

Navbar

Amaxwebhu kunye nemizekelo ye-Bootstrap enamandla, i-header yokukhangela ephendulayo, i-navbar. Iquka inkxaso yokubeka uphawu, ukukhangela, kunye nokunye, kuquka nenkxaso yeplagin yethu yokuwa.

Kweli phepha

Ingaba isebenza kanjani

Nantsi into ekufuneka uyazi ngaphambi kokuba uqalise nge-navbar:

Iibhari zeNavbar zifuna ukusonga .navbarkunye neeklasi zesikimu sombala esiphendulayo..navbar-expand{-sm|-md|-lg|-xl|-xxl}
Ii-Navbar kunye nemixholo yazo ilulwelo ngokungagqibekanga. Guqula isikhongozeli sinciphise ububanzi bazo obuthe tye ngeendlela ezahlukeneyo.
Sebenzisa izithuba zethu kunye neeklasi eziluncedo eziguquguqukayo zokulawula izithuba kunye nolungelelwaniso ngaphakathi kwee-navbar .
Ii-Navbars ziphendula ngokungagqibekanga, kodwa unokuziguqula ngokulula ukuyitshintsha loo nto. Indlela yokuziphatha ephendulayo ixhomekeke kwiplagi yethu yokuLahla yeJavaScript.
Qinisekisa ukufikeleleka ngokusebenzisa <nav>isiqalelo okanye, ukuba usebenzisa into eqhelekileyo efana ne <div>, yongeza i role="navigation"navbar nganye ukuyichonga ngokucacileyo njengommandla obalulekileyo wabasebenzisi boncedo lobuchwephesha.
Bonisa into yangoku ngokusebenzisa aria-current="page"iphepha langoku okanye aria-current="true"into yangoku kwiseti.
Entsha kwi-v5.2.0: Ii-Navbar zinokuba ne-themed kunye ne-CSS variables ezibekwe .navbarkwiklasi yesiseko. .navbar-lightiye yarhoxiswa kwaye .navbar-darkiye yabhalwa ngokutsha ukuze ibhale ngaphezulu iinguqulelo zeCSS endaweni yokongeza izimbo ezongezelelweyo.

Isiphumo soopopayi seli candelo sixhomekeke prefers-reduced-motionkumbuzo wemidiya. Jonga icandelo leentshukumo ezincitshisiweyo kuxwebhu lwethu lofikelelo .

Umxholo oxhaswayo

I-Navbars iza nenkxaso eyakhelwe-ngaphakathi kwiinxalenye ezincinci. Khetha kwezi zilandelayo njengoko kufuneka:

.navbar-brandyenkampani yakho, imveliso, okanye igama leprojekthi.
.navbar-navkubude obugcweleyo kunye nokukhanya okulula (kubandakanya inkxaso yokwehla).
.navbar-togglerukuze sisetyenziswe kunye neplagin yethu yokuwa kunye nezinye iindlela zokuziphatha zokuguqula .
Izixhobo zeFlex kunye nesithuba kulo naluphi na uhlobo lolawulo kunye nezenzo.
.navbar-textyokongeza imitya ethe nkqo embindini wokubhaliweyo.
.collapse.navbar-collapsengokwamaqela kunye nokufihla imixholo ye-navbar nge-breakpoint yomzali.
Yongeza into oyikhethayo .navbar-scrollukuseta max-heightkwaye uskrole umxholo owandisiweyo webar ye navbar .

Nanku umzekelo wawo onke amacandelwana aqukiweyo kwi-navbar enemixholo yokukhanya ephendulayo ethi yonakale ngokuzenzekelayo kwindawo lg(enkulu) yokwahlukana.

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>

Lo mzekelo usebenzisa imvelaphi ( bg-light) kunye nezithuba ( me-auto, mb-2, mb-lg-0, me-2) iiklasi eziluncedo.

Uphawu

Inokusetyenziswa .navbar-brandkwizinto ezininzi, kodwa i-ankile isebenza ngcono, njengoko ezinye izinto zinokufuna iiklasi eziluncedo okanye izimbo zesiko.

Isicatshulwa

Yongeza isicatshulwa sakho phakathi kwento ethile .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>

Umfanekiso

Ungabuyisela okubhaliweyo ngaphakathi .navbar-brandkwifayile ye <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>

Umfanekiso kunye nesicatshulwa

Unokusebenzisa ezinye izinto ezongezelelweyo ukongeza umfanekiso kunye nesicatshulwa ngaxeshanye. Qaphela ukongezwa .d-inline-blockkunye .align-text-topnakwi <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

Ikhonkco lokujonga kwiNavbar yakhela .navkwiinketho zethu ngodidi lwazo lwesilungisi kwaye zifuna ukusetyenziswa kweeklasi ze-toggler kwisitayile esiphendulayo esifanelekileyo. Ukukhangela kwi-navbar kuya kukhula kuthathe indawo ethe tye kangangoko kunokwenzeka ukugcina imixholo yakho ye-navbar ilungelelaniswe ngokukhuselekileyo.

Yongeza .activeiklasi .nav-linkukubonisa iphepha langoku.

Nceda qaphela ukuba kufuneka udibanise aria-currentuphawu lwesiphumo 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>

Kwaye ngenxa yokuba sisebenzisa iiklasi kwii-navs zethu, unokunqanda indlela esekwe kuluhlu ngokupheleleyo ukuba uyathanda.

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 kwakhona ukwehla kwi-navbar yakho. Iimenu ezithotyiweyo zifuna into yokusonga yokubeka, ke qiniseka ukuba usebenzisa izinto ezahlukileyo kunye nezifakwe kwindlwane .nav-itemkwaye .nav-linknjengoko kubonisiwe ngezantsi.

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>

Iifom

Beka ulawulo lweefomu ezahlukeneyo kunye namalungu 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 zomntwana zangoku .navbarzokusetyenziswa uyilo oluguquguqukayo kwaye luya kuhlala lukhona justify-content: space-between. Sebenzisa izixhobo ezongezelelweyo eziguquguqukayo njengoko kufuneka ukulungisa le ndlela yokuziphatha.

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>

Amaqela ongeniso ayasebenza, nawo. Ukuba i-navbar yakho iyifomu epheleleyo, okanye ubukhulu becala ifom, ungasebenzisa <form>into njengesikhongozeli kwaye ugcine iHTML 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>

Amaqhosha ahlukeneyo axhaswa njengenxalenye yezi fomu ze-navbar, nazo. Oku kukwasisikhumbuzo esihle sokuba izixhobo zolungelelwaniso ezithe nkqo zinokusetyenziselwa ukulungelelanisa izinto ezinobungakanani obahlukeneyo.

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>

Isicatshulwa

Iibar zeNavbar zinokuqulatha amasuntswana okubhaliweyo ngoncedo lwe .navbar-text. Olu didi luhlengahlengisa ulungelelwaniso oluthe nkqo kunye nezithuba ezithe tye kwimitya yokubhaliweyo.

html

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

Hlanganisa kwaye udibanise nezinye izixhobo kunye nezinto eziluncedo njengoko kufuneka.

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 zemibala

Entsha kwi-v5.2.0: Umxholo we-Navbar ngoku unikwe amandla ziinguqu ze-CSS kwaye .navbar-lightiyekisiwe. Uguquguquko lwe-CSS lusetyenziswa ku- .navbar, ukungagqibeki kwinkangeleko "yokukhanya", kwaye inokukhutshwa ngaphezulu nge .navbar-dark.

Imixholo yeNavbar ilula kunakuqala enkosi kwiBootstrap yendibaniselwano yeSass kunye neCSS variables. Okungagqibekanga yi "navbar ekhanyayo" yethu ukuze isetyenziswe ngemibala ekhanyayo yangasemva, kodwa unokufaka isicelo kwimibala engasemva .navbar-darkemnyama. Emva koko, yenza ngokwezifiso kunye .bg-*nezixhobo.

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

Izikhongozeli

Nangona kungafunekiyo, ungayisonga i-navbar kwindawo yokuyibeka .containerembindini kwiphepha-nangona qaphela ukuba isikhongozeli sangaphakathi sisafuneka. Okanye unokongeza isikhongozeli ngaphakathi kwindawo .navbarkuphela imixholo ye navbar emileyo okanye engatshintshiyo .

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 nasiphi na isikhongozeli esiphendulayo ukuguqula ukuba banzi umxholo kwi-navbar yakho obonisiweyo.

html

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

Ukubekwa

Sebenzisa indawo yethu eluncedo ukubeka ii-navbar kwindawo ezingezizo-static. Khetha ukusuka kwisigxina ukuya phezulu, ugxininise ukuya ezantsi, unamathele phezulu (umqulu kunye nephepha de ufikelele phezulu, uze uhlale apho), okanye unamathele ezantsi (umqulu kunye nephepha uze ufike ezantsi, emva koko uhlale. Pha).

Sebenzisa iinavbar ezizinzileyo position: fixed, okuthetha ukuba zitsalwa kumsinga oqhelekileyo weDOM kwaye zinokufuna iCSS yesiko (umzekelo, padding-topkwi <body>) ukunqanda ukugqithelana nezinye izinto.

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

Yongeza .navbar-nav-scrollkwi .navbar-nav(okanye elinye icandelo elisezantsi le-navbar) ukwenza ukuskrola ngokuthe nkqo ngaphakathi kwemixholo eshukunyiswa kwinavbar edilikayo. Ngokungagqibekanga, ukuskrola kukhaba ngaphakathi 75vh(okanye i-75% yobude bendawo yokujonga), kodwa ungayibhala ngaphezulu loo nto ngepropati yesiko leCSS yasekuhlaleni --bs-navbar-heightokanye izimbo zesiko. Kwiindawo zokujonga ezinkulu xa i-navbar yandisiwe, umxholo uya kuvela njengoko usenza kwi-navbar engagqibekanga.

Nceda uqaphele ukuba olu kuziphatha luza ne-drawback enokubakho ye-- overflowxa kumiselwa overflow-y: auto(ifuneka ukuskrola umxholo apha), overflow-xilingana auto, eya kutyala umxholo othe tye.

Nanku umzekelo we navbar usebenzisa .navbar-nav-scrollnge style="--bs-scroll-height: 100px;", kunye nezinto eziluncedo zomda ezongezelelweyo zesithuba esisiso.

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 okuphendulayo

Iibar zeNavbar zinokusebenzisa .navbar-toggler, .navbar-collapse, kunye .navbar-expand{-sm|-md|-lg|-xl|-xxl}neeklasi ukumisela xa umxholo wabo uwela emva kweqhosha. Ngokudityaniswa nezinye izinto eziluncedo, unokukhetha ngokulula ixesha lokubonisa okanye ukufihla izinto ezithile.

Kwiinavbar ezingasoze zidilike, yongeza .navbar-expandiklasi kwi navbar. Kwiinavbar ezihlala zisihla, musa ukongeza naluphi na .navbar-expanduhlobo.

Toggler

Iziguquli zeNavbar zilungelelaniswe ngokushiyekileyo, kodwa ukuba zilandela into yakowenu njenge .navbar-brand, ziya kulungelelaniswa ngokuzenzekelayo ekunene. Ukubuyisela umva uphawu lwakho kuya kubuyisela umva ukubekwa kwesiguquli. Ngezantsi yimizekelo yeendlela ezahlukeneyo zokuguqula.

Ngaphandle .navbar-brandkokuboniswa kweyona ndawo incinci yokuphumla:

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 lebrendi eliboniswe ekhohlo kunye ne-toggler ekunene:

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>

Ngokuguqula ngasekhohlo kunye negama lebhrendi ekunene:

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>

Umxholo wangaphandle

Ngamanye amaxesha ufuna ukusebenzisa iplagin yokudilika ukuqalisa into yesikhongozeli somxholo ohleli ngaphandle kwe- .navbar. Kuba iplagin yethu isebenza idkwaye data-bs-targetihambelana, oko kwenziwa ngokulula!

Umxholo ogotyiweyo

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

Xa usenza oku, sicebisa ukuquka iJavaScript eyongezelelweyo ukuhambisa ugxininiso ngokwenkqubo kwisikhongozeli xa sivulwa. Kungenjalo, abasebenzisi bebhodi yezitshixo kunye nabasebenzisi beetekhnoloji ezincedisayo baya kuba nobunzima bokufumana umxholo osanda kutyhilwa - ngakumbi ukuba isikhongozeli esivuliweyo siza phambi komguquli kwisakhiwo soxwebhu. Sikwacebisa ukuba uqinisekise ukuba umguquli uneempawu, ezikhomba kwisikhongozeli aria-controlssomxholo id. Ngokwethiyori, oku kuvumela abasebenzisi betekhnoloji abancedisayo ukuba batsibe ngokuthe ngqo ukusuka kwi-toggler ukuya kwisingxobo esisilawulayo-kodwa inkxaso yale nto okwangoku inqabile.

I-offcanvas

Guqula i-navbar yakho eyandayo nedilikayo ibe yidrowa ye-offcanvas enecandelo le- offcanvas . Sandisa zombini izitayile ezingagqibekanga ze-offcanvas kwaye sisebenzise .navbar-expand-*iiklasi zethu ukwenza ibar esecaleni eguqukayo neguqukayo.

Kulo mzekelo ungezantsi, ukwenza i-offcanvas navbar ehlala iwile kuzo zonke iindawo zoqhawulo, shiya .navbar-expand-*iklasi ngokupheleleyo.

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>

Ukwenza i navbar ye offcanvas eyandisa kwi navbar eqhelekileyo kwindawo ethile yoqhawulo 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>

Xa usebenzisa i-offcanvas kwi-navbar emnyama, qaphela ukuba unokufuna ukuba nemvelaphi emnyama kumxholo we-offcanvas ukunqanda ukuba umbhalo ungafundeki. Kulo mzekelo ungezantsi, songeza .navbar-darkkunye .bg-darkne .navbar, .text-bg-darkukuya .offcanvas, .dropdown-menu-darkukuya .dropdown-menu, kunye nesitayile esifanelekileyo kunye ne-offcanvas emnyama .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

Izinto eziguquguqukayo

Ifakwe kwi-v5.2.0

Njengenxalenye yendlela yokuguquguquka kwe-Bootstrap ye-CSS, ii-navbar ngoku zisebenzisa iiguquguquko ze-CSS zasekhaya .navbarukuze ziphuculwe ixesha lokwenyani. Amaxabiso okuguquguquka kweCSS asetwe ngeSass, ngoko ke ukwenziwa ngokwezifiso kweSass kusaxhaswa, nako.

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

Ezinye izinto ezongezelelweyo zeCSS zikwakhona kwi .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);

Ukwenziwa ngokwezifiso ngokuguquguquka kweCSS kunokubonwa .navbar-darkeklasini apho sibhala ngaphezulu amaxabiso athile ngaphandle kokongeza abakhethi abaphindwa kabini beCSS.

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

Iinguqu zeSass

Izinto eziguquguqukayo kuzo zonke iibar ze-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;

Izinto eziguquguqukayo ze- 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

Iiklasi eziphendulayo zenavbar zandisa/zokuwa (umzekelo, .navbar-expand-lg) zidityaniswe $breakpointsnemephu kwaye zenziwe nge-loop kwi 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;
          }
        }
      }
    }
  }
}