Source

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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Jepiveguáicha, ikatu ojejapo navegación vertical <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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Fichas rehegua

Ogueraha 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Oipurúvo peteĩ <nav>navegación -based, katuete oike .nav-itemumi anclaje-pe.

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Ojoguaite .nav-filltechapyrã oipurúva peteĩ <nav>navegación -based, katuete oike .nav-itemumi anclaje-pe.

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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 WAI ARIA Authoring Practices -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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

JavaScript jepokuaa

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

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

Umi interfaz dinámica ficha rehegua, oñemombeꞌuháicha WAI ARIA Authoring Practices -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 oiporúvape umi tecnología oipytyvõvape (haꞌeháicha umi pantalla moñeꞌerã).

Eñamindu’u umi interfaz dinámica ficha rehegua ndoguerekóiva’erãha menú desplegable, kó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.

Denim crudo oiméne nerehendúi chuguikuéra pantalón corto vaquero Austin. Nesciunt tofu stumptown aliqua, retro sintetizador maestro omopotîva. Bigote cliché temporal, williamsburg carles helvetica vegana rehegua. Reprehenderit carnicero retro keffiyeh atrapador de sueños sintetizador. Suéter cosby eu banh mi, qui irure terry richardson ex calamar. Aliquip placeat salvia cillum rehegua iphone. Seitan aliquip quis cardigan ropa americana, carnicero voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </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.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </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.

Consequat occaecat ullamco amet no eiusmod nostrud dolore irure incididunt ha'e peteĩ mba'e ojehúva ko'ã mba'épe. Fugiat velit proident aliquip nisi incididunt ejercicio de nariz rehegua proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud oguapy cupidatat en veniam ad. Eiusmod consequat eu adipisicing mínima mymba aliquip cupidatat culpa excepteur quis rehegua. Occaecat oguapy eu ejercicio irure Lorem incididunt nostrud rehegua.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </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.

Cillum ad ut irure temporal velit nostrud occaecat ullamco aliqua anim Lorem sint rehegua. Veniam sint duis incididunt ojapo esse magna mollit ndaha'éiramo laborum qui. Id id reprehenderit oguapy este eu aliqua occaecat quis ha velit exceptor laborum mollit dolore eiusmod rehegua. Ipsum dolor en occaecat commodo ha voluptate mínimo reprehenderit mollit pariatur rehegua. Deserunt no laborum enim ha cillum eu deserunt excepteur ea incididunt mínimo occaecat rehegua.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </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">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').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ã peteĩ hrefojepytasóva peteĩ nodo mbaꞌerepy rehegua DOM-pe.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').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:

  1. hide.bs.tab(pe ficha activa ko’áĝaguápe)
  2. show.bs.tab(pe pestaña ojehechaukátavape)
  3. hidden.bs.tab(pe ficha activa mboyvegua-pe, peteĩchagua pe hide.bs.tabevento-pe g̃uarã)
  4. 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.targetha event.relatedTargetemohenda 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.targetha event.relatedTargetemohenda 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.targetha event.relatedTargetemohenda 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.targetha event.relatedTargetemohenda hag̃ua pe ficha activa mboyvegua ha pe ficha activa pyahu, peteĩteĩ. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})