Source

Navbar nisqa

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

Imayna llamkan

Kaypi yachanayki tiyan manaraq navbar kaqwan qallarichkaspa:

  • Navbars huk p'istuyta munan .navbarkutichiq .navbar-expand{-sm|-md|-lg|-xl}urmaypaq chaymanta llimp'i esquema clasekuna kaqpaq.
  • Navbars chaymanta contenidosninkuqa fluido kanku ñawpaqmanta. Utilizar contenedores opcionales para limitar su ancho horizontal.
  • 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.
  • Navbarkuna ñawpaqmanta pakasqa kachkan imprimiypi. .d-printChaykunata impriminankupaq obligay, chayman yapaspa .navbar. Qhawachiy yanapakuy claseta qhaway .
  • 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.

Kay componentepa animación efectonqa prefers-reduced-motionmedios tapuymanta hapirin. Yaykuna qillqaykumanta pisiyachisqa kuyuy t'aqapi qhaway .

Ñawinchay huk rikch'anapaq chaymanta yanapasqa huch'uy componentekuna lista kaqpaq.

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.
  • .form-inlineima forma controles nisqapaqpas ruwaykunapaqpas.
  • .navbar-textsayaq chawpichasqa qillqap watiqankunata yapanapaq.
  • .collapse.navbar-collapsenavbarpa imayna kanankunata huk tayta rakinawan huñunapaq chaymanta pakanapaq.

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

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

Kay rikch'anaqa llimp'i ( bg-light) chaymanta espaciamiento ( my-2, my-lg-0, mr-sm-0, my-sm-0) 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.

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

Siq'ikunata yapayqa .navbar-brandsapa kuti sapanchasqa estilokuna utaq yanapakuykunata allin sayaypaq mañanqa. Kaypi wakin ejemplokunata qawachinapaq.

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

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.

Ruwasqa estadokuna .active—wan —kunan p'anqata rikuchinapaq chiqalla .nav-links kaqman utaq chaylla tayta mamankuman .nav-items kaqman churakunman.

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

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

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

Qampas navbar nav nisqaykipi urayk'aqkunata 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.

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

Formas

Imaymana formulario kamachiykunata chaymanta componentekunata huk navbar ukhupi churay .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>

Chaylla wawakuna elementokuna .navbarllamk'achisqa flex churay chaymanta ñawpaqmanta ruwasqa kanqa justify-content: space-between. Kay ruwayta allichanapaq necesitasqanmanhina yapasqa flex yanapakuykunata llamk'achiy.

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

Yaykuy huñukunapas llamkanku, chaynallataq:

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

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.

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

Qillqa

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

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

Huk componentekunawan chaymanta utilidadkunawan necesitasqanmanhina chaqruspa tupachiy.

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

Esquemas de colores

Temachay navbar mana hayk'aqpas aswan facilchu karqan gracias chay combinación de clases de temas y background-colorutilidades. Akllay .navbar-lightk'anchay qhipa llimp'ikunawan llamk'anapaq, utaq .navbar-darkyana qhipa llimp'ikunapaq. 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 navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Contenedores

Manaña mañasqachu kaptinpas, huk navbar .containerhuk p'anqapi chawpichaypaq huk p'anqapi chawpichaypaq utaq huk ukhupi yapayta atikunki huk takyasqa utaq mana kuyusqa pata navbar kaqpa imayna kanankunallata chawpichaypaq .

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

Mayk'aq waqaychana navbarniyki ukhupi kachkan, paypaq horizontal acolchado kaqninta aswan pisi p'akiy puntokunapi hurqusqa .navbar-expand{-sm|-md|-lg|-xl}claseykimanta. Kayqa mana iskay kutita ruwachkaykuchu rellenopi mana necesariota uray qhawanakunapi mayk'aq navbarniyki urmasqa kachkan.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <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 utaq pataman k'askasqa (p'anqawan kuyuy pataman chayanankama, chaymanta chaypi qhipakun). 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.

Hinallataq reparay chayta .sticky-topllamk'achin position: sticky, mayqinchus mana tukuy maskaqpi tukuy yanapasqachu .

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

Kutichiq ruwaykuna

Navbars .navbar-toggler, .navbar-collapse, chaymanta .navbar-expand{-sm|-md|-lg|-xl}clasekuna llamk'achiyta atinku mayk'aq huk ñit'ina qhipanpi contenidonku urmaykuptin tikraypaq. 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.

Aswan .navbar-brandpisi p'akiypi mana rikuchisqa kaptin:

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

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

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

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

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

Hawamanta willakuy

Wakin kuti, urmachiy plugin llamk'achiyta munanki pakasqa willayta wak kitipi p'anqapi llamk'achinapaq. Imaraykuchus pluginniyku llamk'an idchaymanta data-targettupachiypi, chayqa facil ruwakun!

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