Source

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.

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}
  • Navbars fi qabiyyeen isaanii akka durtiitti dhangala'oo dha. Bal'ina isaanii qajeelaa daangessuuf qabduu filannoo fayyadami .
  • 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.
  • Navbars yeroo maxxanfamu durtiidhaan dhokfamu. 10 irratti dabaluudhaan akka maxxanfaman .d-printdirqisiisi .navbar. Gitaa faayidaa agarsiisaa ilaali .
  • 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"

Fakkeenyaafi tarree qaamolee xiqqaa deeggaramaniif itti fufi dubbisi.

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.
  • .form-inlineto’annoo fi gochoota unka kamiifuu.
  • .navbar-texttarreewwan barruu giddugaleessa dhaabbataa ta'an dabaluudhaaf.
  • .collapse.navbar-collapseqabiyyee navbar qabxii cabsuu warraatiin garee fi dhoksuuf.

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

<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="#">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>

Fakkeenyi kun gita faayidaa halluu ( bg-light) fi addaan fageenya ( my-2, my-lg-0, mr-sm-0, ) fayyadama.my-sm-0

Maqaa oomishaa

The .navbar-brandelementoota baay'ee irratti hojii irra oolchuun ni danda'ama, garuu qaamolee tokko tokko gita faayidaa ykn akkaataa amala barbaadu waan danda'uuf anchor tokko akka gaariitti hojjeta.

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

Fakkiiwwan gara fedhaatti dabaluun .navbar-brandyeroo hunda akkaataawwan amala ykn faayilii sirriitti safara barbaaduu hin oolu. Fakkeenyota agarsiisuu qabnu tokko tokko kunooti.

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

Haalawwan sochii qaban—waliin .active—fuula ammaa agarsiisuuf kallattiin .nav-links ykn warra isaanii dhiyoo s irratti hojii irra oolchuun ni danda'ama .nav-item.

<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="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

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

<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="#">Disabled</a>
    </div>
  </div>
</nav>

Akkasumas navbar nav 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.

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

Unkaalee

To'annoo fi qaamolee unkaa adda addaa navbar keessa .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>

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

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

Gareen galtee ni hojjetu, akkasumas:

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

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.

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

Barreeffama

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

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

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

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

Iskimoota halluu

Theming the navbar galata walnyaatinsa theming classes fi background-colorutilities salphaa ta'ee hin beeku. .navbar-lightHalluuwwan duubbee ifaa wajjin fayyadamuuf, ykn .navbar-darkhalluuwwan duubbee dukkanaa'oodhaaf keessaa filadhu . .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 navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Konteenaroota

Barbaachisaa ta'uu baatus, fuula tokko irratti giddugaleessa gochuuf navbar a keessatti marsuu dandeessa .containerykn qabiyyee navbar gubbaa dhaabbataa ykn static qofa giddugaleessa gochuuf tokko keessa dabaluu dandeessa .

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

.navbar-expand{-sm|-md|-lg|-xl}Yeroo qabduun navbar kee keessa jiru, paadiingiin isaa qajeelaa tuqaawwan cabbii gita ifteessite gadi ta'anitti ni haqama . Kunis yeroo navbar kee kufe bakka ilaalchaa gadii irratti osoo hin barbaachisin padding irratti dachaa akka hin taane mirkaneessa.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <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, ykn gubbaatti maxxane irraa filadhu (fuula waliin hanga gubbaa ga'utti tarreessa, sana booda achitti hafa). 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.

Akkasumas hubadhu .sticky-topfayyadama position: sticky, kan guutummaatti browser hunda keessatti hin deeggaramne .

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

Amaloota deebii kennuu

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

Navbarota gonkumaa hin kufneef, .navbar-expandgita navbar irratti dabali. .navbar-expandNavbars yeroo hunda kufaniif, gita kamiyyuu hin dabalin .

Toggler jedhamuun beekama

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

Qabxii cabsuu isa gadi aanaa keessatti kan hin .navbar-brandagarsiifamne:

<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="#">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>

Maqaa maqaa daldalaa bitaa fi toggler mirgaa irratti agarsiifameen:

<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="#">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>

Toggler bitaa fi maqaa maqaa maqaa mirgaatiin:

<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="#">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>

Qabiyyee alaa

Yeroo tokko tokko qabiyyee dhokataa fuula irratti bakka biraatti kakaasuuf pilaaginii kuffisuu fayyadamuu barbaadda. idSababni isaas, plugin keenya and matching irratti waan hojjetuuf data-target, sun salphaatti raawwatama!

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