in English

Navbar rehegua

Kuatiahaipyre ha techapyrã Bootstrap iñakãrapuꞌa jeguatarã ipuꞌakapávape g̃uarã, navbar. Oike pytyvõ marca, jeguata ha hetave mba’e, oikehápe pytyvõ ore plugin colapso rehegua.

Ko páhinape

Mba’éichapa omba’apo

Ko’ápe oĩ mba’épa tekotevẽ reikuaa reñepyrũ mboyve navbar reheve:

Umi navbar oikotevẽ peteĩ envoltura .navbarndive umi clase de .navbar-expand{-sm|-md|-lg|-xl|-xxl}colapso ha esquema de color ombohováivape g̃uarã.
Umi Navbar ha ipypegua haꞌehína fluido por defecto. Emoambue mba yru omombyte hagua ipypuku horizontal opaichagua hendáicha.
Eipuru ore clase utilidad espaciado ha flex rehegua econtrola hag̃ua espaciado ha alineación navbar ryepýpe.
Umi Navbar ombohovái por defecto, ha katu ikatu remoambue pya’e remoambue hag̃ua upéva. Teko ombohováiva odepende ore Collapse JavaScript plugin rehe.
Ojeasegura ojeikekuaaha ojeporúvo peteĩ <nav>elemento térã, ojeporúramo peteĩ elemento genéricovéva haꞌeháicha peteĩ <div>, emoĩ peteĩ role="navigation"opaite navbar-pe ojekuaa hag̃ua hesakã porãme haꞌeha peteĩ región hito rehegua umi oiporúvape g̃uarã umi tecnología oipytyvõva.
Ehechauka mbaꞌe koꞌag̃agua eipurúvo aria-current="page"páhina koꞌag̃aguápe aria-current="true"g̃uarã térã mbaꞌe koꞌag̃aguápe g̃uarã peteĩ aty’ípe.
Ipyahúva v5.2.0-pe: Navbars ikatu oñemboheko tema CSS mbaꞌekuaarã reheve oñembohapéva .navbarclase base-pe. .navbar-lightndojepuruvéima ha .navbar-darkojehai jey oñemboyke hag̃ua CSS mbaꞌekuaarã oñembojoapy rangue estilo ambuéva.

Pe efecto animación rehegua ko componente rehegua odepende pe prefers-reduced-motionconsulta medio rehegua rehe. Ehecha pe sección movimiento reducido ore kuatia accesibilidad rehegua .

Contenido oipytyvõva

Umi Navbar oúva pytyvõ incorporado reheve peteĩ pokõi subcomponente-pe g̃uarã. Eiporavo ko’ãva apytégui tekotevẽháicha:

.navbar-brandne empresa, producto térã proyecto rérape g̃uarã.
.navbar-navpeteĩ navegación ijyvatetereíva ha ligero-pe g̃uarã (oikehápe pytyvõ umi desplegable-pe g̃uarã).
.navbar-togglerojepuru hag̃ua ore plugin de collapso ha ambue jepokuaa jeguata jeguerahauka rehegua ndive .
Utilidades de flexión ha espaciado oimeraẽva control ha acción formulario rehegua.
.navbar-textoñembojoapy hag̃ua jehaipyre vore oñembohapéva verticalmente.
.collapse.navbar-collapseoñemboaty ha oñeñomi hag̃ua navbar contenido peteĩ punto de ruptura tuvakuéra rupive.
Emoĩ peteĩ opcional .navbar-scrollemohenda hag̃ua peteĩ max-heightha eñemongu’e navbar contenido oñembotuicháva .

Ko’ápe oĩ peteĩ techapyrã opaite subcomponente oikeva’ekue peteĩ navbar ombohováiva tesape rehegua ho’áva ijeheguiete lgpunto de ruptura (tuichávape).

html rehegua

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

Ko techapyrã oipuru umi clase utilidad fondo ( bg-light) ha espaciado ( me-auto, mb-2, mb-lg-0, ) rehegua.me-2

Téra

The .navbar-brandikatu ojeporu hetavéva elemento-pe, ha katu peteĩ ancla ombaꞌapo porãve, oĩgui elemento ikatúva oikotevẽ clase utilidad rehegua térã estilo personalizado.

