Saltar al contenido principal Salta a docs navegación
Check
in English

Navbar nisqa

Qillqakuna chaymanta ejemplokuna Bootstrap kallpasapa, kutichiq puriy umalliqpaq, navbar kaqpaq. Yanapakuy markapaq, puriypaq chaymanta aswanta yapan, chaymanta yanapakuy urmachiy pluginniykupaq.

Kay p'anqapi

Imayna llamkan

Kaypi yachanayki tiyan manaraq navbar kaqwan qallarichkaspa:

  • Navbars huk p'istuyta munan .navbarkutichiq .navbar-expand{-sm|-md|-lg|-xl|-xxl}urmaypaq chaymanta llimp'i esquema clasekuna kaqpaq.
  • Navbars chaymanta contenidosninkuqa fluido kanku ñawpaqmanta. Contenedorta tikray, horizontal anchonkuta hukniraymanta limitananpaq.
  • Espaciamiento chaymanta flex utilidad claseykuta llamk'achiy espaciamiento chaymanta alineación kamachiypaq navbars ukhupi.
  • Navbars kutichiq kanku ñawpaqmanta, ichaqa chayta tikranaykipaq mana sasachu tikrayta atikunki. Kutichiy ruwayqa Collapse JavaScript pluginniykumanta kanqa.
  • Huk elementota llamk'achispa yaykuy atiyta qhaway <nav>utaq, sichus huk aswan genérico elementota llamk'achkanki kayhina huk <div>, huk sapa navbar kaqman yapay role="navigation"sut'imanta riqsichinapaq huk suyu suyu hina yanapakuq tecnologiakuna llamk'aqkunapaq.
  • aria-current="page"Kunan kaq p'anqapaq icha aria-current="true"huk huñupi kunan kaqpaq llamk'achispa kunan kaq kaqta rikuchiy.
  • Musuq v5.2.0 kaqpi: Navbars CSS tikraqkunawan temayuq kanman mayqinkunachus .navbarbase clase kaqman alcanceyuq kanku. .navbar-lightmanaña llamk'achisqachu chaymanta .navbar-darkwakmanta qillqasqa CSS tikraqkunata llallinanpaq yapa estilokuna yapanaykimantaqa.
Kay componentepa animación efectonqa prefers-reduced-motionmedios tapuymanta hapirin. Yaykuna qillqaykumanta pisiyachisqa kuyuy t'aqapi qhaway .

Yanapasqa contenido

Navbars huk makilla sub-componentes kaqpaq ruwasqa yanapakuywan hamunku. Necesitasqaykiman hina kaykunata akllay:

  • .navbar-brandempresaykipaq, ruruykipaq utaq proyecto sutiykipaq.
  • .navbar-navhuk hunt'a sayayniyuq chaymanta llamp'u puriypaq (urqunapaq yanapakuywan kuska).
  • .navbar-togglerurmachiy pluginniykuwan chaymanta wak puriy tikray ruwaykunawan llamk'anapaq.
  • Flex chaymanta espaciado yanapakuykuna ima formulario controles kaqpaq chaymanta ruwaykunapaq.
  • .navbar-textsayaq chawpichasqa qillqap watiqankunata yapanapaq.
  • .collapse.navbar-collapsenavbarpa imayna kanankunata huk tayta rakinawan huñunapaq chaymanta pakanapaq.
  • Huk akllana yapay huk .navbar-scrollchuranapaq max-heightchaymanta mast'arisqa navbar contenidota kuyuchiy .

Kaypi huk ejemplo llapa sub-componentes kaqmanta huk kutichiq k'anchay-tema navbar kaqpi churasqa chaymanta kikinmanta urmayku lg(hatun) p'akiypi.

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

Kay rikch'anaqa qhipa ( bg-light) chaymanta espaciamiento ( me-auto, mb-2, mb-lg-0, me-2) yanapakuy clasekunata llamk'achin.

Marca

The .navbar-brandaswan elementokunaman churakunman, ichaqa huk ancla aswan allinta llamkan, wakin elementokuna yanapakuy clasekuna utaq sapanchasqa estilokuna mañakunman hina.

