Source

Navbar nga bwe kiri

Ebiwandiiko n'ebyokulabirako by'omutwe gwa Bootstrap ogw'amaanyi, oguddamu, navbar. Mulimu obuwagizi bw’okussaako akabonero, okutambuliramu, n’ebirala, omuli okuwagira plugin yaffe ey’okugwa.

Engeri gye kikola

Bino by'olina okumanya nga tonnatandika na navbar:

Navbars zeetaaga okuzinga .navbarne .navbar-expand{-sm|-md|-lg|-xl}ku responsive collapsing ne color scheme classes.
Navbars n'ebirimu biba fluid by default. Kozesa ebibya eby’okwesalirawo okussa ekkomo ku bugazi bwabyo obw’okwebungulula.
Kozesa kiraasi zaffe ez'enjawulo n'okukyusakyusa ( flex utility classes) okufuga ebanga n'okulaganya munda mu navbars.
Navbars ziddamu by default, naye osobola bulungi okuzikyusa okukyusa ekyo. Enneeyisa y’okuddamu esinziira ku plugin yaffe eya Collapse JavaScript.
Navbars zikwekebwa nga bweziba nga zikuba. Zikaka okukubibwa nga zongerako .d-printku .navbar. Laba ekibiina ky'omugaso gw'okulaga.
Kakasa nti kituukirirwa ng’okozesa <nav>ekintu oba, bw’oba okozesa ekintu ekisingawo okuba eky’awamu nga a <div>, yongera role="navigation"ku buli navbar okukirambika mu bulambulukufu ng’ekitundu eky’omugaso eri abakozesa tekinologiya ayamba.

Soma wano okufuna ekyokulabirako n'olukalala lw'ebitundu ebitonotono ebiwagirwa.

Ebirimu ebiwagirwa

Navbars zijja n’obuwagizi obuzimbibwamu obw’ebitundu ebitonotono ebitonotono. Londa ku bino wammanga nga bwe kyetaagisa:

.navbar-brandku kkampuni yo, ekintu kyo, oba erinnya lya pulojekiti.
.navbar-navolw’okutambulira mu buwanvu obujjuvu n’obuzito obutono (nga mw’otwalidde n’okuwagira ebifo ebikka wansi).
.navbar-togglerokukozesebwa ne plugin yaffe ey'okugwa n'enneeyisa endala ez'okukyusakyusa okutambuliramu .
.form-inlineku ngeri yonna okufuga n’ebikolwa.
.navbar-textolw’okugattako ennyiriri z’ebiwandiiko eziri wakati mu vertikal.
.collapse.navbar-collapseolw'okugatta n'okukweka ebirimu mu navbar okusinziira ku breakpoint y'omuzadde.

Wano waliwo ekyokulabirako ky’ebitundu byonna ebitonotono ebirimu mu navbar eriko omulamwa gw’ekitangaala eddamu egwa mu ngeri ey’otoma ku kifo lg(ekinene) eky’okumenya.

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

Ekyokulabirako kino kikozesa langi ( bg-light) n’ebanga ( my-2, my-lg-0, mr-sm-0, my-sm-0) kiraasi z’omugaso.

Bulandi

The .navbar-brandesobola okukozesebwa ku elementi ezisinga obungi, naye anchor ekola bulungi nga elements ezimu ziyinza okwetaaga utility classes oba custom styles.

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

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

Okwongera ebifaananyi ku .navbar-brandkijja kirabika bulijjo kyetaaga emisono egy’enjawulo oba ebikozesebwa okusobola okukula obulungi. Wano waliwo ebyokulabirako by’olina okulaga.

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

Nav

Navbar navigation links zizimba ku .navoptions zaffe nga zirina modifier class yazo era zeetaaga okukozesa toggler classes for proper responsive styling. Okutambula mu navbars nakyo kijja kukula okutwala ekifo ekinene eky’okwebungulula nga bwe kisoboka okukuuma ebirimu byo mu navbar nga bikwatagana bulungi.

Embeera ezikola—nga zirina .active—okulaga omuko oguliwo kati zisobola okukozesebwa butereevu ku .nav-links oba omuzadde waabwe ow’okumpi .nav-items.

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

Era olw’okuba tukozesa classes ku navs zaffe, osobola okwewala enkola eyesigamiziddwa ku list yonna bw’oba oyagala.

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

Oyinza n'okukozesa ebigwa mu navbar nav yo. Menyu ezikka wansi zeetaaga ekintu ekizinga okuteeka mu kifo, kale kakasa nti okozesa ebintu eby’enjawulo n’ebiteekeddwa mu kisenge ku .nav-itemera .nav-linknga bwe kiragibwa wansi.

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

