Trɔ yi nya veviwo gbɔ Trɔ yi docs ƒe mɔfiamewo dzi
Check
in English

Navbar ƒe ŋkɔ

Nuŋlɔɖiwo kple kpɔɖeŋuwo na Bootstrap ƒe tanya sesẽ si ɖoa nya ŋu, si nye navbar. Kpekpeɖeŋunana na adzɔnu ƒe dzeside, mɔfiame, kple bubuwo hã le eme, si me kpekpeɖeŋu nana míaƒe collapse plugin hã le.

Le axa sia dzi

Ale si wòwɔa dɔe

Nusiwo wòle be nànya hafi adze navbar la gɔmee nye esi:

  • Navbars hiã na wrapping .navbarkple .navbar-expand{-sm|-md|-lg|-xl|-xxl}na ŋuɖoɖo ƒe collapsing kple amadede ƒe ɖoɖo ƒe klasswo.
  • Navbars kple wo me nyawo nyea tsi le gɔmedzedzea me. Trɔ nugoe la be nàɖo seɖoƒe na woƒe kekeme si le tsia dzi le mɔ vovovowo nu.
  • Zã míaƒe dometsotso kple flex utility klasswo hena dometsotso kple ɖoɖowɔwɔ dzi kpɔkpɔ le navbars me.
  • Navbarwo wɔa dɔ le gɔmedzedzea me, gake àte ŋu atrɔ asi le wo ŋu bɔbɔe be nàtrɔ ema. Nuwɔna si woatsɔ aɖo nya ŋui nɔ te ɖe míaƒe Collapse JavaScript plugin dzi.
  • Kpɔ egbɔ be woate ŋu akpɔe to nu aɖe zazã <nav>me alo, ne èle nu si sɔ gbɔ wu abe a ene zãm la <div>, tsɔ a kpe role="navigation"ɖe navbar ɖesiaɖe ŋu be nàde dzesii tẽ be enye nuto si ɖe dzesi na kpekpeɖeŋu mɔ̃ɖaŋunuwo zãlawo.
  • Fia nu si li fifia to zazã aria-current="page"na axa si li fifia alo aria-current="true"na nu si li fifia le ƒuƒoƒo aɖe me.
  • Yeye le v5.2.0 me: Woateŋu atsɔ CSS tɔtrɔ siwo woɖo ɖe .navbargɔmeɖoanyi ƒe klass la ƒe tanya na Navbars. .navbar-lightwoɖe asi le eŋu eye .navbar-darkwogbugbɔ ŋlɔe be wòaɖe asi le CSS ƒe tɔtrɔwo ŋu tsɔ wu be woatsɔ atsyã bubuwo akpe ɖe eŋu.
Akpa sia ƒe nɔnɔmetata ƒe ŋusẽkpɔɖeamedzi nɔ te ɖe prefers-reduced-motionnyadzɔdzɔgblɔmɔnuwo ƒe nyabiasea dzi. Kpɔ míaƒe mɔnukpɔkpɔwo ŋuti nuŋlɔɖiwo ƒe akpa si woɖe dzi kpɔtɔ .

Nyatakaka siwo wodo alɔe

Navbars va kple kpekpeɖeŋu si wotu ɖe eme na akpa sue aɖewo. Tia nusiwo gbɔna la dometɔ ɖeka ne ehiã:

  • .navbar-brandna wò dɔwɔƒe, adzɔnu, alo dɔa ƒe ŋkɔ.
  • .navbar-navna mɔfiame si kɔkɔ bliboe eye wòle bɔbɔe (si me kpekpeɖeŋu nana nusiwo wotsɔna ƒua gbe hã le).
  • .navbar-togglerbe woazã kple míaƒe collapse plugin kple navigation toggling nuwɔna bubuwo.
  • Flex kple dometsotso utilities na ɖesiaɖe form dziɖuɖu kple nuwɔna.
  • .navbar-texthena nuŋɔŋlɔ ƒe ka siwo le titina le tsitrenu tsɔtsɔ kpe ɖe eŋu.
  • .collapse.navbar-collapsena ƒuƒoƒo kple navbar me nyawo ɣla to dzila ƒe breakpoint dzi.
  • Tsɔ tiatia aɖe kpee .navbar-scrollbe nàɖo a max-heighteye nàʋu navbar me nyawo si keke ta .

Kpɔɖeŋu aɖee nye esi le akpa sue siwo katã le kekeli-tanya navbar si ɖoa eŋu me si dzena le eɖokui si le lg(gã) ƒe gbagbãƒe la ŋu.

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>

Kpɔɖeŋu sia zãa megbe ( bg-light) kple dometsotso ( me-auto, mb-2, mb-lg-0, me-2) ƒe dɔwɔnu ƒe hatsotsowo.

