in English

Navbar

Zolemba ndi zitsanzo zamutu wamphamvu wa Bootstrap, womvera, navbar. Mulinso kuthandizira pakuyika chizindikiro, kusakatula, ndi zina zambiri, kuphatikiza kuthandizira pulogalamu yowonjezera yathu kugwa.

Patsamba ili

Momwe zimagwirira ntchito

Izi ndi zomwe muyenera kudziwa musanayambe ndi navbar:

Ma Navbar amafunikira kukulunga .navbarndi makalasi .navbar-expand{-sm|-md|-lg|-xl|-xxl}akugwa komanso masinthidwe amitundu .
Navbar ndi zomwe zili mkati mwake ndi zamadzimadzi mwachisawawa. Sinthani chidebe kuti muchepetse m'lifupi mwake mopingasa m'njira zosiyanasiyana.
Gwiritsani ntchito makalasi athu otalikirana komanso osinthika kuti muwongolere katayanidwe ndi kuyanjanitsa mkati mwa navbar.
Ma Navbars amayankha mwachisawawa, koma mutha kuwasintha mosavuta kuti asinthe. Kuyankha kumadalira pulagi yathu ya Collapse JavaScript.
Onetsetsani kupezeka pogwiritsa ntchito <nav>chinthu kapena, ngati mukugwiritsa ntchito chinthu chodziwika bwino monga a <div>, onjezani a role="navigation"pa navbar iliyonse kuti muwonetsere kuti ndi gawo lodziwika bwino kwa ogwiritsa ntchito matekinoloje othandizira.
Onetsani zomwe zilipo panopa pogwiritsa ntchito aria-current="page"tsamba lamakono kapena aria-current="true"zomwe zilipo panopa.

Kanema wa gawoli amadalira prefers-reduced-motionfunso la media. Onani gawo lochepetsedwa la zolemba zathu zofikira .

Zothandizira

Ma Navbars amabwera ndi chithandizo chomangidwira chamagulu ang'onoang'ono. Sankhani kuchokera pazifukwa zotsatirazi:

.navbar-brandza kampani yanu, malonda, kapena dzina la polojekiti.
.navbar-navpakuyenda kwautali komanso kopepuka (kuphatikiza kuthandizira kutsika).
.navbar-togglerkuti mugwiritse ntchito ndi pulagi yathu yakugwa ndi machitidwe ena osinthira ma navigation .
Flex ndi masitayilo othandizira pazowongolera ndi machitidwe aliwonse.
.navbar-textpowonjezera zingwe zolunjika pakati pa mawu.
.collapse.navbar-collapsepakuyika m'magulu ndi kubisa zomwe zili pa navbar potsata kholo lotha.
Onjezani zomwe mwasankha .navbar-scrollkuti mukhazikitse max-heightndi kusuntha zinthu zowonjezera pa navbar .

Nachi chitsanzo cha zigawo zonse zazing'ono zomwe zikuphatikizidwa mu navbar yoyankhidwa yopepuka yomwe imangogwera pamalo lg(aakulu).

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

Chitsanzochi chimagwiritsa ntchito maziko ( bg-light) ndi masitayilo ( my-2, my-lg-0, me-sm-0, my-sm-0) makalasi othandiza.

Mtundu

Itha .navbar-brandkugwiritsidwa ntchito pazinthu zambiri, koma nangula amagwira ntchito bwino, chifukwa zinthu zina zingafunike makalasi othandizira kapena masitayilo achikhalidwe.

Mawu

Onjezani mawu anu mu chinthu ndi .navbar-brandkalasi.

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

Chithunzi

Mutha kusintha mawu omwe ali mkati mwa fayilo .navbar-brandya <img>.

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

Chithunzi ndi mawu

Mutha kugwiritsanso ntchito zina zowonjezera kuti muwonjezere chithunzi ndi zolemba nthawi imodzi. Dziwani kuwonjezera pa .d-inline-blockndi .align-text-toppa <img>.

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

Nav

Maulalo oyenda pa Navbar amamanga pazosankha zathu .navndi kalasi yawo yosinthira ndipo amafuna kugwiritsa ntchito makalasi owongolera pamakongoletsedwe oyenera. Kuyenda m'ma navbar kudzakulanso kukhala malo opingasa momwe mungathere kuti zomwe zili mu navbar yanu zigwirizane bwino.

Onjezani .activekalasi .nav-linkkuti muwonetse tsamba lomwe lilipo.

