Source

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.

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}colapso ha esquema de color ombohováivape g̃uarã.
  • Umi Navbar ha ipypegua haꞌehína fluido por defecto. Eipuru umi mba’yru opcional emombyky hag̃ua ipypuku horizontal.
  • 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.
  • Umi navbar oñeñomi por defecto oñeimprimi jave. Ojeforsa oñeimprimi hag̃ua oñembojoapývo .d-printpe .navbar. Ehecha pe mbo’esyry utilidad jehechaukarã rehegua.
  • 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.

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 .

Emoñe’ẽve peteĩ techapyrã ha lista umi subcomponente oipytyvõva 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 .
  • .form-inlineoimeraẽva forma control ha acción-kuérape g̃uarã.
  • .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.

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Ko techapyrã oipuru umi clase utilidad color ( bg-light) ha espaciado ( my-2, my-lg-0, mr-sm-0, ) rehegua.my-sm-0

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.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

Oñemoĩvo taꞌãngamýi pe .navbar-brandvoluntad-pe oiméne akóinte oikotevẽta estilo térã utilidad personalizada tuichakue hekopete hag̃ua. Koʼápe oĩ unos kuánto ehémplo jahechauka hag̃ua.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</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.

Umi estado activo—con .active—ohechauka hag̃ua página koꞌag̃agua ikatu ojeporu directamente .nav-links térã ituvakuéra inmediato .nav-items-pe.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Ikatu avei reipuru umi desplegable nde navbar nav-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.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Umi Formulario rehegua

Emoĩ opaichagua control ha componente formulario rehegua peteĩ navbar ryepýpe .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Inmediatamente mitãnguéra elemento .navbarojeporúva flex diseño ha opytáta por defecto justify-content: space-between. Eipuru utilidad flex adicional oñeikotevẽháicha emohenda hag̃ua ko jepokuaa.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Umi aty oikeva’ekue omba’apo, avei:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <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.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" 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.

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>

Umi esquema de colores rehegua

Pe temática pe navbar araka’eve ndaha’éikuri ndahasýiva oñembojoajúgui umi clase ha background-colorutilidad temática rehegua. Eiporavo apytégui .navbar-lightojepuru hag̃ua tapykuehoha sa’ykuéra ndive, térã .navbar-darktapykuehoha sa’ykuéra 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 navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Mba’yrukuéra

Jepémo natekotevẽi, ikatu embojere peteĩ navbar peteĩ .container-pe emombyte hag̃ua peteĩ páhinape térã emoĩ peteĩ hyepýpe emombyte hag̃uánte peteĩ navbar yvategua fija térã estática ryepýpe .

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

Pe mba’e’oka oĩ jave nde navbar ryepýpe, imbojegua horizontal ojeipe’a umi punto de ruptura ijyvatevévape nde .navbar-expand{-sm|-md|-lg|-xl}clase oje’évagui. Kóva oasegura ani hag̃ua roñembojoapy relleno rehe tekotevẽ’ỹre umi jehechaukaha ijyvatevévape ne navbar oñemboguejy jave.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <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 oñemboguapyvaꞌekue yvate gotyo, oñemboguapyvaꞌekue iguy gotyo térã ojepysóva yvate gotyo (ojedesplaza pe páhina ndive og̃uahẽ meve yvate gotyo, upéi opyta upépe). 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.

Avei eñatendéke .sticky-topoipuruha position: sticky, ndojeguerohorýiva opaite kundahárape .

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

Tekokuéra ombohováiva

Umi Navbar ikatu oipuru .navbar-toggler, .navbar-collapse, ha .navbar-expand{-sm|-md|-lg|-xl}mbo’esyry oñemoambue hag̃ua ikonteído oñehundi jave 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áiva .navbar-brandpunto de ruptura ijyvatevévape:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Contenido externo rehegua

Sapy’ánte eipuruse pe plugin ñemboguejy emoñepyrũ hag̃ua contenido kañymby ambue hendápe página-pe. Ore plugin omba’apo rupi pe idha data-targetjoaju rehe, upéva ojejapo ndahasýi!

<div class="pos-f-t">
  <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">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>