Source

Navbar

Takaddun bayanai da misalai na Bootstrap mai ƙarfi, maɓallin kewayawa mai amsawa, navbar. Ya haɗa da goyan baya don yin alama, kewayawa, da ƙari, gami da goyan bayan falin mu na rugujewa.

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 .

Ci gaba da karantawa don misali da jerin ƙananan abubuwan da aka goyan baya.

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

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 kayan aiki 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.4/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.4/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 .active- don nuna shafin 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" href="#" tabindex="-1" aria-disabled="true">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-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>

Hakanan zaka iya amfani da zazzagewa a cikin navbar 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="#" 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>

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 nan take kuma za su tsohuwa 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

Ko da yake ba a buƙata ba, za ku iya nannavbar a cikin .containerdon a tsakiya a kan shafi ko ƙara ɗaya a cikin kawai tsakiyar abubuwan da ke cikin navbar madaidaiciya ko a tsaye .

<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 gyarawa zuwa sama, gyarawa zuwa kasa, ko manne zuwa sama (nannade 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 da 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>

Halayen amsawa

Navbars na iya amfani da .navbar-toggler, .navbar-collapse, da .navbar-expand{-sm|-md|-lg|-xl}azuzuwan don canzawa 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 ƙasƙanci 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" 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>

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

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

Abun ciki na waje

Wani lokaci kana so ka yi amfani da kayan aikin rugujewa don jawo ɓoyayyun abun ciki a wani wuri a shafin. 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="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>