Chonde dziwani kuti muyenera kuwonjezera mawonekedwe aria-currentpa yogwira .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">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Ndipo chifukwa timagwiritsa ntchito makalasi pama navs athu, mutha kupewa njira yozikidwa pamndandanda ngati mukufuna.

<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">Disabled</a>
      </div>
    </div>
  </div>
</nav>

Mukhozanso kugwiritsa ntchito dropdowns mu navbar yanu. Mindandanda yotsitsa imafunikira chinthu chomangirira kuti muyike, chifukwa chake onetsetsani kuti mukugwiritsa ntchito zinthu zosiyana ndi zomwe zili m'malo .nav-itemndi .nav-linkmonga momwe ziliri pansipa.

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

Mafomu

Ikani zowongolera mafomu osiyanasiyana ndi zida mkati mwa 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>

Zinthu zachibwana zomwe .navbarzimagwiritsa ntchito masinthidwe osinthika ndipo zidzasintha kukhala justify-content: space-between. Gwiritsani ntchito zowonjezera zosinthika ngati pakufunika kusintha izi.

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

Magulu olowetsa amagwiranso ntchito. Ngati navbar yanu ndi mawonekedwe athunthu, kapena makamaka mawonekedwe, mutha kugwiritsa ntchito <form>chinthucho ngati chidebe ndikusunga 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>

Mabatani osiyanasiyana amathandizidwa ngati gawo la mawonekedwe a navbar, nawonso. Ichinso ndi chikumbutso chachikulu kuti zida zoyankhulirana zoyima zitha kugwiritsidwa ntchito kugwirizanitsa zinthu zazikuluzikulu zosiyanasiyana.

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

Mawu

Navbars ikhoza kukhala ndi tinthu tating'ono ta mawu mothandizidwa ndi .navbar-text. Kalasiyi imasintha mizere yoyima ndi mipata yopingasa pamawu amtundu uliwonse.

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

Sakanizani ndikugwirizanitsa ndi zigawo zina ndi zofunikira ngati mukufunikira.

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

Mitundu yamitundu

Kupanga navbar sikunakhale kosavuta chifukwa cha kuphatikiza makalasi amitu ndi background-colorzofunikira. Sankhani kuchokera .navbar-lightkuti mugwiritse ntchito ndi mitundu yowala yakumbuyo, kapena .navbar-darkmitundu yakuda yakumbuyo. Kenako, sinthani ndi .bg-*zofunikira.

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

Zotengera

Ngakhale sizofunikira, mutha kukulunga navbar kuti muyike .containerpakati pa tsamba-ngakhale dziwani kuti chidebe chamkati chikufunikabe. Kapena mutha kuwonjezera chidebe chomwe chili mkati .navbarmwazomwe zili mu navbar yokhazikika kapena yosasunthika .

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

Gwiritsani ntchito chilichonse mwazotengera zomvera kuti musinthe kuchuluka kwa zomwe zili mu navbar yanu.

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

Kuyika

Gwiritsani ntchito zida zathu kuti muyike ma navbar m'malo osakhazikika. Sankhani kuchokera ku zokhazikika mpaka pamwamba, zokhazikika pansi, kapena zomamatira pamwamba (mipukutu ndi tsamba mpaka ifike pamwamba, ndiye khalani pamenepo). Ma navbar okhazikika amagwiritsa ntchito position: fixed, kutanthauza kuti amachotsedwa mumayendedwe wamba a DOM ndipo angafunike CSS yokhazikika (mwachitsanzo, padding-toppa <body>) kuti apewe kuphatikizika ndi zinthu zina.

Komanso dziwani kuti .sticky-topntchito position: sticky, zomwe sizimathandizidwa mokwanira mu msakatuli aliyense .

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

Kupukuta

