in English

Upau wa urambazaji

Hati na mifano ya kichwa chenye nguvu cha urambazaji cha Bootstrap, upau wa urambazaji. Inajumuisha usaidizi wa kuweka chapa, usogezaji, na zaidi, ikijumuisha usaidizi wa programu-jalizi yetu ya kukunja.

Katika ukurasa huu

Inavyofanya kazi

Hivi ndivyo unahitaji kujua kabla ya kuanza na upau wa urambazaji:

Navbars zinahitaji kufunikwa na .navbarkwa .navbar-expand{-sm|-md|-lg|-xl|-xxl}ajili ya kuanguka na madarasa ya mpango wa rangi .
Navbar na yaliyomo ni kioevu kwa chaguo-msingi. Badilisha chombo ili kupunguza upana wao wa mlalo kwa njia tofauti.
Tumia madarasa yetu ya kuweka nafasi na kunyunyuzia matumizi kwa kudhibiti nafasi na upangaji ndani ya pau za urambazaji.
Navbar hujibu kwa chaguo-msingi, lakini unaweza kuzirekebisha kwa urahisi ili kubadilisha hiyo. Tabia ya kujibu inategemea programu-jalizi yetu ya Kunja JavaScript.
Hakikisha ufikivu kwa kutumia <nav>kipengele au, ikiwa unatumia kipengele cha kawaida zaidi kama vile <div>, ongeza a role="navigation"kwa kila upau wa urambazaji ili kutambua kwa uwazi kama eneo muhimu kwa watumiaji wa teknolojia saidizi.
Onyesha kipengee cha sasa kwa kutumia aria-current="page"kwa ukurasa wa sasa au aria-current="true"kwa kipengee cha sasa katika seti.

Athari ya uhuishaji ya kipengele hiki inategemea prefers-reduced-motionhoja ya midia. Tazama sehemu ya mwendo iliyopunguzwa ya hati zetu za ufikivu .

Maudhui yanayotumika

Navbar huja na usaidizi uliojengewa ndani kwa vijenzi vidogo vidogo. Chagua kutoka kwa zifuatazo kama inavyohitajika:

.navbar-brandkwa kampuni, bidhaa au jina la mradi wako.
.navbar-navkwa urambazaji wa urefu kamili na uzani mwepesi (pamoja na usaidizi wa menyu kunjuzi).
.navbar-togglerkwa matumizi na programu-jalizi yetu ya kukunja na tabia zingine za kugeuza usogezaji .
Flex na huduma za kuweka nafasi kwa vidhibiti na vitendo vya aina yoyote.
.navbar-textkwa kuongeza mifuatano ya maandishi iliyowekwa katikati wima.
.collapse.navbar-collapsekwa kupanga na kuficha yaliyomo kwenye upau wa urambazaji kwa njia ya mzazi.
Ongeza chaguo .navbar-scrollili kuweka max-heightna kusogeza maudhui yaliyopanuliwa ya upau wa uelekezaji .

Huu hapa ni mfano wa vipengee vidogo vyote vilivyojumuishwa katika upau wa urambazaji wa mada nyepesi ambayo huanguka kiotomatiki kwenye sehemu lg(kubwa) ya kukatika.

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

Mfano huu hutumia mandharinyuma ( bg-light) na nafasi ( my-2, my-lg-0, me-sm-0, my-sm-0) madarasa ya matumizi.

Chapa

.navbar-brandInaweza kutumika kwa vipengele vingi, lakini nanga hufanya kazi vyema zaidi, kwani baadhi ya vipengele vinaweza kuhitaji madarasa ya matumizi au mitindo maalum .

Maandishi

Ongeza maandishi yako ndani ya kipengele na .navbar-branddarasa.

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

Picha

Unaweza kubadilisha maandishi ndani ya .navbar-brandfaili na <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>

Picha na maandishi

Unaweza pia kutumia huduma zingine za ziada ili kuongeza picha na maandishi kwa wakati mmoja. Kumbuka kuongezwa kwa .d-inline-blockna .align-text-topkwenye <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

Viungo vya usogezaji vya Upau wa urambazaji hujengwa juu ya .navchaguo zetu na darasa lao la kirekebishaji na vinahitaji matumizi ya aina za kigeuzaji kwa mtindo unaofaa. Urambazaji katika upau wa urambazaji pia utakua kuchukua nafasi nyingi za mlalo iwezekanavyo ili kuweka maudhui yako ya upau wa urambazaji yakiwa yamepangiliwa kwa usalama.

