in English

Navbar

Takaddun bayanai da misalai na Bootstrap mai ƙarfi, maɓallin kewayawa mai amsawa, navbar. Ya haɗa da tallafi don yin alama, kewayawa, rugujewar plugin, da ƙari.

Yadda yake aiki

Ga abin da kuke buƙatar sani kafin farawa da navbar:

Navbars na buƙatar abin rufewa .navbartare da karɓuwa mai .navbar-expand{-sm|-md|-lg|-xl}amsawa da azuzuwan tsarin launi .
Navbars da abinda ke ciki suna ruwa ta tsohuwa. Yi amfani da kwantena na zaɓi don iyakance faɗinsu a kwance.
Yi amfani da tazarar mu da sassauƙan azuzuwan masu amfani don sarrafa tazara da jeri a cikin navbars .
Navbars suna amsawa ta tsohuwa, amma zaka iya canza su cikin sauƙi don canza wancan. Halin amsawa ya dogara da Rushewar JavaScript plugin ɗin mu.
Navbars suna ɓoye ta tsohuwa lokacin bugawa. Tilasta buga su ta ƙara .d-printzuwa .navbar. Duba aji mai amfani nuni .
Tabbatar da dama ta amfani da <nav>kashi ko, idan kuna amfani da ƙarin asalin asalin kamar <div>, ƙara role="navigation"a kowane yanki navark don gano shi a matsayin yankin ƙasa don masu amfani da fasaha.

Tasirin raye-rayen wannan bangaren ya dogara ne da prefers-reduced-motiontambayar kafofin watsa labarai. Dubi raguwar sashin motsi na takaddun damar mu .

abun ciki mai goyan baya

Navbars sun zo tare da ginanniyar goyan baya don dintsi na ƙananan sassa. Zaɓi daga waɗannan masu zuwa kamar yadda ake buƙata:

.navbar-branddon kamfanin ku, samfur, ko sunan aikin ku.
.navbar-navdon kewayawa mai cikakken tsayi da nauyi mai nauyi (ciki har da goyan baya don saukarwa).
.navbar-togglerdon amfani tare da rushewar plugin ɗin mu da sauran halayen juyawa na kewayawa .
.form-inlinega kowane nau'i sarrafawa da ayyuka.
.navbar-textdon ƙara zaren rubutu a tsaye a tsakiya.
.collapse.navbar-collapsedon haɗawa da ɓoye abubuwan navbar ta wurin hutun iyaye.

Anan ga misalin duk ƙananan abubuwan da aka haɗa a cikin navbar mai jigo mai haske wanda ke faɗuwa kai tsaye a wurin lg(babban) tsinke.

<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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <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">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>

Wannan misalin yana amfani da launi ( bg-light) da tazara ( my-2, my-lg-0, mr-sm-0) my-sm-0azuzuwan masu amfani.

Alamar

Ana .navbar-brandiya amfani da shi ga yawancin abubuwa, amma anga yana aiki mafi kyau, saboda wasu abubuwa na iya buƙatar azuzuwan amfani ko salon al'ada.

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

Ƙara hotuna zuwa ga .navbar-brandƙila koyaushe yana buƙatar salo na musamman ko kayan aiki don girman da ya dace. Ga wasu misalai don nunawa.

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

Nav

Hanyoyin kewayawa na Navbar suna ginawa akan .navzaɓuɓɓukanmu tare da ajin gyara nasu kuma suna buƙatar amfani da azuzuwan toggler don dacewa da salo. Kewayawa a cikin navbars shima zai girma don mamaye sararin sararin samaniya gwargwadon yuwuwa don kiyaye abubuwan da ke cikin navbar ɗinku amintacce.

Jihohi masu aiki-tare da- .activedon nuna shafi na yanzu ana iya amfani da su kai tsaye ga .nav-links ko iyayensu na kusa .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">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Kuma saboda muna amfani da azuzuwan don jiragen ruwa namu, zaku iya guje wa tsarin tushen lissafin gaba ɗaya idan kuna so.

<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-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

Hakanan zaka iya amfani da zazzagewa a cikin navbar ku. Menu na zazzagewa yana buƙatar ɓangaren naɗa don sakawa, don haka tabbatar da amfani da keɓantattun abubuwa da gurbi don .nav-itemkuma .nav-linkkamar yadda aka nuna a ƙasa.

<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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <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>

Siffofin

Sanya nau'ikan sarrafawa daban-daban da abubuwan haɗin gwiwa a cikin mashigin kewayawa tare da .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>

Abubuwan da yara ke .navbaramfani da su na sassauƙawa kuma za su tsoho zuwa justify-content: space-between. Yi amfani da ƙarin kayan aikin sassauƙa kamar yadda ake buƙata don daidaita wannan ɗabi'a.

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

Ƙungiyoyin shigarwa suna aiki kuma:

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

Ana goyan bayan maɓallai iri-iri azaman ɓangaren waɗannan sifofin navbar, suma. Wannan kuma babban tunatarwa ne cewa ana iya amfani da kayan aikin jeri na tsaye don daidaita abubuwa masu girma dabam.

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

Rubutu

Navbars na iya ƙunshi guntun rubutu tare da taimakon .navbar-text. Wannan aji yana daidaita jeri a tsaye da tazarar kwance don igiyoyin rubutu.

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