Maranduhai

Emoĩ nde jehaipyre peteĩ elemento ryepýpe .navbar-brandmbo’esyry ndive.

html rehegua

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

Ta'ãnga

Ikatu remyengovia jehaipyre oĩva ryepýpe .navbar-brandpeteĩ <img>.

html rehegua

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

Ta’anga ha jehaipyre

Ikatu avei eipuru peteĩva umi utilidad adicional emoĩ hag̃ua peteĩ taꞌãngamýi ha jehaipyre peteĩ jave. Ñañamindu’u oñembojoapýha .d-inline-blockha .align-text-tophesegua <img>.

html rehegua

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

Nav

Umi enlace navegación rehegua omopu’ã ñande .navopción-kuéra rehe iclase modificador imba’éva reheve ha oikotevẽ ojepuru umi clase toggler estilo ombohováiva hekopete. Navbar-pe jeguata okakuaáta avei oguereko hag̃ua heta espacio horizontal ikatuháicha eñongatu hag̃ua ne navbar contenido oñemohenda porã hag̃ua.

Emoĩve pe .activeclase .nav-linkehechauka hag̃ua pe páhina koʼag̃agua.

Eñatendéke emoĩva’erãha avei aria-currentatributo activo rehe .nav-link.

html rehegua

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

Ha roiporúgui clase ore navs-pe g̃uarã, ikatu rejehekýi pe enfoque basado en lista-gui enteramente reipotáramo.

html rehegua

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

Ikatu avei reipuru umi desplegable nde navbar-pe. Umi menú desplegable oikotevẽ peteĩ elemento envoltura oñemohenda hag̃ua, upévare eñangareko eipuru hag̃ua elemento añónte ha anidado ojehechaukaháicha .nav-itemha .nav-linkojehechaukaháicha iguýpe.

html rehegua

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

Umi Formulario rehegua

Emoĩ opaichagua control ha componente formulario rehegua peteĩ navbar ryepýpe:

html rehegua

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

Pya’e mitã elemento .navbarjepuru flex diseño ha oñemoĩta por defecto justify-content: space-between. Eipuru utilidad flex adicional oñeikotevẽháicha emohenda hag̃ua ko jepokuaa.

html rehegua

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

Umi grupo de entrada omba’apo, avei. Nde navbar haꞌeramo peteĩ formulario tuichakue, térã hetave peteĩ formulario, ikatu eipuru <form>elemento mbaꞌeryru ramo ha eñongatu michĩmi HTML.

html rehegua

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

Opaichagua botón oñepytyvõ ko’ã formulario navbar ryepýpe, avei. Kóva haꞌe avei peteĩ tuicha manduꞌa ikatuha ojepuru umi utilidad alineación vertical rehegua oñemohenda hag̃ua umi elemento tuichakue iñambuéva.

html rehegua

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

Maranduhai

Umi Navbar ikatu oguereko jehaipyre pehẽngue pytyvõ rupive .navbar-text. Ko mboꞌepy omohenda alineación vertical ha espaciado horizontal umi cadena jehaipyre rehegua.

html rehegua

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

Oñembojehe’a ha oñembojoaju ambue componente ha utilidad ndive oñeikotevẽháicha.

html rehegua

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

Umi esquema de colores rehegua

Ipyahúva v5.2.0-pe: Navbar temática koꞌág̃a oñemombarete CSS mbaꞌekuaarã rupive ha .navbar-lightndojepuruvéima. Umi CSS mbaꞌekuaarã ojepuru .navbar, oñembohekopyréva “tesape” jehechaukarãme, ha ikatu oñemboyke .navbar-dark.

Umi tema Navbar rehegua ndahasýi yma guarégui Bootstrap ombojoajúgui Sass ha CSS mbaꞌekuaarã. Pe por defecto ha’e ore “navbar tesape” ojepuru hag̃ua umi sa’y tenondegua tesape ndive, ha katu ikatu avei ejerure .navbar-darkumi sa’y tenondegua iñypytũvape g̃uarã. Upéi, emohenda umi .bg-*utilidad ndive.

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

Mba’yrukuéra

