Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
Check
in English

Navbar ye

Sɛbɛnw ni misaliw Bootstrap ka navigatiɔn kuncɛ barikama, min bɛ jaabi di, n’o ye navbar ye. A bɛ dɛmɛ don a la ka ɲɛsin markali ma, navigatiɔn ani fɛn wɛrɛw ma, o la, dɛmɛ bɛ sɔrɔ an ka collapse plugin la.

Nin ɲɛ in kan

A bɛ baara kɛ cogo min na

Aw ka kan ka fɛn minnu dɔn sani aw ka navbar daminɛ, olu filɛ nin ye:

  • Navbars bɛ ɲini wrapping .navbarni .navbar-expand{-sm|-md|-lg|-xl|-xxl}for responsive collapsing ani color scheme classes.
  • Navbarw n’u kɔnɔkow ye ji ye ka da a kan. Aw bɛ minɛn Changer walasa ka dan sigi u bonya tilennen na cogoya wɛrɛw la.
  • Baara kɛ ni an ka spacing ani flex utility classes ye walasa ka spacing ni alignment kɔlɔsi navbars kɔnɔ.
  • Navbars bɛ jaabi di ka da a kan, nka i bɛ se k’u ladilan nɔgɔya la walasa k’o Changer. Jaabi kɛcogo bɛ bɔ an ka Collapse JavaScript plugin de la.
  • Aw ye aw janto sɔrɔli la ni baara kɛli ye ni <nav>fɛn dɔ ye walima, ni aw bɛ baara kɛ ni fɛn dɔ ye min ka ca ni fɛn bɛɛ ye i n’a fɔ a <div>, aw bɛ a fara role="navigation"navbar bɛɛ kan walasa k’a jira k’a jɛya ko a ye yɔrɔ taamasiyɛn ye dɛmɛni fɛɛrɛw baarakɛlaw bolo.
  • Fɛn min bɛ yen sisan, o jira ni baara kɛli aria-current="page"ye ka ɲɛsin ɲɛ min ma sisan walima aria-current="true"fɛn min bɛ sen na sisan, o bɛ seti dɔ kɔnɔ.
  • Ko kura v5.2.0 kɔnɔ: Navbarw bɛ se ka kɛ barokun ye ni CSS fɛn caman sɛgɛsɛgɛli ye minnu bɛ scope ka se .navbarbasigi kalasi ma. .navbar-lighta bɔra baara la ani .navbar-darka sɛbɛnna kokura walasa ka CSS fɛn caman sɛgɛsɛgɛli kɛ sanni ka cogoya wɛrɛw fara a kan.
Nin yɔrɔ in ka animation nɔ bɛ bɔ prefers-reduced-motionmedia ɲininkali de la. aw ye an ka sɔrɔli sɛbɛnw yɔrɔ lajɛ min bɛ lamaga dɔgɔyalen na .

Kɔnɔkow minnu bɛ dɛmɛ

Navbarw bɛ na ni dɛmɛni ye min bɛ don a kɔnɔ ka ɲɛsin bolomafara fitinin dɔw ma. Aw bɛ ninnu sugandi ni aw mago bɛ a la:

  • .navbar-brandka ɲɛsin i ka sosiyete, i ka fɛn dilannen, walima i ka porozɛ tɔgɔ ma.
  • .navbar-navwalasa ka navigatiɔn dafalen ni nɔgɔya sɔrɔ (dɛmɛni fana sen bɛ o la ka ɲɛsin jiginɛw ma).
  • .navbar-togglerka baara kɛ ni an ka collapse plugin ye ani navigation toggling kɛcogo wɛrɛw.
  • Flex ani spacing utilities ka ɲɛsin foroko kunkankow ni walew bɛɛ ma.
  • .navbar-textwalasa ka sɛbɛnniw sɛrɛw fara ɲɔgɔn kan minnu bɛ cɛmancɛ jɔlen na.
  • .collapse.navbar-collapseka navbar kɔnɔkow kulu ni u dogo bangebaga ka kariyɔrɔ dɔ fɛ.
  • a bɛ sugandi dɔ fara a kan .navbar-scrollwalasa ka a sigi max-heightani ka navbar kɔnɔkow ɲɛfɔlenw sɛgɛsɛgɛ .

Nin ye misali ye min bɛ yɔrɔ fitininw bɛɛ la minnu bɛ jaabi yeelen-ko-ɲɛnabɔ-navbar kɔnɔ min bɛ bin a yɛrɛma lg(ba) kariyɔrɔ la.

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

Nin misali in bɛ baara kɛ ni kɔkanna ( bg-light) ani yɔrɔjan ( me-auto, mb-2, mb-lg-0, me-2) nafalanw ye.

Mariki