Nudzadzra ŋkɔ

Woateŋu awɔ The .navbar-brandŋudɔ ɖe akpa akpa gãtɔ ŋu, gake seke aɖe wɔa dɔ nyuie wu, elabena nu aɖewo ateŋu abia utility classes alo custom styles.

Nuŋɔɖi

Tsɔ wò nuŋɔŋlɔa kpe ɖe element aɖe me kple .navbar-brandklass la.

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>

Nɔnɔmetata

Àte ŋu atsɔ nuŋɔŋlɔ si le eme la .navbar-brandaɖɔli <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>

Nɔnɔmetata kple nuŋɔŋlɔ

Àte ŋu azã dɔwɔnu bubu aɖewo hã atsɔ atsɔ nɔnɔmetata kple nuŋɔŋlɔ akpe ɖe eŋu le ɣeyiɣi ɖeka me. De dzesi alesi wotsɔ kpe ɖe eŋu .d-inline-blockkple esi wotsɔ kpe .align-text-topɖe eŋu <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>

Navbar mɔfiame kadodowo tu míaƒe .navtiatiawɔblɔɖe kple woawo ŋutɔ ƒe modifier klass eye bia toggler klasswo zazã hena ŋuɖoɖo ƒe atsyã nyuitɔ. Navigation le navbars hã adzi ɖe edzi be wòaxɔ teƒe geɖe le tsia dzi alesi wòanya wɔe be wò navbar me nyawo nanɔ ɖeka nyuie.

Tsɔ .activeklass la kpe ɖe eŋu .nav-linkbe nàfia axa si dzi nèle fifia.

Taflatse de dzesii be ele be nàtsɔ aria-currentnɔnɔmea hã akpe ɖe active la .nav-linkŋu .

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>

Eye esi míezãa klasswo na míaƒe navs ta la, àte ŋu aƒo asa na mɔnu si wotu ɖe xexlẽdzesiwo dzi la keŋkeŋ ne èlɔ̃.

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>

Àte ŋu azã nusiwo le wò navbar la hã. Menu siwo le tsia dzi la hiã na nuxaxa ƒe akpa aɖe hena teƒeɖoɖo, eyata kpɔ egbɔ be yezã akpa vovovowo kple esiwo wotsɔ ƒo ƒui na .nav-itemkple .nav-linkabe alesi woɖee fia le ete ene.

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>

Kpekpeɖeŋugbalẽviwo

Da nɔnɔmetata ƒe dziɖuɖu kple akpa vovovowo ɖe navbar me:

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>

Enumake vi elements of .navbaruse flex layout eye wòaɖo default ɖe justify-content: space-between. Zã flex utilities bubuwo ne ehiã be nàtrɔ asi le nuwɔna sia ŋu.

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>

Nusiwo wotsɔ de eme ƒe ƒuƒoƒowo hã wɔa dɔ. Ne wò navbar nye agbalẽvi blibo, alo akpa gãtɔ nye agbalẽvi la, àteŋu azã <form>element la abe nugoe ene eye nàdzra HTML aɖewo ɖo.

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>

Wodoa alɔ abɔta vovovowo abe navbar ƒe nuŋlɔɖi siawo ƒe akpa aɖe ene, hã. Esia hã nye ŋkuɖodzinu gã aɖe be woate ŋu azã vertical alignment utilities atsɔ aɖo nusiwo ƒe lolome le vovovo la ɖe ɖoɖo nu.

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>

Nuŋɔɖi

Navbars ate ŋu anye nuŋɔŋlɔ suesuesuewo to kpekpeɖeŋu nana .navbar-text. Klass sia trɔa asi le nuŋɔŋlɔ ƒe ka siwo le tsitrenu kple dometsotso si le tsia dzi ŋu.

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

Tsɔ akpa bubuwo kple nuzazãwo tsaka eye nàtsɔe asɔ kple wo nɔewo ne ehiã.

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>

Amadedewo ƒe ɖoɖowo

Nu yeye le v5.2.0 me: Navbar ƒe tanya nye CSS tɔtrɔwo fifia eye .navbar-lightwoɖe asi le eŋu. Wozãa CSS ƒe tɔtrɔwo ɖe .navbar, si woɖo ɖi na “kekeli” ƒe dzedzeme, eye woate ŋu atsɔ .navbar-dark.

Navbar ƒe tanyawo le bɔbɔe wu tsã le Bootstrap ƒe Sass kple CSS tɔtrɔwo ƒe ƒuƒoƒo ta. Nusi woɖo ɖie nye míaƒe “light navbar” si míazã kple megbe amadede siwo me kɔ, gake àte ŋu abia .navbar-darkmegbe amadede siwo do viviti hã. Emegbe, trɔ asi le eŋu kple .bg-*dɔwɔnu siwo wozãna.

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