Qillqa

Huk elemento ukhupi qillqaykita yapay .navbar-brandclasewan.

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

Rikchay

Chay ukhupi qillqasqata .navbar-brandhukwan tikrayta atinki <img>.

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

Imagen y texto

Wakin yapasqa yanapakuykunatapas llamk'achiy atikunki huk siq'ita chaymanta qillqata huk pachallapi yapanaykipaq. Reparay chay yapasqa kasqanmanta .d-inline-blockhinaspa .align-text-topchaypi <img>.

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

Navbar puriy t'inkikuna .navakllanaykupi ruwanku kikin tikraq clase kaqwan chaymanta toggler clasekuna llamk'ayta munanku allin kutichiq estilopaq. Navbarkunapi puriypas wiñanqa aswan horizontal espaciota hap'inanpaq atikuq hina navbar kaqpi contenidokunayki allin chiqanchasqa kananpaq.

.activeChay claseta yapay .nav-linkkunan p’anqata rikuchinaykipaq.

aria-currentAma hina kaspa, llamk'achisqa kaqpipas atribututa yapanayki tiyan .nav-link.

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

Hinallataq imaraykuchus navsniykupaq clasekunata llamk'achiyku, lista-based enfoqueta tukuyninpi hark'ayta atikunki sichus munanki.

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

Navbar nisqaykipipas urayk'achiqkunatam llamk'achiyta atinki. Uray menúkuna huk p'istu elementota churanapaq munanku, chayrayku ama hina kaspa sapaq chaymanta anidado elementokuna llamk'achiyta .nav-itemchaymanta .nav-linkuraypi rikuchisqa hina.

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

Formas

Huk navbar ukhupi imaymana formulario kamachiykunata chaymanta componentekunata churay:

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

Chaylla wawa elementokuna .navbarllamk'achiyta flex churaymanta chaymanta ñawpaqmanta churasqa kanqa justify-content: space-between. Kay ruwayta allichanapaq necesitasqanmanhina yapasqa flex yanapakuykunata llamk'achiy.

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

Yaykuy huñukunapas llamkanku, chaynallataq. Sichus navbarniyki huk hunt'asqa formulario kaq, utaq aswan huk formulario kaq, <form>elementota waqaychana hina llamk'achiy atikunki chaymanta wakin HTML waqaychay.

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

Imaymana botones yanapasqa kanku kay navbar formulariokuna huknin hina, chaymanta. Kayqa huk hatun yuyarichiypas kan, sayaq chiqanchay yanapakuykunata hukniray sayayniyuq elementokunata chiqanchaypaq llamk'achiy atikun.

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

Qillqa

Navbars nisqapiqa qillqasqapa bits nisqakunam kanman .navbar-text. Kay claseqa qillqap watiqankunapaq sayaq chiqanchayta, sayaq chiqanchayta ima allichan.

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

Huk componentekunawan chaymanta utilidadkunawan necesitasqanmanhina chaqruspa tupachiy.

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

Esquemas de colores

Musuq v5.2.0 kaqpi: Navbar tema kunan CSS tikraqkunawan kallpachasqa kachkan chaymanta .navbar-lightmanaña llamk'achisqachu. CSS tikraqkuna , kaqman churasqa kanku .navbar, “k’anchay” rikch’ayman ñawpaqmanta churasqa, chaymanta llallichisqa kanman .navbar-dark.

Navbar temakuna aswan facil kanku ñawpaqmanta Bootstrap kaqpa Sass chaymanta CSS variablekuna huñusqa kasqanrayku. .navbar-darkÑawpaqmanta churasqa “k’anchay navbar” nisqayku kachkan k’anchay qhipa llimp’ikunawan llamk’anapaq, ichaqa yana qhipa llimp’ikunapaqpas mañakuyta atikunki . Chaymanta, .bg-*utilidadkunawan ruway.

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

Contenedores