The .navbar-brandbɛ se ka kɛ fɛn fanba la, nka ankɔri bɛ baara kɛ ka ɲɛ, bawo fɛn dɔw bɛ se ka nafalanw walima ladamu cogoyaw de wajibiya.

Masalabolo

Aw bɛ aw ka sɛbɛnni fara fɛn dɔ kan ni .navbar-brandkalan ye.

html ye 
<!-- 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>

Ja

Aw bɛ se ka sɛbɛnniw bila a nɔ na ni sɛbɛn .navbar-brandye <img>.

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

Ja ni sɛbɛnni

Aw bɛ se fana ka baara kɛ ni nafa wɛrɛw ye walasa ka ja ni sɛbɛnni dɔ fara a kan waati kelen na. Kɔlɔsili kɛ farali kan .d-inline-blockani .align-text-topa kan <img>.

html ye 
<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 navigation links bɛ jɔ an ka .navsugandiliw kan n’u yɛrɛ ka modifier class ye ani u bɛ baara kɛ ni toggler classes ye walasa ka jaabi kɛcogo ɲuman sɔrɔ. Navigation in navbars fana bɛna bonya walasa ka yɔrɔ horizontal caman minɛ i n’a fɔ a bɛ se ka kɛ cogo min na walasa i ka navbar kɔnɔkow ka to u cogo la ka ɲɛ.

.activeKalanso fara a kan .nav-linkwalasa ka ɲɛ min bɛ yen sisan, o jira.

aw k' a dɔn ko aw ka kan fana ka fɛn in fara a aria-currentkan .nav-link.

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

Wa ikomi an bɛ baara Kɛ ni kalanw ye an ka navs (navs) kama, i bɛ Se k'i yɛrɛ Kɔrɔbɔ list-based approach (list-based approach) la pewu n'i b'a fɛ.

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

Aw bɛ se fana ka baara kɛ ni fɛnw ye minnu bɛ bɔ aw ka navbar kɔnɔ. Meniw minnu bɛ jigin, olu bɛ fɛn dɔ de wajibiya min bɛ kɛ ka fɛnw siri, o la, aw ye aw jija ka baara kɛ ni fɛnw ye minnu bɛ danfara la ani minnu bɛ sigi sen kan .nav-itemani .nav-linki n’a fɔ a jiralen bɛ cogo min na jukɔrɔ.

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

Sɛbɛnw

Aw bɛ foroko kunkankow ni a yɔrɔw suguya caman bila navbar kɔnɔ:

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

Teliya la den elements of .navbaruse flex layout ani a bɛna default kɛ justify-content: space-between. Aw bɛ baara kɛ ni flex utilité wɛrɛw ye i n’a fɔ aw mago bɛ cogo min na walasa ka o kɛcogo ladilan.

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

Input kuluw bɛ baara kɛ, olu fana. N'i ka navbar ye foroko kuuru ye, walima a fanba ye foroko ye, i bɛ Se ka baara Kɛ ni <form>element (fɛn) ye i n'a fɔ minɛn ani ka HTML dɔw mara.

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

Butɔn suguya caman bɛ dɛmɛ ka kɛ nin navbar foroko ninnu dɔ ye, olu fana. Nin fana ye hakilijiginba ye ko jɛgɛncogo nafamafɛnw bɛ se ka kɛ ka fɛnw labɛn minnu bonya tɛ kelen ye.

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

Masalabolo

Navbarw bɛ se ka sɛbɛnni bitikiw sɔrɔ ni dɛmɛ ye .navbar-text. Nin kalan in bɛ ɲɔgɔndan jɔlenw ni janya tilennenw ladilan sɛbɛnniw sɛrɛw kama.

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

Aw bɛ a ɲagami ka a bɛn ni a yɔrɔ wɛrɛw ni nafamafɛnw ye ni aw mago bɛ a la.

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

Kulɛriw cogoyaw

Ko kura v5.2.0 kɔnɔ: Navbar theming bɛ baara kɛ sisan ni CSS fɛn caman sɛgɛsɛgɛli ye ani .navbar-lighta ma kɛ fɔlɔ. CSS bεε bε .navbarKε , ka da “yeelen” yecogo kan, wa u bε Se ka bεn ni .navbar-dark.

Navbar barokunw nɔgɔyara ka tɛmɛn fɔlɔ kan k’a sababu kɛ Bootstrap ka Sass ni CSS fɛn caman ɲɔgɔnna ye. Default ye an ka “light navbar” ye walasa ka baara kɛ ni kɔkanna kulɛriw ye minnu bɛ yeelen bɔ, nka i bɛ se ka sɛbɛn .navbar-darkdibi kɔkanna kulɛriw fana ɲini. O kɔfɛ, i ka customize ni .bg-*utilities ye.

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

