Source

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.

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

Xlẽe yi edzi hena kpɔɖeŋu kple akpa sue siwo wodo alɔe ƒe xexlẽdzesiwo.

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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <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" href="#" tabindex="-1" aria-disabled="true">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 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.4/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.4/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" href="#" tabindex="-1" aria-disabled="true">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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Àte ŋu azã nusiwo le wò navbar nav me 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="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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 ɖeviwo elements le .navbarzazã me flex layout eye woawɔ default na 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 .containerbe wòanɔ titina le axa aɖe dzi alo nàtsɔ ɖeka akpe ɖe eŋu be wòanye titina navbar si le etame si woɖo alo static la me nyawo 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>

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

Navbars ateŋu azã .navbar-toggler, .navbar-collapse, kple .navbar-expand{-sm|-md|-lg|-xl}klasswo atsɔ atrɔ ne woƒe nyawo dze anyi ɖe 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 breakpoint si bɔbɔ wu me o 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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ʋã nya ɣaɣlawo le axaa ƒe akpa bubu. Esi míaƒe plugin la wɔa dɔ le idkple data-targetmatching dzi ta la, esia wɔwɔ bɔbɔe!

<div class="pos-f-t">
  <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>