Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati
Check
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.
  • Mpya katika v5.2.0: Mipau ya Nav inaweza kuwa na mandhari na vigeu vya CSS ambavyo vinaangaziwa kwa .navbardarasa la msingi. .navbar-lightimeacha kutumika na .navbar-darkimeandikwa upya ili kubatilisha vigeu vya CSS badala ya kuongeza mitindo ya ziada.
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 kituo cha mzazi.
  • Ongeza chaguo .navbar-scrollili kuweka max-heightna kusogeza maudhui ya upau wa urambazaji yaliyopanuliwa .

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

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>

Mfano huu hutumia mandharinyuma ( bg-light) na nafasi ( me-auto, mb-2, mb-lg-0, me-2) 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.

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>

Picha

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

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

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>

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.

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>

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

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>

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.

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>

Fomu

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

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>

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.

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>

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.

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>

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.

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>

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.

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

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>

Mipango ya rangi

Mpya katika v5.2.0: Mandhari ya Upau wa Uelekezaji sasa yanaendeshwa na vibadilishio vya CSS na yameacha .navbar-lightkutumika. Vigezo vya CSS vinatumika kwa .navbar, chaguo-msingi kwa mwonekano wa "nyepesi", na vinaweza kubatilishwa kwa .navbar-dark.

Mandhari ya Upau wa Uelekezaji ni rahisi zaidi kuliko hapo awali kutokana na mchanganyiko wa Bootstrap wa vigeu vya Sass na CSS. Chaguo-msingi ni "upau wa urambazaji" wetu kwa matumizi na rangi nyepesi za mandharinyuma, lakini pia unaweza kutuma maombi .navbar-darkya 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" 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 .

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>

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

html 
<nav class="navbar navbar-expand-lg 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, sticked juu (kusonga na ukurasa mpaka kufikia juu, kisha kukaa hapo), au sticked chini (kusonga na ukurasa mpaka kufikia chini, kisha kukaa. 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.

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>

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.

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>

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:

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>

Na jina la chapa lililoonyeshwa upande wa kushoto na kigeuza kulia:

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>

Na kigeuza kushoto na jina la chapa kulia:

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>

Maudhui ya nje

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

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>

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 wa urambazaji unaopanuka na kuporomoka kuwa droo ya nje ya turubai yenye kipengele cha offcanvas . Tunapanua mitindo chaguo-msingi ya offcanvas na kutumia .navbar-expand-*madarasa yetu kuunda utepe wa kusogeza unaobadilika na unaonyumbulika.

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

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>

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

Unapotumia offcanvas kwenye upau wa uelekezaji wa giza, fahamu kwamba huenda ukahitaji kuwa na mandharinyuma meusi kwenye maudhui ya offcanvas ili kuepuka maandishi kutosomeka. Katika mfano hapa chini, tunaongeza .navbar-darkna .bg-darkkwa .navbar, .text-bg-darkkwa .offcanvas, .dropdown-menu-darkkwa .dropdown-menu, na .btn-close-whitekwa .btn-closestyling sahihi na offcanvas giza.

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

Vigezo

Imeongezwa katika v5.2.0

Kama sehemu ya mbinu ya mabadiliko ya vigeu vya CSS ya Bootstrap, pau za urambazaji sasa zinatumia viwezo vya ndani vya CSS .navbarili kuboresha ubinafsishaji wa wakati halisi. Thamani za anuwai za CSS zimewekwa kupitia Sass, kwa hivyo ubinafsishaji wa Sass bado unatumika, pia.

  --#{$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};

Vigezo vingine vya ziada vya CSS pia vipo kwenye .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);

Ubinafsishaji kupitia vigeu vya CSS unaweza kuonekana kwenye .navbar-darkdarasa ambapo tunabatilisha thamani mahususi bila kuongeza viteuzi rudufu vya CSS.

  --#{$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)};

Vigezo vya Sass

Vigezo kwa pau zote za urambazaji:

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

Vigezo vya upau wa urambazaji wa giza :

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

Kitanzi cha Sass

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: 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;
          }
        }
      }
    }
  }
}