Nugoewo me

Togbɔ be mehiã o hã la, àteŋu abla navbar ɖe a me .containeratsɔ aɖo titina ɖe axa aɖe dzi–togbɔ be de dzesii be nugoe ememetɔ gakpɔtɔ hiã hã. Alo àteŋu atsɔ nugoe aɖe akpe ɖe eŋu be .navbarwòatsɔ aɖo titina navbar si le etame si woɖo alo esi meʋãna o me ko .

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>

Zã nugoe siwo ɖoa nya ŋu la dometɔ ɖesiaɖe nàtsɔ atrɔ alesi gbegbe wò navbar me nyawo keke tae.

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

Amewo ɖoɖo ɖe teƒe aɖe

Zã míaƒe ɖoƒe ƒe dɔwɔnuwo tsɔ da navbars ɖe non-static positions me. Tiae tso esiwo woɖo ɖe etame, esiwo woɖo ɖe ete, esiwo wotsɔ lé ɖe etame (woatsɔ axaa ŋlɔe vaseɖe esime wòaɖo etame, emegbe wòanɔ afima), alo esiwo wotsɔ bla ɖe ete (atsɔ axaa abla vaseɖe esime wòaɖo ete, emegbe wòanɔ anyi afi ma).

Fixed navbars zãa position: fixed, si fia be wohe wo tso DOM ƒe sisi si sɔ me eye ateŋu abia CSS tɔxɛ (le kpɔɖeŋu me, padding-tople <body>) dzi be woaxe mɔ ɖe ƒoƒo ɖe nu bubuwo ŋu nu.

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>

Agbalẽxatsaxatsa

Tsɔ kpe .navbar-nav-scrollɖe .navbar-nav(alo navbar ƒe akpa sue bubu) ŋu be wòana ʋuʋu le tsitrenu nawɔ dɔ le navbar si wogbã ƒe nya siwo woate ŋu atrɔ la me. Le gɔmedzedzea me la, ʋuʋu dzea egɔme le 75vh(alo 75% le nukpɔkpɔ ƒe kɔkɔme), gake àteŋu aɖe ema ɖa kple CSS ƒe nɔnɔme tɔxɛ --bs-navbar-heightalo atsyã tɔxɛ siwo le mia gbɔ. Le nukpɔkpɔ gãwo me ne wokeke navbar la ɖe enu la, emenyawo adze abe alesi wòdzena le navbar si woɖo ɖi me ene.

Taflatse de dzesii be nuwɔna sia va kple kuxi aɖe si ate ŋu anye overflow—ne ɖoɖo overflow-y: auto(si hiã be woaʋu emenyawo le afisia), overflow-xsɔ kple auto, si atso nya aɖewo siwo le tsia dzi.

Kpɔɖeŋu navbar zã .navbar-nav-scrollkple style="--bs-scroll-height: 100px;", kple margin utilities aɖewo kpee hena dometsotso nyuitɔ kekeakee nye esi.

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>

Nuwɔna siwo wɔa nu ɖe ​​ame ŋu

Navbarwo ateŋu azã .navbar-toggler, .navbar-collapse, kple .navbar-expand{-sm|-md|-lg|-xl|-xxl}klasswo atsɔ anya ɣeyiɣi si woƒe nyatakakawo adze anyi le abɔta aɖe megbe. Ne ètsɔ dɔwɔnu bubuwo kpe ɖe eŋu la, àte ŋu atia ɣeyiɣi si nàɖe nu aɖewo koŋ afia alo aɣla wo bɔbɔe.

Le navbar siwo medzena gbeɖe o gome la, tsɔ .navbar-expandklass la kpe ɖe navbar la dzi. Le navbar siwo dzea anyi ɣesiaɣi gome la, mègatsɔ .navbar-expandklass aɖeke kpee o.

Toggler si wotsɔna trɔa asi le nu ŋu

Navbar togglers nye miame-ɖoɖo ɖe ɖoɖo nu le gɔmedzedzea me, gake ne wodze nɔvi ƒe akpa aɖe abe a ene yome la .navbar-brand, woaɖo wo ɖe ɖoɖo nu le wo ɖokui si ɖe ɖusime ɖaa. Ne ètrɔ wò dzesidea la, atrɔ asi le toggler la ƒe ɖoɖo ŋu. Toggle ƒe atsyã vovovowo ƒe kpɔɖeŋuwo le ete.

Esi womeɖe naneke .navbar-brandfia le gbagbãƒe suetɔ kekeake o ta la:

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>

Esi woɖe adzɔnu ƒe ŋkɔ fia le miame eye woɖe toggler fia le ɖusime la:

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>

