Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
Check
in English

Navbar jedhama

Galmee fi fakkeenyota mataduree qajeelchaa humna guddaa qabu, deebii kennu Bootstrap, navbar. Deeggarsa maqaa, navigeeshinii fi kanneen biroo of keessaa qaba, deeggarsa pilaaginii kufaatii keenyaa dabalatee.

Fuula kana irratti

Akkaataa itti hojjetu

Navbar jalqabuu kee dura waan beekuu qabdu kunooti:

  • Navbars deebii kufaatii fi gita iskiimii halluudhaaf.navbar marfata waliin barbaadu..navbar-expand{-sm|-md|-lg|-xl|-xxl}
  • Navbars fi qabiyyeen isaanii akka durtiitti dhangala'oo dha. Bal'ina isaanii qajeelaa karaa adda addaatiin daangessuuf qabduu jijjiiri .
  • Navbars keessaa addaan fageenyaa fi qindaa'ina to'achuuf gitaalee faayidaa addaan fageenyaa fi flex keenya fayyadami .
  • Navbars akka durtiitti deebii kennu, garuu sana jijjiiruuf salphaatti fooyyessuu dandeessa. Amalli deebii kennuu kan hundaa'u Collapse JavaScript plugin keenya irratti.
  • Qaama fayyadamuun dhaqqabummaa mirkaneessuu <nav>ykn, yoo elementii waliigalaa kan akka a fayyadamte, fayyadamtoota teeknooloojiiwwan gargaarsaaf akka naannoo mallattoo ifatti adda baasuuf navbar hunda irratti <div>a dabali .role="navigation"
  • aria-current="page"Fuula aria-current="true"ammaaf ykn wanta ammaa tuuta keessatti fayyadamuun wanta ammaa agarsiisi .
  • v5.2.0 keessatti haaraa: Navbars jijjiiramoota CSS kanneen gara .navbargita bu'uuraatti bal'ifamaniin mata duree ta'uu danda'u. .navbar-lightkan hin barbaachifne ta'ee fi .navbar-darkakkaataa dabalataa dabaluu mannaa jijjiiramoota CSS irra darbuuf irra deebi'amee barreeffameera.
Bu'aan sochii qaama kanaa prefers-reduced-motiongaaffii miidiyaa irratti hundaa'a. Kutaa sochii hir'ate sanada dhaqqabummaa keenyaa ilaali .

Qabiyyee deeggarame