Haɗa ku daidaita tare da sauran abubuwa da abubuwan amfani kamar yadda ake buƙata.

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

Tsarin launi

Jigon navbar bai taɓa zama mai sauƙi ba godiya ga haɗin azuzuwan jigo da background-colorkayan aiki. Zaɓi daga .navbar-lightdon amfani tare da launuka masu haske, ko .navbar-darkdon launuka masu duhu. Sa'an nan, tsara tare da .bg-*utilities.

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

Kwantena

.containerKo kuma za ku iya ƙara akwati a cikin .navbarzuwa tsakiyar abin da ke cikin madaidaicin ko madaidaicin saman navbar .

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

Lokacin da akwati ya kasance a cikin navbar ɗin ku, ana cire mashin sa a kwance a wuraren karya ƙasa fiye da ƙayyadaddun .navbar-expand{-sm|-md|-lg|-xl}ajin ku. Wannan yana tabbatar da cewa ba mu ninka kan matsi ba dole ba a ƙananan wuraren kallo lokacin da navbar ɗinku ya rushe.

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

Wuri

Yi amfani da kayan aikin mu don sanya navbars a wuraren da ba a tsaye ba. Zabi daga kafaffen zuwa sama, gyarawa zuwa kasa, ko manne a saman (gungurawa tare da shafi har sai ya kai saman, sannan ya tsaya a can). Kafaffen navbars suna amfani da position: fixed, ma'ana an ja su daga madaidaicin DOM kuma suna iya buƙatar CSS na al'ada (misali, padding-topakan <body>) don hana haɗuwa da wasu abubuwa.

Hakanan lura cewa .sticky-topyana amfani position: sticky, wanda ba a samun cikakken tallafi a cikin kowane mai bincike .

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

Gungurawa

Ƙara .navbar-nav-scrollzuwa .navbar-collapse(ko wani ɓangaren ɓangaren navbar) don ba da damar gungurawa a tsaye a cikin abin da ke iya juyawa na rugujewar mashigin navbar. Ta hanyar tsoho, gungurawa yana farawa a 75vh(ko 75% na tsayin kallon kallo), amma kuna iya soke hakan tare da salon layi ko na al'ada. A manyan wuraren kallo lokacin da aka faɗaɗa navbar, abun ciki zai bayyana kamar yadda yake a cikin tsoho navbar.

Da fatan za a lura cewa wannan ɗabi'a tana zuwa tare da yuwuwar koma baya na overflow— lokacin da saitin overflow-y: auto(da ake buƙata don gungurawa abun cikin nan), overflow-xdaidai yake da auto, wanda zai yanke wasu abun ciki a kwance.

Ga misali navbar ta amfani .navbar-nav-scrollda style="max-height: 100px;", tare da wasu ƙarin abubuwan amfani da gefe don mafi kyawun tazara.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <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="#" role="button" data-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">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Halayen amsawa

Navbars na iya amfani da .navbar-toggler, .navbar-collapse, da .navbar-expand{-sm|-md|-lg|-xl}azuzuwan don tantance lokacin da abun cikin su ya rushe bayan maɓalli. A haɗe tare da wasu kayan aiki, zaka iya sauƙin zaɓar lokacin nunawa ko ɓoye takamaiman abubuwa.

Don navbars waɗanda ba su taɓa rugujewa ba, ƙara .navbar-expandajin a kan navbar. Don navbars waɗanda koyaushe suna rushewa, kar a ƙara kowane .navbar-expandaji.

Mai jujjuyawa

Navbar togglers suna daidaitawa ta hagu ta tsohuwa, amma idan sun bi sashin ƴan uwa kamar .navbar-brand, za a daidaita su kai tsaye zuwa dama mai nisa. Juya alamarku zai mayar da jeri na toggler. A ƙasa akwai misalan salo daban-daban na juyawa.

Ba tare da .navbar-brandnunawa a mafi ƙanƙantar wurin hutu ba:

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

Tare da alamar alamar da aka nuna a hagu da mai kunnawa a dama:

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

Tare da toggler a hagu da sunan alamar a dama:

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

Abun ciki na waje

Wani lokaci kana so ka yi amfani da kayan aikin rugujewa don haifar da ɓangaren akwati don abun ciki wanda ke zaune a waje da .navbar. Saboda plugin ɗinmu yana aiki akan idkuma data-targetdaidaitawa, ana yin hakan cikin sauƙi!

Abubuwan da suka ruguje

Ana iya canzawa ta alamar navbar.

<div class="fixed-top">
  <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>

Lokacin da kuka yi wannan, muna ba da shawarar haɗa ƙarin JavaScript don matsar da hankali ta hanyar shirye-shirye zuwa akwati idan an buɗe ta. In ba haka ba, masu amfani da madannai da masu amfani da fasahar taimako za su yi wahala samun sabon abun ciki da aka bayyana - musamman idan kwandon da aka buɗe ya zo gaban mai kunnawa a cikin tsarin takaddar. Muna kuma ba da shawarar tabbatar da cewa toggler yana da aria-controlssifa, yana nuni ga idkwandon abun ciki. A ka'idar, wannan yana ba masu amfani da fasaha damar yin tsalle kai tsaye daga mai kunnawa zuwa kwandon da yake sarrafawa - amma tallafi ga wannan a halin yanzu yana da kyau.