Ne ètsɔ toggler le miame eye ŋkɔ si le adzɔnu ƒe ŋkɔ me le ɖusime la:

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>

Nya siwo le egodo

Ɣeaɖewoɣi la, èdi be yeazã collapse plugin la atsɔ aʋu nugoe ƒe akpa aɖe na nya siwo le ɖoɖo nu la nɔ anyi ɖe .navbar. Esi míaƒe plugin la wɔa dɔ le idkple data-bs-targetmatching dzi ta la, esia wɔwɔ bɔbɔe!

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>

Ne èwɔ esia la, míele aɖaŋu ɖom be nàde JavaScript bubuwo eme be nàtsɔ ɖoɖowɔɖia aʋu nusi dzi nèle ŋku ɖom la ayi nugoe la me ne woʋui. Ne menye nenema o la, anɔ eme be asesẽ na keyboard zãlawo kple kpekpeɖeŋu mɔ̃ɖaŋunuwo zazãlawo be woake ɖe nya yeye siwo woɖe fia ŋu - vevietɔ ne nugoe si woʋu la va do ŋgɔ na toggler la le nuŋlɔɖia ƒe wɔwɔme me. Míele aɖaŋu ɖom hã be nàkpɔ egbɔ be nɔnɔmea le toggler la si aria-controls, nàfia asi the idof the content container. Le susu me la, esia ɖea mɔ na kpekpeɖeŋu mɔ̃ɖaŋununya zãlawo be woati kpo tẽ tso toggler la me ayi nugoe si dzi wòkpɔna me–gake kpekpeɖeŋu na esia nye patchy kura fifia.

Offcanvas ƒe akpa aɖe

Trɔ wò navbar si le kekem ɖe enu eye wòle gbagbãm la wòazu offcanvas drawer kple offcanvas component . Míekekea offcanvas ƒe atsyã gbãtɔwo siaa ɖe enu eye míezãa míaƒe .navbar-expand-*klasswo tsɔ wɔa mɔfiame ƒe axadzinu si trɔna eye wòte ŋu trɔna bɔbɔe.

Le kpɔɖeŋu si le ete me la, be nàwɔ offcanvas navbar si nɔa anyi ɣesiaɣi le breakpoints katã dzi la, ɖe .navbar-expand-*klass la ɖa keŋkeŋ.

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>

Be nàwɔ offcanvas navbar si kekena ɖe enu wòzua navbar si sɔ le breakpoint aɖe koŋ abe lg, zã .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>

Ne èle offcanvas zãm le navbar doviviti me la, nyae be ɖewohĩ ahiã be nàna megbenya doviviti nanɔ offcanvas me nyawo dzi be nuŋɔŋlɔa nagaxlẽ o. Le kpɔɖeŋu si le ete me la, míetsɔa .navbar-darkkple kpena .bg-darkɖe .navbar, .text-bg-darkɖe .offcanvas, .dropdown-menu-darkɖe .dropdown-menu, kple .btn-close-whiteto ŋu .btn-closehena atsyã nyuitɔ kple offcanvas viviti.

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 ƒe ƒuƒoƒo

Nusiwo trɔna

Wotsɔe kpe ɖe eŋu le v5.2.0 me

Abe Bootstrap ƒe CSS tɔtrɔwo ƒe mɔnu si le tɔtrɔm ƒe akpa aɖe ene la, navbarwo zãa teƒea ƒe CSS tɔtrɔwo le fifia .navbarhena ɣeyiɣi ŋutɔŋutɔ ƒe tɔtrɔwo ƒe ŋgɔyiyi si wodo ɖe ŋgɔ. Woɖo asixɔxɔwo na CSS ƒe tɔtrɔwo to Sass dzi, eyata Sass ƒe tɔtrɔwɔwɔ gakpɔtɔ doa alɔ, hã.

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

CSS ƒe tɔtrɔ bubu aɖewo hã le .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);

Woateŋu akpɔ tɔtrɔwɔwɔ to CSS tɔtrɔwo dzi le .navbar-darkklass la dzi afisi míeɖea asixɔxɔ tɔxɛwo ɖa le evɔ míetsɔa CSS tiatiawɔla siwo wogbugbɔ ŋlɔ kpena ɖe eŋu o.

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

Sass ƒe tɔtrɔwo

Trɔtrɔwo na navbarwo katã:

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

Trɔtrɔwo na viviti me navbar :

$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 ƒe ʋuƒo

Woƒoa navbar kekeɖenu/agbã ƒe klass siwo ɖoa nya ŋu (le kpɔɖeŋu me, .navbar-expand-lg) nu ƒu kple $breakpointsanyigbatata eye wowɔa wo to loop me le 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;
          }
        }
      }
    }
  }
}