Minɛnw

Hali n’a ma wajibiya, i bɛ se ka navbar dɔ siri a kɔnɔ .containerwalasa k’a cɛmancɛ kɛ ɲɛ dɔ kan–hali n’a y’a kɔlɔsi ko kɔnɔna minɛn dɔ wajibiyalen don hali bi. Walima aw bɛ se ka minɛn dɔ fara a kɔnɔ walasa ka sanfɛla navbar jɔlen walima jɔlen.navbar kɔnɔfɛnw cɛmancɛ dɔrɔn .

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

Baara kɛ ni jaabi minɛnw dɔ ye walasa ka i ka navbar kɔnɔkow jiracogo caman Changer.

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

Yɔrɔ bilali

Baara kɛ ni an ka jɔyɔrɔ nafamafɛnw ye walasa ka navbarw bila jɔyɔrɔw la minnu tɛ jɔ. Sugandili kɛ ka bɔ a jɔlen na ka taa sanfɛ, a jɔlen bɛ duguma, a bɛ nɔrɔ sanfɛ (a bɛ sɛbɛn ni ɲɛ ye fo ka se sanfɛ, o kɔ a bɛ to yen), walima a bɛ nɔrɔ duguma (a bɛ sɛbɛn ni ɲɛ ye fo ka se duguma, o kɔfɛ a bɛ to yen).

Navbar fixes bɛ baara Kɛ ni position: fixed, kɔrɔ ye k’u bɛ sama ka Bɔ DOM ka normal flow la wa u bɛ Se ka CSS ladamulen wajibiya (misali la, ) padding-topkan <body>walasa ka ɲɔgɔndan bali ni fɛn wɛrɛw ye.

html ye 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
html ye 
<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
html ye 
<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
html ye 
<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
html ye 
<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

Sɛbɛnni kɛli

A fara a .navbar-nav-scrollkan .navbar-nav(walima navbar sub-component wɛrɛ) walasa ka se ka sɛgɛsɛgɛli jɔlen kɛ navbar collapsed kɔnɔkow kɔnɔ minnu bɛ se ka wuli. Ka da a kan, sɛgɛsɛgɛli bɛ daminɛ 75vh(walima 75% filɛlikɛyɔrɔ janya la), nka i bɛ se k’o tiɲɛ ni sigida CSS ladamucogo ye --bs-navbar-heightwalima ladamucogo cogoyaw. Lajɛyɔrɔbaw la ni navbar (navbar) bɛ bonya, kɔnɔkow bɛna jira i n’a fɔ a bɛ kɛ cogo min na navbar default (navbar) kɔnɔ.

Aw k’a kɔlɔsi ko nin kɛcogo in bɛ na ni nafa dɔ ye min bɛ se ka kɛ overflow—ni sigili overflow-y: auto(a wajibiyalen don ka kɔnɔkow lajɛ yan), overflow-xo bɛ bɛn auto, min bɛna kɔnɔko tilennen dɔw tigɛ.

Nin ye misali ye navbar min bɛ baara kɛ .navbar-nav-scrollni ni style="--bs-scroll-height: 100px;", ni margin utilities dɔw ye walasa ka yɔrɔjan ɲuman sɔrɔ.

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

Taamacogo minnu bɛ jaabi di

Navbarw bɛ se ka baara kɛ ni .navbar-toggler, .navbar-collapse, ani .navbar-expand{-sm|-md|-lg|-xl|-xxl}kalanw ye walasa k’a dɔn u kɔnɔkow bɛ bin tuma min na butɔni dɔ kɔfɛ. Ni i farala nafamafɛn wɛrɛw kan, i bɛ se k’a sugandi nɔgɔya la waati min na i bɛna fɛn kɛrɛnkɛrɛnnenw jira walima k’u dogo.

Navbar minnu tɛ bin abada, olu bɛ .navbar-expandkalasi fara navbar kan. Navbar minnu bɛ bin tuma bɛɛ, aw kana .navbar-expandkalasi si fara a kan.

Toggler ye

Navbar togglers bɛ Labɛn numan fɛ ka da a kan, nka n’u tugura balimakɛ-yɔrɔ dɔ kɔ i n’a fɔ a .navbar-brand, u bɛ Labɛn u yɛrɛma ka Taa kinin fɛ kosɛbɛ. Ni i ye i ka taamasiyɛn kɔsegin, o bɛna toggler bilali kɔsegin. Toggle cogoya wɛrɛw misaliw bɛ duguma.

Ni a ma .navbar-brandjira kariyɔrɔ fitinin na:

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

Ni marka tɔgɔ jiralen bɛ kinin fɛ ani toggler bɛ kinin fɛ:

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

Ni toggler bɛ kinin fɛ ani brand tɔgɔ kinin fɛ:

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