Ongeza .activedarasa .nav-linkili kuonyesha ukurasa wa sasa.

Tafadhali kumbuka kuwa unapaswa pia kuongeza aria-currentsifa kwenye active .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>

Na kwa sababu tunatumia madarasa kwa navs zetu, unaweza kuepuka mbinu ya orodha kabisa ukipenda.

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

Unaweza pia kutumia menyu kunjuzi kwenye upau wa urambazaji. Menyu kunjuzi zinahitaji kipengele cha kufunga ili kuweka nafasi, kwa hivyo hakikisha kuwa umetumia vipengele tofauti na vilivyowekwa kwa ajili ya .nav-itemna .nav-linkkama inavyoonyeshwa hapa chini.

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

Fomu

Weka vidhibiti na vipengele mbalimbali vya fomu ndani ya upau wa urambazaji:

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

Vipengee vya mara moja vya mtoto vya .navbarmpangilio wa matumizi na vitabadilika kuwa chaguomsingi justify-content: space-between. Tumia huduma za ziada zinazobadilika inapohitajika kurekebisha tabia hii.

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

Vikundi vya kuingiza hufanya kazi pia. Ikiwa upau wa urambazaji ni fomu nzima, au zaidi ni fomu, unaweza kutumia <form>kipengele kama chombo na kuhifadhi baadhi ya 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>

Vifungo mbalimbali vinatumika kama sehemu ya fomu hizi za upau wa urambazaji, pia. Hili pia ni ukumbusho mzuri kwamba huduma za upatanishaji wima zinaweza kutumika kupatanisha vipengele vya ukubwa tofauti.

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

Maandishi

Navbar zinaweza kuwa na vipande vya maandishi kwa usaidizi wa .navbar-text. Darasa hili hurekebisha mpangilio wima na nafasi mlalo kwa mifuatano ya maandishi.

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

Changanya na ufanane na vifaa vingine na huduma kama inahitajika.

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

Mipango ya rangi

Kuweka mada kwenye upau wa urambazaji haijawahi kuwa rahisi kutokana na mchanganyiko wa madarasa ya mada na background-colorhuduma. Chagua kutoka .navbar-lightkwa matumizi na rangi nyepesi za mandharinyuma, au .navbar-darkkwa rangi nyeusi za mandharinyuma. Kisha, ubinafsishe na .bg-*huduma.

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

Vyombo

Ingawa haihitajiki, unaweza kuifunga upau wa urambazaji .containerili kuiweka katikati kwenye ukurasa-ingawa kumbuka kuwa chombo cha ndani bado kinahitajika. Au unaweza kuongeza kontena ndani ya .navbarkuweka katikati tu yaliyomo kwenye upau wa urambazaji usiobadilika au tuli .

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

Tumia chombo chochote kinachojibu ili kubadilisha upana wa maudhui katika upau wa urambazaji.

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

Uwekaji

Tumia huduma zetu za nafasi kuweka navbar katika nafasi zisizo tuli. Chagua kutoka fasta hadi juu, fasta hadi chini, au sticked hadi juu (kusonga na ukurasa mpaka kufikia juu, kisha kubaki hapo). Navbars zisizohamishika zinatumia position: fixed, kumaanisha kuwa zimetolewa kutoka kwa mtiririko wa kawaida wa DOM na zinaweza kuhitaji CSS maalum (kwa mfano, padding-topkwenye <body>) ili kuzuia mwingiliano na vipengele vingine.

Pia kumbuka kuwa .sticky-tophutumia position: sticky, ambayo haitumiki kikamilifu katika kila kivinjari .

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

Kusogeza

Ongeza .navbar-nav-scrollkwa .navbar-nav(au kipengele kingine kidogo cha upau wa uelekezaji) ili kuwezesha kusogeza kwa wima ndani ya maudhui yanayoweza kugeuzwa ya upau wa urambazaji uliokunjwa. Kwa chaguo-msingi, kusogeza huanza 75vh(au 75% ya urefu wa kituo cha kutazama), lakini unaweza kubatilisha hilo kwa sifa maalum ya CSS --bs-navbar-heightau mitindo maalum. Katika vituo vikubwa vya kutazama wakati upau wa urambazaji unapopanuliwa, maudhui yataonekana jinsi yanavyofanya katika upau chaguo-msingi.