Jepémo noñeikotevẽi, ikatu embojere peteĩ navbar peteĩ .container-pe emombyte hag̃ua peteĩ página-pe–jepémo eñatendéke oñeikotevẽha gueteri peteĩ mba’yru hyepypegua. Térã ikatu emoĩ peteĩ mba’yru ryepýpe oĩva .navbaremombyte hag̃uánte umi mba’e oĩva peteĩ navbar yvategua fijo térã estático-pe .

html rehegua

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

Eipuru oimeraẽva umi mba’e’oka ombohováiva emoambue hag̃ua mba’éichapa tuicha oñepresenta umi mba’ekuaarã oĩva nde navbar-pe.

html rehegua

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

Oñemohenda haguã

Eipuru ore utilidad tenda rehegua emoĩ hag̃ua navbar umi tenda ndahaꞌeiva estática-pe. Eiporavo ojejokóva yvate gotyo, oñemboguapýva iguy gotyo, ojepysóva yvate gotyo (ojeguata páhina ndive ohupyty peve yvate gotyo, upéi opyta upépe), térã ojepysóva iguy gotyo (ojeguata páhina ndive ohupyty peve iguy gotyo, upéi opyta). amo).

Umi navbar oñemyatyrõva oipuru position: fixed, heꞌiséva ojeipeꞌaha DOM jeguata jepiguágui ha ikatu oikotevẽ CSS jeporupyre (techapyrã, ) padding-toprehe <body>ani hag̃ua oñembojeheꞌa ambue elemento ndive.

html rehegua

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

html rehegua

<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>

html rehegua

<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>

html rehegua

<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

html rehegua

<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

Ojedesplazávo

Emoĩ .navbar-nav-scrollpeteĩ .navbar-nav(térã ambue subcomponente navbar-pe) emboguata hag̃ua desplazamiento vertical umi contenido oñembohasáva ryepýpe peteĩ navbar oñembyaíva ryepýpe. Por defecto, desplazamiento oñepyrũ 75vh(térã 75% jehechaukaha yvatekuégui), ha katu ikatu embogue upéva CSS mba’ekuaarã tee --bs-navbar-heighttérã estilo jeporupyre reheve. Umi jehechaukaha tuichavévape oñembotuichave jave navbar, ojehechaukáta contenido ojehechaháicha peteĩ navbar por defecto-pe.

Eñatendéke ko jepokuaa oúha peteĩ mba’e’apo’ỹ ikatúva reheve overflow—oñemohenda jave overflow-y: auto(oñeikotevẽva ojedesplaza hag̃ua contenido ko’ápe), overflow-xha’e pe equivalente auto, oikytĩtava algún contenido horizontal.

Ko’ápe oĩ peteĩ techapyrã navbar oiporúva .navbar-nav-scrollcon style="--bs-scroll-height: 100px;", oguerekóva algunas utilidades margen extra espaciado iporãvévape g̃uarã.

html rehegua

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

Tekokuéra ombohováiva

Umi Navbar ikatu oipuru .navbar-toggler, .navbar-collapse, ha .navbar-expand{-sm|-md|-lg|-xl|-xxl}mbo’esyrykuéra ohechakuaa hag̃ua araka’épa oñehundi ikonteído peteĩ botón rapykuéri. Oñembojoajúvo ambue utilidad ndive, ikatu eiporavo pyaꞌete arakaꞌepa rehechauka térã emokañy umi elemento particular.

Umi navbar araka’eve noñehundírivape g̃uarã, emoĩ pe .navbar-expandmbo’esyry navbar-pe. Umi navbar akóinte oñembyaívape g̃uarã, ani remoĩ mba’eveichagua .navbar-expandmbo’esyry.

Toggler rehegua

Umi togglers Navbar-pegua oñemohenda izquierda-pe por defecto, ha katu osegíramo peteĩ elemento hermano-icha peteĩ .navbar-brand, oñembojoajúta ijeheguiete akatúa gotyo. Embojere nde marcado ombojere jeýta pe toggler ñemohenda. Aguĩve oĩ techapyrã opaichagua estilo de toggle rehegua.

Ndojehechaukái .navbar-brandreheve pe punto de ruptura michĩvévape:

html rehegua

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

Peteĩ marca réra ojehechaukáva ijasu gotyo ha toggler akatúa gotyo:

html rehegua

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

Peteĩ toggler reheve ijasu gotyo ha marca réra akatúape:

html rehegua

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

Contenido externo rehegua

Sapy’ánte eipuruse pe plugin de collapso emoñepyrũ hag̃ua peteĩ elemento contenedor rehegua contenido oguapýva estructuralmente okápe .navbar. Ore plugin omba’apo rupi pe idha data-bs-targetjoaju rehe, upéva ojejapo ndahasýi!

Collapsed content

Toggleable via the navbar brand.

html rehegua

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

Kóva rejapo jave, romomarandu emoĩ hag̃ua JavaScript ambuéva emongu’e hag̃ua enfoque programáticamente mba’yrúpe ojepe’ávo. Nda’upéichairamo, umi teclado puruhára ha umi tecnología pytyvõhára oipurúva oiméne hasýta ojuhúvo contenido ojekuaa pyahúva - particularmente pe contenedor ojeipe’ava’ekue oúramo toggler mboyve kuatia estructura-pe. Avei romomarandu eñangareko hag̃ua toggler oguerekoha aria-controlsatributo, ohechaukáva pe idmbaꞌeryru contenido rehegua. Teoría-pe, kóva oheja umi tecnología pytyvõhára puruhárape osaltávo directamente pe toggler-gui pe contenedor ha’e ocontrolávape–ha katu pytyvõ kóvape g̃uarã ko’áĝaite ha’e peteĩ parcheiterei.

Fuera de lona rehegua

Emoambue nde navbar oñembotuicháva ha oñemboguejýva peteĩ cajón offcanvas-pe componente offcanvas reheve . Rombohape mokõive estilo por defecto offcanvas ha roipuru ore .navbar-expand-*mbo’esyrykuéra romoheñói hag̃ua peteĩ barra lateral navegación dinámica ha flexible.

Pe techapyrã iguýpe, ojejapo hag̃ua peteĩ navbar offcanvas akóinte oñembotyvaꞌekue opaite punto de ruptura rupi, ojeheja rei pe .navbar-expand-*mboꞌepypaite.

html rehegua

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

Ojejapo hag̃ua peteĩ navbar offcanvas oñembotuicháva peteĩ navbar normal-pe peteĩ punto de ruptura específico-pe haꞌeháicha lg, eipuru .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>

Oipurúvo offcanvas peteĩ navbar iñypytũvape, eikuaava’erã ikatuha tekotevẽ reguereko peteĩ fondo iñypytũva pe contenido offcanvas rehegua ani hag̃ua pe jehaipyre ojelee’ỹ. Tembiecharã iguýpe, ñamoĩ .navbar-darkha .bg-darkpe .navbar, .text-bg-darkpe .offcanvas, .dropdown-menu-darkpe .dropdown-menu, ha .btn-close-whiteto .btn-close-pe oñembojegua porã hag̃ua peteĩ offcanvas iñypytũva reheve.

html rehegua

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

Variables rehegua

Oñemoĩve v5.2.0-pe

Pehẽngue ramo Bootstrap CSS mbaꞌekuaarã oñembohapévape, umi navbar koꞌág̃a oipuru umi mbaꞌekuaarã CSS tetãygua on .navbaroñembotuichave hag̃ua ñembohekopyrã tiempo real-pe. Umi mbaꞌekuaarã CSS mbaꞌekuaarãme g̃uarã oñemohenda Sass rupive, upévare oipytyvõ gueteri Sass jeporupyre, avei.

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

Oĩ avei CSS mba’ekuaarã ambuéva oĩva ko’ápe .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);

Personalización umi variable CSS rupive ikatu ojehecha .navbar-darkclase-pe ñamboykehápe valor específico ñamoĩ’ỹre umi selector CSS mokõi jey.

  --#{$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 mba’ekuaarã

Variables opaite navbar-pe g̃uarã:

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

Variables navbar iñypytũvape g̃uarã : .

$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 vore rehegua

Umi clase expand/collapse navbar ombohováiva (techapyrã, .navbar-expand-lg) oñembojoaju $breakpointsmapa ndive ha oñegenera peteĩ bucle rupive 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;
          }
        }
      }
    }
  }
}