Navs rehegua

Kuatiahaipyre ha techapyrã mbaꞌeichaitépa ojepurukuaa Bootstrap mbaꞌekuaarã jeguatarã oikevaꞌekue.

Base nav rehegua

Navegación ojeguerekóva Bootstrap-pe okomparti marcado general ha estilo, .navclase base guive estado activo ha desactivado peve. Embohasa umi mbo’esyry modificador rehegua emoambue hag̃ua peteĩteĩva estilo apytépe.

Pe componente base .navoñemopuꞌa flexbox reheve ha omeꞌe peteĩ pyenda mbarete oñemopuꞌa hag̃ua opaichagua componente navegación rehegua. Oike ipype peteĩ estilo ñemboyke (ombaꞌapo hag̃ua lista ndive), peteĩ enlace relleno umi área de golpe tuichavévape g̃uarã ha estilo básico desactivado.

Pe componente base .navndoikéiva mba’eveichagua .activeestado. Ko’ã techapyrã oúvape oike pe clase, principalmente ohechauka haĝua ko clase particular ndodisparaiha mba’eveichagua estilo especial.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

Umi clase ojeporu opa rupi, upévare nde marcado ikatu ha’e súper flexible. Eipuru <ul>s yvateguáicha, <ol>iñimportánteramo ne mbaꞌekuéra ñemohenda, térã embojere nde mbaꞌeteéva peteĩ <nav>elemento reheve. Umi .navjepuru rupi display: flex, umi nav joajuha oñekomporta peteĩcha umi mba’e nav ojapova’erãmo’ãicha, ha katu pe marcado extra’ỹre.

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Umi estilo ojeguerekóva

Omoambue estilo .navcomponente s rehegua umi modificador ha utilidad reheve. Embojehe’a ha embojoaju tekotevẽháicha, térã emopu’ã nde mba’éva.

Alineación horizontal rehegua

Emoambue alineación horizontal nde nav rehegua umi utilidad flexbox ndive . Por defecto, navs oñemohenda izquierda gotyo, ha katu ikatu remoambue fácilmente centro térã derecha gotyo.

Oñecentra con .justify-content-center: 1.1.

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

Oñembojoaju derecho ndive .justify-content-end: .

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

Ñembo'yakua

Emoĩ apila nde navegación emoambuévo flex elemento dirección .flex-columnutilidad ndive. ¿Tekotevẽpa remoĩ apila umíva peteĩva umi jehechaukaha rehe ha katu nahániri ambuépe? Eipuru umi versión ombohováiva (por ejemplo, .flex-sm-column).

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

Jepiveguáicha, navegación vertical ikatu <ul>s ÿre, avei.

<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Fichas rehegua

Oipyhy nav básico yvate guive ha omoĩve .nav-tabsmboꞌepy omoheñói hag̃ua peteĩ interfaz ficha rehegua. Eipuru umíva emoheñói hag̃ua región tabbable ore ficha JavaScript plugin rupive .

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

Pastillas rehegua

Ejagarra upe HTML peteĩchagua, ha katu eipuru .nav-pillshendaguépe:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

Omyenyhẽ ha ohustifika

Embojere nde .nav's contenido ombohape hag̃ua ipypuku ojeguerekóva henyhẽva peteĩva mokõi mbo’esyry modificador-gui. Emyenyhẽ hag̃ua proporcionalmente opaite espacio ojeguerekóva nde .nav-items reheve, eipuru .nav-fill. Ñañaminduꞌu opaite espacio horizontal ojeguerekoha, ha katu ndahaꞌei opaite mbaꞌe nav oguerekóva peteĩchagua ipypuku.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</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>

Oipurúvo peteĩ <nav>navegación -based, ikatu ojeheja rei oñeikotevẽháicha .nav-itemañoite .nav-linkumi elemento estilo <a>rehegua.

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Umi elemento ipukukue joja rehegua, eipuru .nav-justified. Opaite espacio horizontal oguerekóta umi enlace nav, ha katu ojoavy umi .nav-fillyvateguágui, opaite mbaꞌe nav oguerekóta peteĩchagua ipypuku.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</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>