Tafadhali kumbuka kuwa tabia hii inakuja na upungufu unaowezekana wa overflow-wakati kuweka overflow-y: auto(inayohitajika kusogeza maudhui hapa), overflow-xni sawa na auto, ambayo itapunguza maudhui ya mlalo.

Hapa kuna mfano wa upau wa urambazaji unaotumia .navbar-nav-scrollna style="--bs-scroll-height: 100px;", na huduma zingine za ziada za kuweka nafasi bora.

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

Tabia za mwitikio

Navbar zinaweza kutumia .navbar-toggler, .navbar-collapse, na .navbar-expand{-sm|-md|-lg|-xl|-xxl}madarasa kubainisha wakati maudhui yao yanaanguka nyuma ya kitufe. Pamoja na huduma zingine, unaweza kuchagua kwa urahisi wakati wa kuonyesha au kuficha vipengele fulani.

Kwa pau za urambazaji ambazo hazikunji kamwe, ongeza .navbar-expanddarasa kwenye upau wa urambazaji. Kwa pau za urambazaji zinazoanguka kila wakati, usiongeze .navbar-expanddarasa lolote.

Toggler

Vigeuzi vya Upau wa Uelekezaji vimepangiliwa kushoto kwa chaguo-msingi, lakini iwapo vitafuata kipengele cha ndugu kama .navbar-brand, vitapangwa kiotomatiki upande wa kulia kabisa. Kurejesha lebo yako kutabadilisha uwekaji wa kigeuzaji. Ifuatayo ni mifano ya mitindo tofauti ya kugeuza.

Bila .navbar-brandkuonyeshwa kwenye sehemu ndogo kabisa ya kuzuilia:

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

Kwa jina la chapa iliyoonyeshwa upande wa kushoto na kigeuza kulia:

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

Na kigeuza kushoto na jina la chapa kulia:

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

Maudhui ya nje

Wakati mwingine unataka kutumia programu-jalizi ya kukunja ili kuanzisha kipengele cha kontena kwa maudhui ambayo yamekaa nje ya faili ya .navbar. Kwa sababu programu-jalizi yetu inafanya kazi kwenye idna data-bs-targetkulinganisha, hiyo inafanywa kwa urahisi!

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>

Unapofanya hivi, tunapendekeza ujumuishe JavaScript ya ziada ili kusogeza lengo kiprogramu kwenye kontena linapofunguliwa. Vinginevyo, watumiaji wa kibodi na watumiaji wa teknolojia saidizi watakuwa na wakati mgumu kupata maudhui mapya yaliyofichuliwa - hasa ikiwa chombo kilichofunguliwa kitakuja mbele ya kigeuza kigeuza muundo katika muundo wa hati. Tunapendekeza pia uhakikishe kuwa kigeuza kigeuza kina aria-controlssifa, inayoelekeza kwenye idchombo cha maudhui. Kinadharia, hii inaruhusu watumiaji wa teknolojia ya usaidizi kuruka moja kwa moja kutoka kwa kigeuza hadi kwenye kontena inachodhibiti–lakini usaidizi kwa hili kwa sasa ni dhaifu sana.

Nje ya turubai

Badilisha upau wako wa kusogeza unaopanuka na kuporomoka kuwa droo ya nje ya turubai ukitumia programu-jalizi ya offcanvas. Tunapanua mitindo chaguo-msingi ya offcanvas na kutumia .navbar-expand-*madarasa yetu kuunda utepe wa usogezaji unaobadilika na unaonyumbulika.

Katika mfano ulio hapa chini, ili kuunda upau wa urambazaji wa offcanvas ambao kila mara hukunjwa katika sehemu zote za kukatisha, wacha .navbar-expand-*darasa kabisa.

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

Ili kuunda upau wa urambazaji wa nje wa turubai unaopanuka hadi kuwa upau wa urambazaji wa kawaida katika sehemu maalum ya kukatika kama vile lg, tumia .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

Vigezo

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

Kitanzi

Upau wa urambazaji unaojibu wa kupanua/kukunja madarasa (km, .navbar-expand-lg) huunganishwa na $breakpointsramani na kuzalishwa kupitia kitanzi katika 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;
        }
      }
    }
  }
}