Mana mañasqachu kaptinpas, huk navbar .containerhuk p'anqapi chawpichaypaq huk p'anqapi chawpichaypaq p'istuy atikunki–ichaqa huk ukhu waqaychana mañasqaraq kaqta qhaway. Utaq huk waqaychana ukhupi yapayta atikunki huk takyasqa utaq mana kuyusqa pata navbar.navbar kaqpa kaqninkunallata chawpichaypaq .

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

Mayqin kutichiq waqaychanakunatapas llamk'achiy mayk'a ancho kaqhina navbarniykipi rikuchisqa kaqta tikranaykipaq.

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

Colocación

Posición yanapakuyniyku llamk'achiy navbars mana estático posiciónkunapi churanapaq. Akllay pataman takyasqa, urayman takyasqa, pataman k'askasqa (p'anqawan kuyuy pataman chayanankama, chaymantataq chaypi qhipakun), icha urayman k'askasqa (p'anqawan kuyuy urayman chayanankama, chaymantataq qhipakun). wakpi).

Allinchasqa navbarkuna llamk'achinku position: fixed, niyta munan paykuna DOM kaqpa normal puriyninmanta aysasqa kanku chaymanta sapanchasqa CSS (kayhina, padding-topkaqpi <body>) huk elementokunawan mana tupachiyta mañakunman.

html nisqapi 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
html nisqapi 
<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
html nisqapi 
<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
html nisqapi 
<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
html nisqapi 
<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

Desplazamiento

.navbar-nav-scrollHuk (utaq huk navbar sub-componente kaqman) yapay , .navbar-navsayaq kuyuchiyta atichinanpaq huk urmasqa navbar kaqpa tikranapaq kaqnin ukhupi. Ñawpaqmanta, kuyuchiyqa 75vh(utaq 75% qhaway punku sayaymanta) qallarikun, ichaqa chayta llaqta CSS sapanchasqa kaqninwan --bs-navbar-heightutaq sapanchasqa estilokunawan llalliyta atikunki. Aswan hatun qhawanakunapi mayk'aq navbar mast'arisqa, contenido rikhurinqa imaynachus huk ñawpaqmanta navbar kaqpi ruwan.

Ama hina kaspa, kay ruway huk mana allin atiywan hamun overflow—mayk'aq churay overflow-y: auto(kaypi willayta kuyuchinapaq mañasqa), overflow-x, kaqwan kikin kachkan auto, mayqinchus wakin horizontal willayta kuchunqa.

Kaypi huk ejemplo navbar kaqwan llamk'achkan .navbar-nav-scroll, style="--bs-scroll-height: 100px;"wakin yapasqa margen yanapakuykunawan allin espaciamiento kaqpaq.

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

Kutichiq ruwaykuna

Navbars .navbar-toggler, .navbar-collapse, chaymanta .navbar-expand{-sm|-md|-lg|-xl|-xxl}clasekuna llamk'achiyta atinku mayk'aqchus contenidonku huk ñit'ina qhipanpi urmaykusqanmanta yachanapaq. Huk yanapakuykunawan kuskachasqa, mana sasachu akllayta atikunki mayk'aq rikuchiyta utaq pakayta wakin elementokunata.

Mana hayk'aqpas urmaq navbarkunapaq, .navbar-expandnavbar kaqpi claseta yapay. Sapa kuti urmaq navbarkunapaq, ama ima .navbar-expandclasetapas yapaychu.

Toggler nisqa

Navbar tikraqkuna ñawpaqmanta lluq'i-t'inkisqa kanku, ichaqa huk wawqi elementota huk hina qatiptinkuqa .navbar-brand, kikinmanta karu pañaman chiqanchasqa kanqa. Markayki tikrayqa tikraqpa churayninta tikranqa. Uraypi hukhina toggle estilokunamanta ejemplokuna kachkan.

.navbar-brandAswan huch'uy p'akiypi mana rikuchisqa kaptin:

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

Lloq’e ladopi rikuchisqa marca sutiwan, paña ladopitaq toggler nisqawan:

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

Lloq’e ladopi huk toggler nisqawan, paña ladopitaq marca sutiwan:

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

Hawamanta willakuy

Wakin kuti, urmachiy plugin llamk'achiyta munanki huk waqaychana elementota llamk'achinapaq, estructuralmente hawapi tiyaq contenidopaq .navbar. Imaraykuchus pluginniyku llamk'an idchaymanta data-bs-targettupachiypi, chayqa facil ruwakun!

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

Kayta ruwanki, huk JavaScript yapasqa churayta yuyaychayku, kichasqa kaqtin programamanta enfoqueta waqaychanaman kuyuchinapaq. Mana hina kaqtinqa, teclado kaqmanta llamk'aqkuna chaymanta yanapakuq tecnologiakuna kaqmanta llamk'aqkuna ichapas sasachakuyniyuq kanqanku musuq rikuchisqa willayta tarinankupaq - aswanta sichus kichasqa waqaychana qillqap ruwayninpi toggler ñawpaqninpi hamun. Hinallataq, toggler aria-controlsatributoyuq kasqanmanta qhawayta yuyaychayku, idchaymanta chay contenido waqaychanamanta rikuchispa. Teoría kaqpi, kayqa yanapakuq tecnologia kaqmanta ruwaqkunaman chiqamanta saltayta saqin kay toggler kaqmanta chaymanta controlasqan waqaychanaman–ichaqa kaypaq yanapakuy kunan pacha ancha parche kaq.

Fuera de lona

Mastarikuq chaymanta urmachkaq navbarniyki huk offcanvas cajón kaqman offcanvas componente kaqwan tikray . Iskaynin offcanvas ñawpaqmanta ruwasqa estilokuna mast'ariyku chaymanta .navbar-expand-*claseykuta llamk'achiyku huk dinamico chaymanta flexible puriy lado barra ruwanapaq.

Uraypi rikch'anapi, huk offcanvas navbar ruwanapaq mayqinchus sapa kuti llapa p'akisqakuna chimpapi urmasqa kachkan, .navbar-expand-*claseta tukuyninpi saqiy.

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

Huk offcanvas navbar ruwanapaq mayqinchus huk normal navbar kaqman mast'arikun huk específico breakpoint kaqpi hina lg, llamk'achiy .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>

Offcanvas huk yana navbar kaqpi llamk'achkaspa, yachay, huk yana qhipa kaq offcanvas kaqpi ruwanayki tiyan mana qillqa mana ñawirinapaq kananpaq. Uraypi kaq rikch'anapi, yapayku .navbar-darkchaymanta , .bg-darkkaqman , kaqman , chaymanta kaqman allin estilo ruwanapaq huk yana offcanvas kaqwan ..navbar.text-bg-dark.offcanvas.dropdown-menu-dark.dropdown-menu.btn-close-white.btn-close

html nisqapi 
<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 nisqa

Variables nisqakuna

v5.2.0 nisqapi yapasqa

Bootstrap kaqpa wiñaq CSS tikraqkuna asuykuyninmanta huknin hina, navbars kunan llaqta CSS tikraqkunata llamk'achinku .navbarallinchasqa chiqa pacha ruwanapaq. CSS tikraqkunapaq chanikuna Sass kaqnintakama churasqa, chayrayku Sass ruwanakuna yanapasqaraq kachkan, chaymanta.

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

Wakin yapasqa CSS tikraqkunapas kaypi kachkan .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);

CSS tikraqkuna kaqnintakama ruwayqa clase kaqpi rikukunman .navbar-darkmaypi sapanchasqa chanikunata mana iskay kuti CSS akllanakunata yapaspa llallichiyku.

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

Sass variables nisqakuna

Llapan navbarkunapaq variables:

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

Tutayaq navbarpaq variables :

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

Sass llimp’i

Kutichiq navbar mast'ariy/urmay clasekuna (kayhina, .navbar-expand-lg) mapawan hukllachasqa kanku $breakpointschaymanta huk llimp'iwan ruwasqa kanku 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;
          }
        }
      }
    }
  }
}