Ojogua .nav-filltechapyrãme oipurúva peteĩ <nav>-based navegación.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Omba’apóva umi utilidad flex ndive

Oiméramo reikotevẽ umi variación nav ombohováiva, ehecha eipuru peteĩ serie de utilidades flexbox . Oĩramo jepeve verbose, ko’ã utilidad oikuave’ẽ tuichave personalización umi punto de ruptura ombohováiva rupi. Pe techapyrã iguýpe, ñande nav oñembojoajúta punto de ruptura ijyvatevévape, upéi ojeadapta peteĩ diseño horizontal-pe omyenyhẽva ancho ojeguerekóva oñepyrũvo punto de ruptura michĩvagui.

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>

Accesibilidad rehegua

Eipurúramo navs eme’ẽ hag̃ua peteĩ barra de navegación, eñangareko emoĩ peteĩ role="navigation"mba’e’oka túva lógicovévape <ul>, térã embojere peteĩ <nav>elemento jeguata tuichakue jerére. Ani remoĩ pe rol pe <ul>ijehegui, péva ojokótagui oñemoherakuã haguã lista añetéva ramo umi tecnología oipytyvõva rupive.

Ñañamindu’u umi barra de navegación, jepémo ojehechaháicha estilo ficha ramo .nav-tabsmbo’esyry ndive, noñeme’ẽiva’erã ,role="tablist" térã role="tab"atributo role="tabpanel". Koꞌãva oñemohenda porã umi interfaz ficha dinámica-pe g̃uarãnte, oñemombeꞌuháicha ARIA Authoring Practices Guide tabs pattern -pe . Ehecha JavaScript reko umi interfaz ficha dinámica rehegua ko aty’ípe techapyrãramo.

Oipurúvo umi desplegable

Emoĩve menú desplegable orekóva HTML michĩmi extra ha umi desplegable JavaScript plugin .

Umi ficha orekóva umi desplegable

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <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 class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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>

Pastillas orekóva gota

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <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 class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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>

JavaScript jepokuaa

Eipuru pe ficha JavaScript plugin —emoinge peteĩteĩ térã bootstrap.jsvore oñembohekopyréva rupive—embotuichave hag̃ua ñande ficha ha pastilla navegación rehegua emoheñói hag̃ua umi panel ficha rehegua contenido local rehegua.

Emopu’ãramo ore JavaScript ypykue guive, oikotevẽutil.js .

Umi interfaz dinámica ficha rehegua, oñemombeꞌuháicha ARIA Authoring Practices Guide tabs pattern -pe , oikotevẽ role="tablist", role="tab", role="tabpanel", ha atributo adicional aria-ikatu hag̃uáicha ombohasa ijestructura, funcionalidad ha estado koꞌag̃agua umi tecnología oipytyvõva puruhárape (haꞌeháicha pantalla moñeꞌerã). Peteĩ jepokuaa iporãvéva ramo, romomarandu eipuru <button>hag̃ua elemento umi ficha-pe g̃uarã, ko’ãva ha’égui control omoñepyrũva peteĩ ñemoambue dinámico, ndaha’éi umi enlace ohóva peteĩ página térã tenda pyahúpe.

Eñamindu’u pe ficha JavaScript plugin ndoipytyvõiha umi interfaz ficha oguerekóva menú desplegable, ko’ãva omoheñóigui mokõive mba’e’oka jepuru ha jeikekuaa rehegua. Peteĩ jepurukuaa jehecha guive, pe he’íva pe ficha ojehechaukáva ko’áĝa elemento desencadenante ndojehechái pya’e (oĩháicha menú desplegable oñembotýva ryepýpe) ikatu omoheñói ñembotavy. Peteĩ punto de vista accesibilidad guive, koꞌág̃a rupi ndaipóri tape sensato ojejapo hag̃ua mapa koꞌãichagua constructo peteĩ patrón WAI ARIA estándar-pe, heꞌiséva ndaikatuiha ojejapo fácilmente oñentende hag̃ua umi oiporúva tecnología oipytyvõvape.