Navbars deeggarsa ijaarame qaamolee xiqqaa muraasaaf qabatanii dhufu. Akka barbaachisummaa isaatti kanneen armaan gadii keessaa filadhu:

  • .navbar-brandmaqaa dhaabbata, oomisha, ykn pirojektii keessaniif.
  • .navbar-navnavigeeshinii olka'iinsa guutuu fi salphaa ta'eef (deeggarsaa gadi bu'iinsa dabalatee).
  • .navbar-togglerakka itti fayyadamtuuf pilaaginii kufaatii keenyaa fi amala jijjiirraa navigeeshinii biroo wajjin.
  • Faayidaalee flex fi spacing too'annoo fi gochoota unkaa kamiifuu.
  • .navbar-texttarreewwan barruu giddugaleessa dhaabbataa ta'an dabaluudhaaf.
  • .collapse.navbar-collapseqabiyyee navbar qabxii cabsuu warraatiin garee fi dhoksuuf.
  • Qabiyyee navbar babal'ate.navbar-scroll saaguu max-heightfi garagalchuuf filannoo dabali .

Fakkeenyi qaamolee xiqqaa hunda navbar deebii ifaa mata duree qabu keessatti hammataman kan ofumaan bakka cabbii lg(guddaa) irratti kufe kunooti.

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

Fakkeenyi kun gita faayidaa duubbee ( bg-light) fi addaan fageenya ( me-auto, mb-2, mb-lg-0, ) fayyadama.me-2

Maqaa oomishaa

The .navbar-brandelementoota baay'ee irratti hojiirra ooluu danda'a, garuu anchor tokko akka gaariitti hojjeta, sababiin isaas elementoonni tokko tokko gita faayidaa ykn akkaataa amala barbaadu danda'u.

Barreeffama

Barruu kee qaama keessaa .navbar-brandgita waliin dabali.

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

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

Bifa

.navbar-brandBarruu keessa jiru ' n bakka buusuu dandeessa <img>.

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

Fakkii fi barreeffama

Akkasumas yeroo tokkotti fakkii fi barruu dabaluudhaaf faayidaa dabalataa tokko tokko fayyadamuu dandeessa. Hubadhaa dabalamuu .d-inline-blockfi .align-text-topirratti <img>.

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

Hidhamtoonni navigeeshinii Navbar .navfilannoowwan keenya irratti gita fooyyessaa mataa isaaniitiin ijaaramanii fi akkaataa deebii sirrii ta'eef fayyadama gitaalee toggler barbaadu. Navbar keessatti naanna'uun qabiyyee navbar kee haala nageenya qabuun akka qindaa'uuf hamma danda'ametti iddoo qajeelaa qabachuuf ni guddata.

Fuula ammaa agarsiisuuf .activegita irratti dabali ..nav-link

Hubadhaa akkasumas aria-currentamaloota socho'aa irratti dabaluu qabda .nav-link.

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

Akkasumas navs keenyaaf classes waan fayyadamnuuf, yoo barbaaddan guutummaatti mala tarree irratti hundaa'e irraa fagaachuu dandeessu.

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

Akkasumas navbar kee keessatti tarreewwan fayyadamuu dandeessa. Menuuwwan gad-bu'aa iddooqaaf qaama marfama barbaadu, kanaafuu qaamolee adda addaa fi man'ee ta'aniif .nav-itemfi .nav-linkakka armaan gadiitti fayyadamuu mirkaneessi.

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

Unkaalee

To'annoo fi qaamolee unkaa adda addaa navbar keessa kaa'i:

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

Qaamolee mucaa battalaa .navbarfayyadama haalata flex fi durtii gara justify-content: space-between. Amala kana sirreessuuf akka barbaachisummaa isaatti faayilii flex dabalataa fayyadami .

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

Gareen galtee ni hojjetu, akkasumas. Yoo navbar kee unka guutuu, ykn irra caalaa unkaa ta'e, <form>elementii akka qabduutti fayyadamuu fi HTML tokko tokko qusachuu dandeessa.

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

Qabduu adda addaa akka qaama unkaalee navbar kanaatti ni deeggaramuu, akkasumas. Akkasumas, fayyadamtoonni qindaa'ina dhaabbataa elementoota hamma adda addaa qaban qindeessuuf fayyadamuun akka danda'amu yaadachiisa guddaadha.

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

Barreeffama

Navbars gargaarsa .navbar-text. Gitni kun tarreewwan barruudhaaf qindaa'ina dhaabbataa fi addaan fageenya qajeelaa sirreessa.

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

Akka barbaachisummaa isaatti qaamolee fi faayidaa biroo wajjin walitti makuu fi walsimsiisuu.

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

Iskimoota halluu

v5.2.0 keessatti haaraa: Mata dureen Navbar amma jijjiiramoota CSS tiin humna .navbar-lightargateera, akkasumas hojiirra ooleera. Jijjiiramoonni CSS gara tti hojiirra oolu .navbar, durtii mul'ata “ifaa” ta'ee, fi waliin irra darbuu danda'a .navbar-dark.

Mata dureewwan Navbar yeroo kamiyyuu caalaa salphaa ta'aniiru galata walnyaatinsa jijjiiramoota Sass fi CSS Bootstrap. Durtii halluuwwan duubbee ifaa wajjin fayyadamuuf “navbar ifaa” keenyaati, garuu .navbar-darkhalluuwwan duubbee dukkanaa’oo ta’aniifis iyyachuu dandeessa. .bg-*Sana booda, faayidaa waliin dhuunfachiisi .

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

Konteenaroota

Barbaachisaa ta'uu baatus, fuula irratti giddugaleessa gochuuf navbar a keessatti marsuu dandeessa .container–qabduu keessaa ammallee barbaachisaa ta'uu hubadhu ta'us. Yookiin qabiyyee navbar gubbaa dhaabbataa ykn istaatiksii.navbar qofa giddugaleessa gochuuf qabduu keessaa dabaluu dandeessa .

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

Qabiyyeen navbar kee keessa jiru hammam bal'inaan akka dhiyaatu jijjiiruuf qabduu deebii kennu kamiyyuu fayyadami.

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

Ramaddii

Navbars iddoowwan hin istaatiksii keessa kaa'uuf faayidaa iddoo keenya fayyadami . Gara gubbaatti dhaabbataa, gara jalaatti dhaabbataa, gubbaatti maxxane (fuula waliin hanga gubbaa ga'utti tarree, sana booda achitti hafa), ykn gara jalaatti maxxane (fuula waliin hanga jala ga'utti tarree, sana booda ni tura) keessaa filadhu achi).

Navbars dhaabbataa fayyadamu position: fixed, jechuunis isaan dhangala'aa idilee DOM irraa harkifamu fi CSS amala barbaadu danda'a (fkn, padding-topirratti <body>) qaamolee biroo wajjin wal-irra bu'uu ittisuuf.

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

Scroll gochuu

Ida'uu.navbar-nav-scroll.navbar-navQabiyyee jijjiiramuu danda'u barruu navbar kufe keessaa tarree dhaabbataa dandeessisuuf gara (ykn qaama xiqqaa navbar birootti) dabaliAkka durtiitti, garagalchuun 75vh(ykn 75% olka'iinsa buufata ilaalchaa) irratti jalqaba, garuu sana qabeentaa amala CSS naannoo --bs-navbar-heightykn akkaataa amalaatiin irra darbuu dandeessa. Buufatawwan ilaalchaa gurguddoo irratti yeroo navbar bal'atu, qabiyyeen akkuma navbar durtii keessatti mul'atu ni mul'ata.

Maaloo hubadhu amala kun hanqina ta'uu danda'u kan overflow—yeroo saagioverflow-y: auto (qabiyyee asitti qajeelchuuf barbaachisu), overflow-xwalqixa auto, kan qabiyyee qajeelaa tokko tokko ni mura.

Kunoo fakkeenya navbar .navbar-nav-scrollwith fayyadamuun style="--bs-scroll-height: 100px;", faayidaalee margina dabalataa tokko tokko addaan fageenya gaarii ta'eef.

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

Amaloota deebii kennuu

Navbars fayyadamuu dandeessu .navbar-toggler, ..navbar-collapse.navbar-expand{-sm|-md|-lg|-xl|-xxl} qabiyyeen isaanii qaree duuba yoom akka kufu murteessuuf , fi gitaalee fayyadamuu danda'u. Faayidaa biroo wajjin walqabatee, yoom elementoota murtaa'an agarsiisuu ykn dhoksuu salphaatti filachuu dandeessa.

Navbarota gonkumaa hin kufneef, .navbar-expandgita navbar irratti dabali. Navbars yeroo hunda kufaniif, tokkollee hin dabaliin.navbar-expandNavbars yeroo hunda kufaniif, gita

Toggler jedhamuun beekama

Navbar togglers durtii bitaa-hiriirfama, garuu elementii obboleessa akka a hordofuu qabu.navbar-brand , ofumaan gara mirgaa fagootti qindaa'u. Mallattoo kee duubatti deebisuun iddoo toggler duubatti deebisa. Armaan gaditti fakkeenyota akkaataa jijjiirraa adda addaa ti.

Bakka cabbii xiqqaa irratti hin .navbar-brandagarsiifamne:

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

Maqaa maqaa daldalaa bitaa fi toggler mirgaa irratti agarsiifameen:

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

Toggler bitaa fi maqaa maqaa maqaa mirgaatiin:

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

Qabiyyee alaa

Yeroo tokko tokko qabiyyee caasaadhaan ala taa'uuf qaama qabduu kakaasuuf ifteessituu kufaatii fayyadamuu barbaadda .navbar. idSababni isaas, plugin keenya and matching irratti waan hojjetuuf data-bs-target, sun salphaatti raawwatama!

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

Yeroo kana gootu, xiyyeeffannoo sagantaadhaan gara qabduutti yeroo banamu sochoosuuf JaavaScript dabalataa hammachuu gorsina. Yoo kana hin taane, fayyadamtoonni kiiboordii fi fayyadamtoonni teeknooloojiiwwan gargaarsaa qabiyyee haaraa mul'ate argachuuf rakkachuu hin oolan - keessumaa yoo qabduun baname caasaa galmee keessatti toggler dura dhufe. Akkasumas, toggler amaloota akka qabu mirkaneeffachuu gorsina aria-controls, garaid , gara kan qabduu qabiyyee agarsiisuun. Tiyooriidhaan, kun fayyadamtoonni teeknooloojii gargaaraa kallattiin toggler irraa gara qabduu inni to'atutti akka utaalan hayyama–garuu deeggarsa kanaaf yeroo ammaa baayyee patchy dha.

Kanfaasiin ala

Navbar kee babal'ataa fi kufaa jiru gara baafata kanfaasiin ala qaama kanfaasiin ala ta'etti jijjiiri . Akkaataa durtii kanfaasiin ala lamaan dheeressinee .navbar-expand-*gita keenya fayyadamnee barruu cinaa qajeelchaa daayinamikii fi socho'aa uumna.

Fakkeenya armaan gadii keessatti, navbar offcanvas kan yeroo hunda qabxiilee cabsuu hunda irratti kufe uumuuf, .navbar-expand-*gita guutummaatti dhiisi.

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

Navbar offcanvas kan gara navbar idileetti babal'atu bakka cabbii murtaa'e akka lg, fayyadami uumuuf .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>

Yeroo offcanvas navbar dukkanaa'aa keessatti fayyadamtu, barruun akka hin dubbifamne gochuuf qabiyyee offcanvas irratti duubbee dukkanaa'aa qabaachuu si barbaachisuu akka danda'u beeki. Fakkeenya armaan gadii keessatti, .navbar-darkfi .bg-darkgara .navbar, .text-bg-darkgara .offcanvas, .dropdown-menu-darkgara .dropdown-menu, fi .btn-close-whitegara .btn-closeitti daballa sirriitti istaayilii offcanvas dukkanaa'aa wajjin.

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

CSS jedhamuun beekama

Jijjiiramoota

v5.2.0 keessatti dabalameera

Akka qaama dhiyaannaa jijjiiramoota CSS Bootstrap guddachaa jiranitti, navbars amma jijjiiramoota CSS naannoo on fayyadamuun .navbaryeroo dhugaa dhuunfachiisaa fooyya'aa ta'eef. Gatiin jijjiiramoota CSS karaa Sass qindaa'u, kanaafuu dhuunfachiisuun Sass ammallee ni deeggarama, akkasumas.

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

Jijjiiramoonni CSS dabalataa tokko tokkos irratti argamu .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);

Dhuunfachiisuun karaa jijjiiramoota CSS .navbar-darkgita irratti bakka nuti gatiiwwan murtaa'oo filattoota CSS dachaa ta'an osoo hin dabaliin irra darbinu irratti mul'achuu danda'a.

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

Jijjiiramoota Sass

Jijjiiramoota navbar hundaaf:

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

Jijjiiramoota navbar dukkanaa'aa : .

$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 loop jedhamuun beekama

Gitoota babal'isuu/kuffisuu navbar deebii kennanii (fkn, .navbar-expand-lg) kaartaa waliin walitti makamanii $breakpointskaraa loop keessatti uumamu 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;
          }
        }
      }
    }
  }
}