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, collapse plugin, kple bubuwo hã le eme.

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}na ŋuɖoɖo ƒe collapsing kple amadede ƒe ɖoɖo ƒe klasswo.
  • Navbars kple wo me nyawo nyea tsi le gɔmedzedzea me. Zã nugoe siwo nàte ŋu awɔ le wo ɖokui si nàtsɔ aɖo seɖoƒe na woƒe kekeme si le tsia dzi.
  • 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.
  • Woɣlaa Navbarwo le gɔmedzedzea me ne wole agbalẽ tam. Zi wo dzi be woata wo to wo tsɔtsɔ kpe .d-printɖe .navbar. Kpɔ ɖeɖefia ƒe dɔwɔnu ƒe klass.
  • 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.
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.
  • .form-inlinena nɔnɔme ɖesiaɖe dzi kpɔkpɔ kple nuwɔnawo.
  • .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.

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">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

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

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

Anɔ eme be nɔnɔmetatawo tsɔtsɔ kpe ɖe eŋu .navbar-brandabia ɣesiaɣi be woawɔ atsyã alo dɔwɔnu siwo wowɔ ɖe ɖoɖo nu be woƒe lolome nasɔ nyuie. Kpɔɖeŋu aɖewo siwo míate ŋu aɖe afia lae nye esi.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</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.

Woate ŋu awɔ nɔnɔme siwo le dɔ wɔm—kple .active—be woatsɔ afia axa si li fifia ŋudɔ tẽ ɖe .nav-links alo wo dzila kplikplikpli .nav-items ŋu.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</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">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </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">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Kpekpeɖeŋugbalẽviwo

Da nɔnɔmetata ƒe dziɖuɖu kple akpa vovovowo ɖe navbar me kple .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</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">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Nusiwo wotsɔ de eme ƒe ƒuƒoƒowo hã wɔa dɔ:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <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="form-inline">
    <button class="btn btn-outline-success" 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">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</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">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</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ɔ ɖeka .navbar-lighthena zazã 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. 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">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

Ne nugoe la le wò navbar me la, woɖea eƒe horizontal padding ɖa le breakpoints siwo le anyi wu wò .navbar-expand{-sm|-md|-lg|-xl}klass si nèɖo. Esia kpɔa egbɔ be míele padding dzi ɖem ɖe edzi zi gbɔ zi eve madzemadzee le nukpɔkpɔ ƒe ʋɔtru siwo le ete dzi ne wò navbar la dze anyi o.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <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. Tia tso esiwo woɖo ɖe etame, esiwo woɖo ɖe ete, alo esiwo wotsɔ lé ɖe etame ŋu (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">
  <a class="navbar-brand" href="#">Default</a>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

Agbalẽxatsaxatsa

Tsɔ kpe .navbar-nav-scrollɖe .navbar-collapse(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 atsɔ atsyã siwo le fli me alo esiwo wowɔ ɖe ɖoɖo nu atsi tre ɖe ema ŋu. 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="max-height: 100px;", kple margin utilities aɖewo kpee hena dometsotso nyuitɔ kekeakee nye esi.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-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">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </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}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:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </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">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </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">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </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-targetmatching dzi ta la, esia wɔwɔ bɔbɔe!

<div class="fixed-top">
  <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">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

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.