Contenido tenda’i rehegua panel ficha rehegua. Kóva ojoaju pe ficha hogar rehe. Ndegueraha kilómetro yvate, yvateterei, ‘porque ha’e oreko upe peteĩ sonrisa internacional. Oĩ peteĩ extraño che tupape, oĩ peteĩ golpe che akãme. Oh, nahániri. Ambue tekovépe che ajapo va'erãmo'ã repyta haguã. 'Causa che, che capaz oimeraẽ mba'épe. Oñembosako’ívo che batalla coronadora-pe ĝuarã. Ojepokuaa omonda hagua nde tuvakuéra licor ha ojupi hagua techo ári. Tono, tan apto ha listo, ombojere ha'e yvate causa su gettin 'heavy. Imborayhu ha’ete peteĩ droga. Aimo’ã cheresarái hague arekoha peteĩ elección.

Contenido tenda’i rehegua panel ficha rehegua. Kóva ojoaju pe ficha perfil rehe. Rehupyty pe arquitectura iporãvéva. Sellos de pasaporte, ha'e cosmopolita. Iporã, ipyahúva, mbarete, roguereko cerradura-pe. Araka'eve ndaplaneái peteĩ ára ndeperdetaha. Ha'e ho'u nde py'a. Nde beso ha’e cósmico, opa movimiento ha’e mágia. Che ha'ese umi, ha'ese ha'ete ku ha'éva pe. Maitei jahayhúva jajapo peteĩ jeguata. ¡Sólo propio pyhare 4 de julio-icha! Péro nde rejedesperdicia porãve.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Oipytyvõ hag̃ua oike hag̃ua ne remikotevẽme, kóva omba’apo <ul>-based markup ndive, ojehechaukaháicha yvateve, térã oimeraẽva “roll your own” markup arbitrario reheve. Eñamindu’u reiporúramo <nav>, neremoĩriva’erã hese role="tablist"directamente, kóva omboykétagui elemento rembiapo nativo peteĩ señal de navegación ramo. Upéva rangue, embohasa peteĩ elemento alternativo-pe (techapyrã iguýpe, peteĩ simple <div>) ha embojere <nav>ijerére.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Pe plugin tabs omba’apo avei umi pastilla ndive.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

Ha umi pastilla vertical reheve.

Contenido tenda’i rehegua panel ficha rehegua. Kóva ojoaju pe ficha hogar rehe. Ohecha nde centro-pe repurahéivo umi Blues. Emaña nde rejere pe drenaje rehe. Mba'ére piko nderehejái che apyta? Ipohýi pe akã oipurúva pe koróna. Heẽ, ñande japuka umi ánhelpe, oky yvate guive ko yvy ape ári. Ohechase pe espectáculo 3D-pe, peteĩ película. ¿Reñandu piko araka’eve, reñandu upéicha kuatia ipire hũ. Ha'e peteĩ si térã nahániri, nahániri ikatu.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
      <button class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
      <button class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
      <button class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

Oipurúvo umi atributo de datos rehegua

Ikatu emomba’apo peteĩ ficha térã pastilla jeguata ehai’ỹre mba’eveichagua JavaScript emombe’úvo data-toggle="tab"térã data-toggle="pill"peteĩ elemento ári. Eipuru ko’ã atributo dato rehegua .nav-tabstérã .nav-pills.

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

JavaScript rupive

Emboguata umi vore vore’i rehegua JavaScript rupive (peteĩteĩva vore tekotevẽ oñemboguata peteĩteĩ):

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

Ikatu emombaꞌapo peteĩteĩva ficha heta hendáicha:

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third tab

Efecto de desvanecimiento rehegua