Onjezani .navbar-nav-scrollku .navbar-nav(kapena gawo lina laling'ono la navbar) kuti mulole kusuntha molunjika mkati mwa zomwe zingasinthidwe mu navbar yomwe yagwa. Mwachikhazikitso, scrolling imalowa 75vh(kapena 75% ya kutalika kwa malo owonera), koma mutha kupitilira izo ndi katundu wamba wa CSS --bs-navbar-heightkapena masitayelo anu. Pamalo okulirapo pomwe navbar ikukulitsidwa, zomwe zilimo zimawonekera monga momwe zimakhalira mu navbar yokhazikika.

Chonde dziwani kuti machitidwewa amabwera ndi vuto lomwe lingachitike overflow-pamene mukukhazikitsa overflow-y: auto(zofunikira kuti mufufuze zomwe zili pano), overflow-xndizofanana ndi auto, zomwe zidzatulutsa zopingasa.

Nachi chitsanzo cha navbar chogwiritsa ntchito .navbar-nav-scrollndi style="--bs-scroll-height: 100px;", ndi zina zowonjezera zam'mphepete kuti mutalikirane bwino.

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

Makhalidwe omvera

Ma Navbar atha kugwiritsa ntchito .navbar-toggler, .navbar-collapse, ndi .navbar-expand{-sm|-md|-lg|-xl|-xxl}makalasi kuti adziwe ngati zomwe zili zikugwera kuseri kwa batani. Kuphatikiza ndi zida zina, mutha kusankha mosavuta nthawi yowonetsera kapena kubisa zinthu zina.

Kwa ma navbar omwe samagwa, onjezani .navbar-expandkalasi pa navbar. Pa ma navbar omwe amagwa nthawi zonse, musawonjezere .navbar-expandkalasi iliyonse.

Toggler

Ma Navbar togglers amalumikizidwa kumanzere mwachisawawa, koma akatsatira chinthu cha m'bale ngati a .navbar-brand, amangoyanjanitsidwa kumanja kwakutali. Kutembenuza chizindikiro chanu kudzasintha kuyika kwa chowongolera. M'munsimu muli zitsanzo za masitayelo osiyanasiyana osinthira.

Popanda .navbar-brandkuwonetsedwa pagawo laling'ono kwambiri:

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

Ndi dzina la mtundu lomwe likuwonetsedwa kumanzere ndi chosinthira kumanja:

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

Ndili ndi chosinthira kumanzere ndi dzina lamtundu kumanja:

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

Zakunja

Nthawi zina mumafuna kugwiritsa ntchito pulogalamu yowonjezera kuti muyambitse chinthu chotengera zinthu zomwe zimakhala kunja kwa fayilo ya .navbar. Chifukwa pulogalamu yowonjezera yathu imagwira ntchito idndikufananiza data-bs-target, ndizovuta!

Collapsed content

Toggleable via the navbar brand.

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

Mukachita izi, tikupangira kuti muphatikizepo JavaScript yowonjezerapo kuti musunthire chidwi chanu mwadongosolo ku chidebecho chikatsegulidwa. Kupanda kutero, ogwiritsa ntchito kiyibodi ndi ogwiritsa ntchito matekinoloje othandizira atha kukhala ndi nthawi yovuta kupeza zomwe zawululidwa kumene - makamaka ngati chidebe chomwe chidatsegulidwa chimabwera patsogolo pa chowongoleracho. Timalimbikitsanso kuwonetsetsa kuti wotembenuzayo ali ndi mawonekedwe aria-controls, akulozera ku idchidebe chomwe chili. Mwachidziwitso, izi zimalola ogwiritsa ntchito ukadaulo wothandizira kulumphira molunjika kuchokera pa chowongolera kupita ku chidebe chomwe amachiwongolera-koma kuthandizira pa izi ndizovuta kwambiri.

Offcanvas

Sinthani navbar yanu yomwe ikukula ndi kugwa kukhala kabati yakunja yokhala ndi pulogalamu yowonjezera ya offcanvas. Timakulitsa masitayelo onse amtundu wa offcanvas ndikugwiritsa ntchito .navbar-expand-*makalasi athu kupanga cholumikizira chapambali chosinthika komanso chosinthika.

Muchitsanzo chomwe chili pansipa, kuti mupange navbar ya offcanvas yomwe nthawi zonse imagwa pazigawo zonse, siyani .navbar-expand-*kalasi yonse.

<nav class="navbar navbar-light 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 text-reset" 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="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <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">
          <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>

Kuti mupange navbar ya offcanvas yomwe imakula kukhala navbar wamba pamalo enaake lg, gwiritsani ntchito .navbar-expand-lg.

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

Sass

Zosintha

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

Lupu

Makasitomala omvera akukulitsa/kugwa (monga, .navbar-expand-lg) amaphatikizidwa ndi $breakpointsmapu ndikupangidwa kudzera mu lupu mu 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;
        }

        .offcanvas-header {
          display: none;
        }

        .offcanvas {
          position: inherit;
          bottom: 0;
          z-index: 1000;
          flex-grow: 1;
          visibility: visible !important; // stylelint-disable-line declaration-no-important
          background-color: transparent;
          border-right: 0;
          border-left: 0;
          @include transition(none);
          transform: none;
        }
        .offcanvas-top,
        .offcanvas-bottom {
          height: auto;
          border-top: 0;
          border-bottom: 0;
        }

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