Source

Navbar

Inyandiko n'ingero kuri Bootstrap ikomeye, yitabira kugendana umutwe, navbar. Harimo inkunga yo kuranga, kugendana, nibindi byinshi, harimo inkunga yo gusenyuka kwa plugin.

Uburyo ikora

Dore ibyo ugomba kumenya mbere yo gutangira na navbar:

Navbars isaba gupfunyika .navbarhamwe .navbar-expand{-sm|-md|-lg|-xl}no gusenyuka kwishura hamwe namasomo yamabara .
Navbars nibiyirimo biratemba muburyo busanzwe. Koresha ibikoresho bidahwitse kugirango ugabanye ubugari bwa horizontal.
Koresha intera yacu na flex yingirakamaro kumasomo yo kugenzura intera no guhuza muri navbars.
Navbars irasubiza muburyo budasanzwe, ariko urashobora kuyihindura byoroshye kugirango uhindure ibyo. Imyitwarire isubiza biterwa no gusenyuka kwa JavaScript plugin.
Navbars ihishe muburyo budasanzwe iyo icapa. Bahatire gucapwa wongeyeho .d-printkuri .navbar. Reba ibyerekanwe byingirakamaro.
Menya neza <nav>niba ukoresheje ikintu cyangwa, niba ukoresheje ibintu rusange nka a <div>, ongeraho role="navigation"kuri buri navbar kugirango ubigaragaze neza nkakarere kihariye kubakoresha ikoranabuhanga rifasha.

Ingaruka ya animasiyo yibi bice biterwa prefers-reduced-motionnibibazo byitangazamakuru. Reba igice cyagabanijwe cyicyiciro cyibisobanuro byacu .

Soma kurugero nurutonde rwibikoresho byunganira.

Ibishyigikiwe

Navbars izanye nubushakashatsi bwubatswe kubice bike. Hitamo muri ibi bikurikira nkuko bikenewe:

.navbar-brandkuri sosiyete yawe, ibicuruzwa, cyangwa izina ryumushinga.
.navbar-navkuburebure bwuzuye nuburemere bworoshye (harimo inkunga yo kumanuka).
.navbar-togglerkugirango ukoreshe hamwe no gusenyuka kwa plugin hamwe nizindi nzira zo kugendana imyitwarire.
.form-inlinekuburyo ubwo aribwo bwose bugenzura n'ibikorwa.
.navbar-textyo kongeramo uhagaritse imirongo yinyandiko.
.collapse.navbar-collapseyo guteranya no guhisha ibiri muri navbar kubabyeyi.

Dore urugero rwibice byose bigize ibice byashizwemo urumuri-rufite insanganyamatsiko ya navbar ihita isenyuka kuri lg(nini).

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Uru rugero rukoresha ibara ( bg-light) n'umwanya ( my-2,,, my-lg-0) ibyiciro byingirakamaro mr-sm-0.my-sm-0

Ikirango

Irashobora .navbar-brandgukoreshwa mubintu byinshi, ariko inanga ikora neza nkibintu bimwe bishobora gusaba amasomo yingirakamaro cyangwa uburyo bwihariye.

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

Ongeraho amashusho .navbar-brandkubushake birashoboka burigihe bisaba imiterere yihariye cyangwa ibikorwa kugirango ubunini bukwiye. Hano hari ingero zo kwerekana.

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

Nav

Navbar yoguhuza imiyoboro yubaka kumahitamo yacu .navhamwe nicyiciro cyabo cyo guhindura kandi bisaba gukoresha ibyiciro bya toggler kugirango bibe byiza. Kugenda muri navbars nabyo bizakura kugirango bifate umwanya munini utambitse kugirango bishoboke kugirango ibikubiyemo byawe bihuze neza.

Ibikorwa bifatika-hamwe .active- kwerekana urupapuro rwubu rushobora gukoreshwa kuri .nav-links cyangwa kubabyeyi babo .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="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Kandi kubera ko dukoresha amasomo kuri navs zacu, urashobora kwirinda uburyo bushingiye kurutonde rwose niba ubishaka.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Urashobora kandi gukoresha ibitonyanga muri navbar nav. Ibitonyanga bitonyanga bisaba ikintu cyo gupfunyika kugirango uhagarare, bityo rero menya neza ko ukoresha ibintu bitandukanye kandi byashyizwe .nav-itemhamwe kandi .nav-linknkuko bigaragara hano hepfo.

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