Ojejapo hag̃ua umi ficha oñedesvanece, emoĩ .fadepeteĩteĩme .tab-pane. Peteĩha vore vore oguerekovaꞌerã avei .showojehecha hag̃ua pe contenido ñepyrũrã.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Método-kuéra rehegua

Método ha transición asíncrono rehegua

Opaite API rembiapokue haꞌehína asíncrono ha oñepyrũ peteĩ jehaipyre . Ojevy hikuái ohenóivape oñepyrũvove pe transición ha katu opa mboyve . Avei, oñemboykéta peteĩ ñehenói método rehegua peteĩ componente oñembohasáva rehe .

Ehecha ore kuatiañe’ẽ JavaScript rehegua reikuaave hag̃ua .

$().tab rehegua

Omombaꞌapo peteĩ elemento ficha ha contenido mbaꞌeryru. Tab oguerekovaꞌerã peteĩ data-targettérã, oipurúramo peteĩ joajuha, peteĩ hrefatributo ojepytasóva peteĩ nodo mbaꞌerepy rehegua DOM-pe.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('ehechauka') .

Oiporavo pe ficha oñemeꞌevaꞌekue ha ohechauka iparte ojoajúva hese. Oimeraẽ ambue vore ojeporavóva’ekue mboyve oiko ndojeporavo’ỹva ha oñeñomi iparte ojoajúva hese. Ojevy ohenóivape ojehechauka mboyve añetehápe pe ficha vore (heꞌiséva oiko mboyve pe shown.bs.tabmbaꞌe ojehúva).

$('#someTab').tab('show')

.tab('emboyke') .

Ohundi peteĩ elemento vore.

Umi mba’e oikóva

Ohechauka jave peteĩ ficha pyahu, umi mbaꞌe ojehúva odispara koꞌã orden-pe:

hide.bs.tab(pe ficha activa ko’áĝaguápe)
show.bs.tab(pe pestaña ojehechaukátavape)
hidden.bs.tab(pe ficha activa mboyvegua-pe, peteĩchagua pe hide.bs.tabevento-pe g̃uarã)
shown.bs.tab(pe pestaña ojehechauka ramóvape, peteĩchagua pe show.bs.tabevento-pe g̃uarã)

Ndaipóriramo peteĩ ficha ndojejapóiva’ekue voi, upéicharamo umi hide.bs.tabha hidden.bs.tabmba’e ojehúva ndojedisparamo’ãi.

Tipo de Evento rehegua	Techaukaha
ohechauka.bs.tab	Ko mbaꞌe ojehúva odispara ficha jehechaukahápe, ha katu ojehechauka mboyve ficha pyahu. Eipuru `event.target`ha `event.relatedTarget`emohenda hag̃ua ficha activa ha ficha activa mboyvegua (oĩramo) peteĩteĩ.
ojehechauka.bs.tab	Ko mba’e ojehúva odispara ficha jehechaukahápe ojehechauka rire peteĩ ficha. Eipuru `event.target`ha `event.relatedTarget`emohenda hag̃ua ficha activa ha ficha activa mboyvegua (oĩramo) peteĩteĩ.
omokañy.bs.tab	Ko mbaꞌe ojehúva odispara ojehechaukavaꞌerã jave peteĩ ficha pyahu (ha upéicha rupi oñeñomivaꞌerã pe ficha activa mboyvegua). Eipuru `event.target`ha `event.relatedTarget`emohenda hag̃ua pe ficha activa ko’áĝagua ha pe ficha pyahu pya’e ojejapótava, peteĩteĩ.
kañymby.bs.tab	Ko mbaꞌe ojehúva oñembopu ojehechauka rire peteĩ ficha pyahu (ha upéicha oñeñomi pe ficha activa mboyvegua). Eipuru `event.target`ha `event.relatedTarget`emohenda hag̃ua pe ficha activa mboyvegua ha pe ficha activa pyahu, peteĩteĩ.

$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})