Ffoomu

Teeka ebifuga ffoomu eby'enjawulo n'ebitundu munda mu navbar nga olina .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>

Laganya ebirimu mu foomu zo eziri mu layini n’ebikozesebwa nga bwe kyetaagisa.

<nav class="navbar navbar-light bg-light justify-content-between">
  <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>

Ebibinja by’ebiyingizibwa nabyo bikola:

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

Butaamu ez'enjawulo ziwagirwa ng'ekitundu ku ffoomu zino eza navbar, nazo. Kino era kijjukiza kinene nti ebikozesebwa eby’okulaganya okwesimbye bisobola okukozesebwa okulaganya ebintu eby’obunene obw’enjawulo.

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

Okuwandiika obubaka

Navbars ziyinza okubaamu ebitundutundu by'ebiwandiiko nga biyambibwako .navbar-text. Ekibiina kino kitereeza okulaganya okw’okwesimbye n’okulaga ebanga ery’okwesimbye ku nnyiriri z’ebiwandiiko.

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

Tabula era okwatagane n’ebitundu ebirala n’ebikozesebwa nga bwe kyetaagisa.

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

Ensengeka za langi

Okuteeka omulamwa ku navbar tekubangako kwangu olw’okugatta ebibiina by’omulamwa background-colorn’ebikozesebwa. Londako .navbar-lightokukozesebwa ne langi z’emabega ezitangaala, oba .navbar-darklangi z’emabega enzirugavu. Oluvannyuma, customize .bg-*n'ebikozesebwa.

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

Ebintu ebiteekebwamu ebintu

Newankubadde nga tekyetaagisa, osobola okuzinga navbar mu a .containerokugiteeka wakati ku lupapula oba okugattako emu munda okuteeka wakati byokka ebirimu mu navbar ey’okungulu etali ya kukyukakyuka oba etali ya kukyukakyuka .

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

Ekintu bwe kiba mu navbar yo, padding yaakyo ey'okwebungulula eggyibwawo ku breakpoints eza wansi okusinga .navbar-expand{-sm|-md|-lg|-xl}kiraasi yo eragiddwa. Kino kikakasa nti tetukubisaamu emirundi ebiri ku padding mu ngeri eteetaagisa ku viewports eza wansi nga navbar yo egudde.

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

Okuteekebwa mu kifo

Kozesa ebikozesebwa byaffe eby'ekifo okuteeka navbars mu bifo ebitali bikyukakyuka. Londa okuva ku fixed to the top, fixed to the bottom, oba stickied to the top (ezingulula n’olupapula okutuusa lwe lutuuka waggulu, olwo n’asigala awo). Fixed navbars use position: fixed, ekitegeeza nti ziggyibwa okuva mu ntambula eya bulijjo eya DOM era ziyinza okwetaaga CSS eya bulijjo (okugeza, padding-topku <body>) okuziyiza okukwatagana n'ebintu ebirala.

Era weetegereze nti .sticky-topekozesa position: sticky, etawagirwa mu bujjuvu mu buli browser .

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

Enneeyisa eziddamu

Navbars zisobola okukozesa .navbar-toggler, .navbar-collapse, ne .navbar-expand{-sm|-md|-lg|-xl}classes okukyusa nga ebirimu byabwe bigudde emabega wa button. Bw’ogatta n’ebikozesebwa ebirala, osobola bulungi okulonda ddi lw’olina okulaga oba okukweka ebintu ebimu.

Ku navbar ezitagwa, yongera ku .navbar-expandkiraasi ku navbar. Ku navbars bulijjo ezigwa, togattako .navbar-expandclass yonna.

Omukyusakyusa

Navbar togglers are left-aligned by default, naye singa zigoberera elementi ya muganda nga a .navbar-brand, zijja kusengekebwa mu ngeri ey'otoma ku ddyo ennyo. Okuzza emabega markup yo kijja kuzzaawo okuteekebwa kwa toggler. Wansi waliwo ebyokulabirako by’emisono egy’enjawulo egy’okukyusakyusa.

Nga tewali .navbar-branderagiddwa mu breakpoint esinga wansi:

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

Nga erinnya lya brand liragiddwa ku kkono ate toggler ku ddyo:

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

Ku kkono olina toggler ate ku ddyo erinnya lya brand:

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

Ebirimu eby’ebweru

Oluusi oyagala okukozesa collapse plugin okutandikawo ebirimu ebikwekebwa awalala ku lupapula. Olw'okuba plugin yaffe ekola ku idn'okukwatagana data-target, ekyo kyangu okukolebwa!

Ebirimu ebigudde

Ekyusibwa okuyita mu kika kya navbar.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <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>