Kɛnɛyako kɔnɔkow

Tuma dɔw la i b' a fɛ ka baara kɛ ni collapse plugin ye walasa ka minɛn dɔ daminɛ kɔnɔkow kama minnu sigilen bɛ sigicogo la .navbar. Bari an ka plugin bɛ baara Kɛ ni idani data-bs-targetmatching ye, o bɛ Kɛ nɔgɔya la!

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

N’i ​​y’o Kɛ, an b’a Fɔ ko i bɛ JavaScript wɛrɛw Dòn a la walasa ka sinsinnan Lase porogaramu fɛ ka Taa minɛn kɔnɔ n’a Dabɔra. N’o tɛ, a ka c’a la, klaviyeti baarakɛlaw ni dɛmɛni fɛɛrɛw baarakɛlaw bɛna gɛlɛya sɔrɔ ka kunnafoni kura jiralenw sɔrɔ - kɛrɛnkɛrɛnnenya la ni minɛn min dabɔra, o bɛ na ka kɔn toggler ɲɛ sɛbɛn in jɔcogo la. An b’a Fɔ fana ko i k’a Jira ko toggler (toggler) bɛ ni aria-controlsattribut (fɛn) ye, k’a Jira idko kɔnɔkow minɛn kɔnɔ. Teori la, o b’a to dɛmɛni fɛɛrɛbɔlaw bɛ se ka pan ka bɔ toggler la ka taa a bɛ minɛn min mara–nka dɛmɛ min bɛ o la sisan, o bɛ kɛ fɛn ye min tɛ fɛn caman kɛ.

Offcanvas ye

aw ka navbar min bɛ ka bonya ani min bɛ ka bin , aw bɛ o fɛn caman sɛmɛntiya ka kɛ fɛn ye min bɛ bɔ kanpaɲi kɔkan ni kanpaɲi yɔrɔ ye . An bɛ offcanvas default styles fila bɛɛ janya ani ka baara kɛ n’an ka .navbar-expand-*classes ye walasa ka navigation sidebar dynamique ani flexible dilan.

Misali min bɛ duguma, walasa ka navbar offcanvas dɔ Dabɔ min bɛ Dòn tuma bɛɛ kariyɔrɔ bɛɛ la, i ka .navbar-expand-*kalasi Bɔ a la pewu.

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

walasa ka navbar offcanvas dɔ da min bɛ bonya ka kɛ navbar normal ye breakpoint kɛrɛnkɛrɛnnen dɔ la i n' a fɔ lg, baara kɛ ni .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>

Ni aw bɛ baara kɛ ni offcanvas ye dibi la navbar kɔnɔ, aw k’a dɔn ko aw bɛ se ka kɛ ni kɔkanna dibi ye offcanvas kɔnɔkow kan walasa sɛbɛnni kana kɛ fɛn ye min tɛ se ka kalan. Misali min bɛ duguma, an bɛ fara .navbar-darkani .bg-darkkan .navbar, .text-bg-darkka fara .offcanvas, .dropdown-menu-darkkan .dropdown-menu, ani .btn-close-whiteka kan .btn-closewalasa ka cogoya ɲuman kɛ ni dibi offcanvas ye.

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

Yɛlɛma-yɛlɛmaw

A farala a kan v5.2.0 kɔnɔ

Bootstrap ka CSS fɛn caman sɛgɛsɛgɛli fɛɛrɛ min bɛ ka wuli, o dɔ ye, navbarw bɛ baara kɛ sisan ni sigida CSS fɛn caman sɛgɛsɛgɛli ye on .navbarwalasa ka waati yɛrɛyɛrɛ ladamucogo ɲɛ. Nafa minnu bɛ CSS fɛn caman sɛgɛsɛgɛli la, olu bɛ sigi Sass fɛ, o la Sass ka ladamuni bɛ dɛmɛ hali bi, o fana.

  --#{$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 fɛn caman wɛrɛw fana bɛ sɔrɔ .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);

Customization through CSS variables bɛ se ka ye .navbar-darkkalasi kan an bɛ nafa kɛrɛnkɛrɛnnenw wuli yɔrɔ min na k’a sɔrɔ an ma CSS sugandilan fila fara ɲɔgɔn kan.

  --#{$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 bεε bε bεn

Yɛlɛma minnu bɛ navbarw bɛɛ la:

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

Yɛlɛma minnu bɛ kɛ navbar dibi la : .

$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 ka wuluwulu

Responsive navbar expand/collapse classes (misali la, .navbar-expand-lg) bɛ fara ɲɔgɔn kan ni $breakpointskarti ye ka sɔrɔ ka bɔ loop fɛ in 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;
          }
        }
      }
    }
  }
}