Ifishi

Shira uburyo butandukanye bwo kugenzura nibigize muri navbar hamwe .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>

Ako kanya abana ibintu .navbarmukoresha flex imiterere kandi bizahinduka kuri justify-content: between. Koresha inyongera za flex zikenewe nkuko bikenewe kugirango uhindure iyi myitwarire.

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

Amatsinda yinjiza akora, nayo:

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

Utubuto dutandukanye dushyigikiwe nkigice cyiyi form ya navbar, nayo. Ibi kandi nibutsa cyane ko vertical alignement utilities ishobora gukoreshwa muguhuza ibintu bitandukanye.

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

Inyandiko

Navbars irashobora kuba irimo bits yinyandiko ifashijwe na .navbar-text. Iri shuri rihindura vertical vertical na horizontal intera kumirongo yinyandiko.

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

Kuvanga no guhuza nibindi bice nibikoresho bikenewe.

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

Ibara

Gushushanya navbar ntabwo byigeze byoroha kuberako guhuza amasomo yibanze hamwe background-colornibikorwa. Hitamo kuva .navbar-lightkugirango ukoreshe hamwe n'amabara yoroheje, cyangwa .navbar-darkkumabara yijimye. Noneho, kora hamwe .bg-*nibikorwa byingirakamaro.

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

Ibikoresho

Nubwo bidasabwa, urashobora kuzinga navbar muri a .containerkugirango uyishyire kurupapuro cyangwa wongereho imwe imbere kugirango uhuze gusa ibiri murwego rwo hejuru cyangwa ruhagaze neza .

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

Iyo kontineri iri muri navbar yawe, padi yayo itambitse ikurwaho kumurongo uri munsi yicyiciro cyawe .navbar-expand{-sm|-md|-lg|-xl}. Ibi biremeza ko tutikubye kabiri kuri padi bitari ngombwa kubireba hasi iyo navbar yawe yaguye.

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

Gushyira

Koresha imyanya yacu yibikorwa kugirango ushire navbars mumwanya udahagaze. Hitamo kuva ushyizwe hejuru, ushyizwe hepfo, cyangwa wiziritse hejuru (umuzingo hamwe nurupapuro kugeza ugeze hejuru, hanyuma ugumeyo). Imiyoboro ihamye ikoreshwa position: fixed, bivuze ko yakuwe mubintu bisanzwe bya DOM kandi birashobora gusaba CSS yihariye (urugero, padding-topkuri <body>) kugirango wirinde guhuzagurika nibindi bintu.

Menya kandi ko .sticky-topikoresha position: sticky, idashyigikiwe byuzuye muri buri mushakisha .

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

Imyitwarire isubiza

Navbars irashobora gukoresha .navbar-toggler, .navbar-collapsehamwe .navbar-expand{-sm|-md|-lg|-xl}namasomo kugirango uhindure mugihe ibirimo bisenyutse inyuma ya buto. Ufatanije nibindi bikoresho, urashobora guhitamo byoroshye igihe cyo kwerekana cyangwa guhisha ibintu runaka.

Kuri navbars itigera isenyuka, ongeramo urwego .navbar-expandkuri navbar. Kuri navbars ihora isenyuka, ntukongere urwego urwo arirwo rwose .navbar-expand.

Toggler

Navbar togglers isigaye-ihujwe nibisanzwe, ariko nibakurikiza ikintu kivukana nka a .navbar-brand, bazahita bahuza iburyo. Guhindura ibimenyetso byawe bizahindura ishyirwa rya toggler. Hano hariburorero bwuburyo butandukanye bwo guhinduranya.

Hamwe ntagaragajwe .navbar-brandmurwego rwo hasi:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Hamwe nizina ryirango ryerekanwe ibumoso na toggler iburyo:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Hamwe na toggler ibumoso nizina ryikirango iburyo:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Ibiri hanze

Rimwe na rimwe, ushaka gukoresha plugin yo gusenyuka kugirango utere ibintu byihishe ahandi kurupapuro. Kuberako plugin yacu ikora kuri idno data-targetguhuza, ibyo biroroshye gukorwa!

Ibirimo

Kuzenguruka ukoresheje ikirango cya navbar.

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