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.

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.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Kpɔɖeŋu sia zãa megbe ( bg-light) kple dometsotso ( my-2, my-lg-0, me-sm-0, my-sm-0) ƒ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.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

Nɔnɔmetata

Àte ŋu atsɔ nuŋɔŋlɔ si le eme la .navbar-brandaɖɔli <img>.

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

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

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

Nav

Navbar 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 me hã adzi ɖe edzi be wòaxɔ teƒe geɖe le tsia dzi alesi nàte ŋui 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 .

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

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ɔ̃.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Kpekpeɖeŋugbalẽviwo

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

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

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.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

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.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

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.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

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.

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

Amadedewo ƒe ɖoɖowo

Tanyawo ɖoɖo ɖe navbar la me menɔ bɔbɔe nenema gbegbe kpɔ o le tanya ƒe klasswo kple background-colordɔwɔnuwo ƒe ƒuƒoƒo ta. Tia wo dometɔ aɖewo .navbar-lightbe nàzã kple megbe amadede siwo me kɔ, alo .navbar-darkna megbe amadede siwo do viviti. 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 navbar-light" 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 .

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

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

<nav class="navbar navbar-expand-lg navbar-light 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 position utilities tsɔ da navbars ɖe non-static positions me. Tiae tso esiwo woɖo ɖe etame, esiwo woɖo ɖe ete, alo esiwo wotsɔ lé ɖe etame (aʋu axaa vaseɖe esime wòaɖo etame, emegbe wòanɔ afima). 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.

De dzesii hã be .sticky-topzãa position: sticky, si womewɔa dɔ bliboe le web-browser ɖesiaɖe me o .

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

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.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

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 wokplɔ nɔvi ƒe akpa aɖe abe a ene ɖo .navbar-brandla, 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:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

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 gota le .navbar. Esi míaƒe plugin la wɔa dɔ le idkple data-bs-targetmatching dzi ta la, esia wɔwɔ bɔbɔe!

Collapsed content

Toggleable via the navbar brand.

<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Collapsed content</h5>
    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

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 plugin. 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ŋ.

<nav class="navbar navbar-light bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

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-light navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

Sass ƒe nyawo

Nusiwo trɔna

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);

$navbar-light-brand-color:                $navbar-light-active-color;
$navbar-light-brand-hover-color:          $navbar-light-active-color;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

Xatsa

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: $navbar-nav-link-padding-x;
            padding-left: $navbar-nav-link-padding-x;
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas-header {
          display: none;
        }

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

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

Navbar ƒe ŋkɔ

Ale si wòwɔa dɔe

Nyatakaka siwo wodo alɔe

Nudzadzra ŋkɔ

Nuŋɔɖi

Nɔnɔmetata

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

Nav

Kpekpeɖeŋugbalẽviwo

Nuŋɔɖi

Amadedewo ƒe ɖoɖowo

Nugoewo me

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

Agbalẽxatsaxatsa

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

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

Nya siwo le egodo

Collapsed content

Offcanvas ƒe akpa aɖe

Sass ƒe nyawo

Nusiwo trɔna

Xatsa

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