Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
Check
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.
  • Sabo a cikin v5.2.0: Navbars na iya zama jigogi tare da masu canji na CSS waɗanda aka keɓe zuwa .navbarajin tushe. .navbar-lightan soke shi kuma .navbar-darkan sake rubuta shi don soke masu canjin CSS maimakon ƙara ƙarin salo.
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 zazzagewa).
  • .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.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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 ( me-auto, mb-2, mb-lg-0) me-2azuzuwan 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.

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

<!-- As a heading -->
<nav class="navbar 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>.

html 
<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" 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>.

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

html 
<nav class="navbar navbar-expand-lg 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">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.

html 
<nav class="navbar navbar-expand-lg 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">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.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown 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><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Siffofin

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

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <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.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <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 ku adana wasu HTML.

html 
<nav class="navbar 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.

html 
<nav class="navbar 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.

html 
<nav class="navbar 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.

html 
<nav class="navbar navbar-expand-lg 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

Sabo a cikin v5.2.0: Navbar yanzu ana samun ƙarfi ta hanyar masu canji na CSS kuma .navbar-lightan soke su. Ana amfani da masu canji na CSS zuwa .navbar, suna ƙetare zuwa “haske” bayyanar, kuma ana iya shafe su da .navbar-dark.

Jigogin Navbar sun fi sauƙi fiye da kowane lokaci godiya ga haɗin Bootstrap na Sass da CSS masu canji. Tsohuwar ita ce "navbar haske" don amfani tare da launuka masu haske, amma kuma kuna iya neman .navbar-darklaunuka 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" 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 .

html 
<div class="container">
  <nav class="navbar navbar-expand-lg 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.

html 
<nav class="navbar navbar-expand-lg 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, manne sama (nannade da shafi har sai ya kai saman, sannan ya tsaya a can), ko kuma ya manne a kasa (nannade da shafin har sai ya kai kasa, sannan ya tsaya). akwai).

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.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
html 
<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
html 
<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
html 
<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
html 
<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</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.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-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" role="search">
        <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:

html 
<nav class="navbar navbar-expand-lg 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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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:

html 
<nav class="navbar navbar-expand-lg 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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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:

html 
<nav class="navbar navbar-expand-lg 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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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!

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

Offcanvas

Canja wurin faɗaɗa da rugujewar navbar zuwa cikin aljihun bangon bango tare da bangaren kashe canvas . Muna tsawaita duka tsoffin sifofi na offcanvas kuma muna amfani da .navbar-expand-*azuzuwan mu don ƙirƙirar shingen kewayawa mai ƙarfi da sassauƙa.

A cikin misalin da ke ƙasa, don ƙirƙirar navbar na waje wanda koyaushe yana rugujewa a duk wuraren hutu, barin .navbar-expand-*ajin gaba ɗaya.

html 
<nav class="navbar bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </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>
        </ul>
        <form class="d-flex" role="search">
          <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>
  </div>
</nav>

Don ƙirƙirar navbar na waje wanda ke faɗaɗa zuwa navbar na yau da kullun a takamaiman wurin hutu kamar lg, yi amfani da .navbar-expand-lg.

<nav class="navbar navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

Lokacin amfani da offcanvas a cikin mashigin navbar mai duhu, ku sani cewa ƙila kuna buƙatar samun bango mai duhu akan abun cikin waje don guje wa rubutun ya zama marar tushe. A cikin misalin da ke ƙasa, muna ƙara .navbar-darkda .bg-darkzuwa .navbar, .text-bg-darkzuwa .offcanvas, .dropdown-menu-darkzuwa .dropdown-menu, da kuma .btn-close-whitedon .btn-closesalo mai kyau tare da zane mai duhu.

html 
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <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>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

Masu canji

An ƙara a cikin v5.2.0

A matsayin wani ɓangare na tsarin canza canjin CSS na Bootstrap, navbars yanzu suna amfani da masu canjin CSS na gida .navbardon haɓaka gyare-gyare na ainihin lokaci. An saita dabi'u don masu canjin CSS ta hanyar Sass, don haka har yanzu ana tallafawa keɓancewar Sass, ma.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

Wasu ƙarin masu canji na CSS kuma suna nan akan .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

Ana iya ganin keɓancewa ta hanyar masu canji na CSS akan .navbar-darkajin da muke soke takamaiman ƙima ba tare da ƙara masu zaɓin CSS kwafi ba.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Sass masu canji

Daban-daban ga duk navbars:

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

Daban-daban don duhu navbar :

$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-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

Sass 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: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}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;
        }

        .offcanvas {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

          .offcanvas-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}