in English

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.

A wannan shafi

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|-xxl}amsawa da azuzuwan tsarin launi .
Navbars da abinda ke ciki suna ruwa ta tsohuwa. Canja akwati don iyakance faɗin kwancensu ta hanyoyi daban-daban.
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.
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.
Nuna abu na yanzu ta amfani aria-current="page"da shafin na yanzu ko aria-current="true"don abu na yanzu a cikin saiti.

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 .
Flex da tazarar abubuwan amfani ga 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.
Ƙara wani zaɓi .navbar-scrolldon saitawa max-heightkuma gungura abubuwan da ke faɗaɗa navbar .

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">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Wannan misalin yana amfani da bayanan baya ( bg-light) da tazara ( my-2, my-lg-0, me-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.

Rubutu

Ƙara rubutun ku a cikin wani kashi tare da .navbar-brandajin.

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

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

Hoto

Kuna iya maye gurbin rubutu a cikin .navbar-brandtare da <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    </a>
  </div>
</nav>

Hoto da rubutu

Hakanan zaka iya amfani da wasu ƙarin abubuwan amfani don ƙara hoto da rubutu a lokaci guda. Kula da ƙari da .d-inline-blockkuma .align-text-topakan <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</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.

Ƙara .activeajin .nav-linkdon nuna shafin na yanzu.

Lura cewa yakamata ku ƙara aria-currentsifa akan mai aiki .nav-link.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Home</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>
  </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">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </div>
    </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">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Siffofin

Sanya nau'ikan sarrafa nau'i daban-daban da abubuwan haɗin gwiwa a cikin navbar:

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</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">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Ƙungiyoyin shigarwa suna aiki, kuma. Idan navbar ɗinku gabaɗaya ce, ko galibi nau'i ne, zaku iya amfani da <form>kashi azaman akwati kuma adana wasu HTML.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <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="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" 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">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</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">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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>
  </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 nannade navbar a cikin .containerdon sanya shi a kan shafi-ko da yake lura cewa ana buƙatar akwati na ciki har yanzu. Ko 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">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>

Yi amfani da kowane kwantena masu amsawa don canza yadda aka gabatar da faɗin abun cikin navbar ku.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-md">
    <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">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

Gungurawa

Ƙara .navbar-nav-scrollzuwa .navbar-nav(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 zaku iya soke hakan tare da kayan al'ada na CSS na gida --bs-navbar-heightko salon 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="--bs-scroll-height: 100px;", tare da wasu ƙarin abubuwan amfani da gefe don mafi kyawun tazara.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <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" href="#" tabindex="-1" aria-disabled="true">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Halayen amsawa

Navbars na iya amfani da .navbar-toggler, .navbar-collapse, da .navbar-expand{-sm|-md|-lg|-xl|-xxl}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">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </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">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Tare da toggler a hagu da sunan alamar a dama:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </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-bs-targetdaidaitawa, ana yin hakan cikin sauƙi!

Abubuwan da suka ruguje

Ana iya canzawa ta alamar navbar.

<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">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

Lokacin da kuke yin 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.

Sass

Masu canji

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);

$navbar-light-brand-color:                $navbar-light-active-color;
$navbar-light-brand-hover-color:          $navbar-light-active-color;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

Madauki

Fadada/rushe azuzuwan navbar mai amsawa (misali, .navbar-expand-lg) ana haɗa su tare da $breakpointstaswira kuma an ƙirƙira su ta hanyar madauki a ciki scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: $navbar-nav-link-padding-x;
            padding-left: $navbar-nav-link-padding-x;
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }
      }
    }
  }
}