Peteĩteĩ térã oñembyatýva

Umi plugin ikatu oike peteĩteĩ (jepémo oĩ oikotevẽva dependencia), térã opaite peteĩ jeýpe. Mokõive bootstrap.js ha bootstrap.min.js oguereko opaite plugin peteĩ vore’ípe.

Umi atributo de datos rehegua

Ikatu reipuru opaite Bootstrap mboajepyréva API marcado rupive añoite rehai’ỹre peteĩ línea JavaScript rehegua. Kóva ha’e Bootstrap API peteĩha mbo’esyry ha ha’eva’erã ne mba’ekuaarã peteĩha reipuru jave peteĩ plugin.

Upéva oje’évo, oĩ situación-pe ikatu ojeipota oñembogue ko funcionalidad. Upévare, rome’ẽ avei mba’ekuaarã embogue hag̃ua API atributo dato rehegua emboguejývo opaite mba’e ojehúva tete rérape oñemboja’óva `'data-api’` ndive. Péva ojehecha péicha:

$('tete').off('.datos-api') Ñe'ẽpoty ha purahéi( 'tete' ). apagado ( '.datos-api' ) Ñe'ẽpoty ha purahéi .

Ikatu avei, oñembohape hag̃ua peteĩ plugin específico, emoinge mante pe plugin réra peteĩ téra rendaguépe data-api réra rendaguépe kóicha:

$('tete').off ('.alerta.datos-api')( 'tete' ). apagado ( '.alerta.datos-api' ) Ñe'ẽpoty ha purahéi .

API programática rehegua

Avei roguerovia ikatuva’erãha reipuru opaite Bootstrap mboajepyréva JavaScript API rupive añoite. Opaite API público haꞌehína método peteĩva, oñekadenakuaáva, ha ombojevy pe colección ojejapóva hese.

$(".btn.peligro").botón ("toggle").addClass ("ikyra")( ".btn.peligro" ). botón ( "ombohasa" ). addClass ( "ikyra" ) .

Opaite método omoneĩva’erã peteĩ mba’e’oka opción opcional, peteĩ cadena ojepytasóva peteĩ método particular rehe, térã mba’eve (omoñepyrũva peteĩ plugin orekóva comportamiento por defecto):

$("#myModal").modal() // oñepyrũva’ekue umi mba’e’oka reheve( "#cheModal" ). modal () // oñepyrũva umi mba’e’oka reheve                       
$ ( "#cheModal" ). modal ({ teclado : japu }) // oñemboguapy ñepyrũ ndorekóiva teclado     
$ ( "#cheModal" ). modal ( 'show' ) // omoñepyrũ ha ohenói jehechauka pyaꞌete                

Káda plugin ohechauka avei iconstructor raw peteĩ `Constructor` mbaꞌekuaarã rehe: $.fn.popover.Constructor. Ojehupytyséramo peteĩ instancia plugin particular, egueru directamente peteĩ elemento-gui: $('[rel=popover]').data('popover').

Ndaipóri Conflicto

Sapy’ánte tekotevẽ ojepuru Bootstrap mboajepyréva ambue UI rembiapokue ndive. Ko’ã mba’épe, ikatu sapy’apy’a oiko umi choque espacio de nombre rehegua. Péva oikóramo, ikatu ehenói .noConflictpe plugin rembojevysévape pe valor.

var bootstrapButton = $.fn.button.noConflict() // ombojevy $.fn.button pe valor oñeme’ẽva’ekue ymavebootstrapBotón = $ . fn rehegua . botón rehegua . noConflict () // ombojevy $.fn.button pe valor oñeme’ẽva’ekue ymave 
$ . fn rehegua . bootstrapBtn = bootstrapButton             // ome’ẽ $().bootstrapBtn-pe bootstrap rembiaporã

Umi mba’e oikóva

Bootstrap ome’ẽ mba’e’oka jeporupyre hetavéva plugin rembiaporã ijojaha’ỹvape g̃uarã. Generalmente, koꞌãva oúva peteĩ forma infinitiva ha participio ohasavaꞌekuépe - oñembohapehápe infinitivo (ex. show) oñepyrũvo peteĩ mbaꞌe ojehúva, ha iforma participio ohasavaꞌekue (ex. shown) haꞌehína oñembohape peteĩ tembiapo oñembotývo.

Opaite mbaꞌe ojehúva infinitivo omeꞌe preventDefault rembiaporã. Kóva omeꞌe katupyry ojejoko hag̃ua peteĩ tembiapo jejapópe oñepyrũ mboyve.

$ ('# cheModal').on ('ehechauka', función (e) {( '#cheModal' ). on ( 'ohechauka' , función ( e ) {   
    si (! dato ) ombojevy e . preventDefault () // ojoko ojehechauka hag̃ua modal   
}) Ñe’ẽpoty ha purahéi .

Umi transición rehegua

Umi efecto transición simple-pe g̃uarã, emoinge bootstrap-transition.js peteĩ jey ambue JS vore ykére. Oipurúramo bootstrap.js oñembohekopyréva (térã oñemboguejýva) , natekotevẽi emoinge kóva—oĩma upépe.

Umi káso jeporu rehegua

Mbovymi techapyrã pe plugin ñembohasa rehegua:

• Ojedesliza térã oñedesvanece umi modal-pe
• Oñedesvanece umi ficha
• Oñemboguejývo umi alerta
• Umi panel de carrusel deslizante rehegua

Tembiecharã

Umi modal oñemohenda porã, ha katu iflexible, ñe’ẽmondo ñe’ẽmondo orekóva funcionalidad michĩvéva oñeikotevẽva ha umi por defecto inteligente.

Ejemplo estático rehegua

Peteĩ modal oñembohapéva oguerekóva iñakãrapuꞌa, hete ha tembiaporã ñemohendapyre ipype.

<div class="modal omokañy ñemboguejy"> clase = "modal omokañy descoloramiento" >
  <div clase = "modal-akãrapu'ã" > 
    <botón tipo = "botón" clase = "mboty" data-dismiss = "modal" aria-oñomi = "añetegua" > × </botón> rehegua    
    <h3> Modal iñakãrapu’ãva </h3>
  </div> rehegua
  <div clase = "cuerpo-modal" > rehegua 
    <p> Peteĩ tete porã... </p>
  </div> rehegua
  <div clase = "modal-py rehegua" > 
    <a href = "#" clase = "btn" > Oñemboty </a>  
    <a href = "#" clase = "btn btn-primary" > Eñongatu ñemoambue </a>  
  </div> rehegua
</div> rehegua

Demostración en vivo rehegua

Embohasa peteĩ modal JavaScript rupive eitykuévo pe botón oĩva iguýpe. Oguejýta ha oñedesvanece vaʼerã pe páhina yvate guive.

<!-- Botón omoñepyrũ hag̃ua modal -->
<a href = "#myModal" role = "botón" clase = "btn" data-toggle = "modal" > Emoñepyrũ modal demostración rehegua </a>    
<!-- Modal --> rehegua
<div id = "cheModal" clase = "modal ocultar desvanecer" tabindex = "-1" rol = "ñe'ẽñemi" aria-etiquetadoby = "cheModalEtiqueta" aria-oñomi = "añetegua" >      
  <div clase = "modal-akãrapu'ã" > 
    <botón tipo = "botón" clase = "mboty" data-dismiss = "modal" aria-oñomi = "añetegua" > × </botón>    
    <h3 id = "myModalLabel" > Modal iñakãrapu’ãva </h3> 
  </div> rehegua
  <div clase = "cuerpo-modal" > rehegua 
    <p> Peteĩ tete porã... </p>
  </div> rehegua
  <div clase = "modal-py rehegua" > 
    <botón clase = "btn" data- dismiss = "modal" aria-hidden = "añetegua" > Omboty </botón>   
    <botón clase = "btn btn-primary" > Eñongatu ñemoambue </botón> 
  </div> rehegua
</div> rehegua

Jeporu rehegua

Umi atributo de datos rupive

Emombaꞌapo peteĩ modal ehaiꞌeỹre JavaScript. Oñemohenda data-toggle="modal"peteĩ elemento controlador rehe, peteĩ botón-icha, peteĩ data-target="#foo"térã href="#foo"ndive ojepytaso hag̃ua peteĩ modal específico ojere hag̃ua.

<button type="button" data-toggle="modal" dato-target="#myModal">Emoñepyrũ modal</botón> type = "botón" data-toggle = "modal" data-target = "#myModal" > Ñepyrũrã modal </botón>  

JavaScript rupive

Ehenói peteĩ modal orekóva id myModalpeteĩ línea JavaScript reheve:

$('# cheModal').modal(opciones) .( '#cheModal' ). modal ( opciones ) rehegua .

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Método-kuéra rehegua

.modal(opciones) rehegua .

Omomba’apo ne contenido modal ramo. Omoneĩ peteĩ opción opcional object.

$('# cheModal').modal ({( '#cheModal' ). modal rehegua ({
  teclado : japu 
}) Ñe’ẽpoty ha purahéi .

.modal('ombohasa') .

Ombohasa manualmente peteĩ modal.

$('# cheModal').modal ('ombohasa')( '#cheModal' ). modal ( 'toggle' ) Ñe'ẽpoty ha purahéi .

.modal('ehechauka') .

Oipe’a manualmente peteĩ modal.

$('#cheModal').modal('ehechauka')( '#cheModal' ). modal ( 'ehechauka' ) .

.modal('oñomi') .

Oñomi manualmente peteĩ modal.

$('# cheModal').modal('oñomi')( '#cheModal' ). modal ( 'oñomi' ) .

Umi mba’e oikóva

Bootstrap clase modal ohechauka mbovymi mbaꞌe ojehúva oñembojoaju hag̃ua funcionalidad modal-pe.

$('# cheModal').on('oñomi', función () {( '#cheModal' ). on ( 'oñomi' , función () {   
  // ejapo peteĩ mba'e...
}) Ñe’ẽpoty ha purahéi .

Tembiecharã

Emoĩ menú desplegable haimete oimeraẽ mba’épe ko plugin isãsóva reheve, oikehápe navbar, ficha ha pastilla.

Peteĩ navbar ryepýpe

Umi ficha ryepýpe

Jeporu rehegua

Umi atributo de datos rupive

Emoĩ data-toggle="dropdown"peteĩ enlace térã botón-pe emoambue hag̃ua peteĩ desplegable.

<div class="mboguejýva"> clase = "mboguejýva" >
  <a class = "mboguejýva" data-toggle = "mboguejyha" href = "#" > Ñemboguejyha ñepyrũha </a>   
  <ul clase = "menú-desplegable" role = "menú" aria-etiquetadoby = "dEtiqueta" >   
    ...
  </ul> rehegua
</div> rehegua

URL-kuéra oñeñongatu hag̃ua hekopete, eipuru data-targetatributo href="#".

<div class="mboguejýva"> clase = "mboguejýva" >
  <a clase = "mboguejýva" id = "dLabel" role = "botón" dato-kuéra ñembohasa = "mboguejýva" dato-target = "#" href = "/página.html" >      
    Ñemboguejyha
    <b clase = "caret" ></b> rehegua 
  </a> rehegua
  <ul clase = "menú-desplegable" role = "menú" aria-etiquetadoby = "dEtiqueta" >   
    ...
  </ul> rehegua
</div> rehegua

JavaScript rupive

Ehenói umi desplegable JavaScript rupive:

$('.despegue-toggle').mboguejýva ()( '.mboguejy-mbojere' ). desplegable () rehegua .

Opciones rehegua

Avave

Método-kuéra rehegua

$().dropdown('ombohasa') .

Peteĩ api programático oñembohasa hag̃ua menú peteĩ navbar térã navegación ficha oñemeꞌevaꞌekuépe g̃uarã.

Tembiecharã navbar-pe

Pe ScrollSpy plugin ha’e oñembopyahu hag̃ua ijeheguiete umi nav destino oñemopyendáva desplazamiento ñemohenda rehe. Emoinge pe área oĩva navbar guýpe ha ehecha pe clase activa ñemoambue. Umi sub elemento desplegable ojehechaukáta avei.

Jeporu rehegua

Umi atributo de datos rupive

Emoĩ hag̃ua scrollspy jepokuaa nde barra yvategua jeguatarãme, emoĩnte data-spy="scroll"pe elemento reespiaasévape (jepiveguáicha kóva ha’éta hete) ha data-target=".navbar"eiporavo hag̃ua mba’e nav-pa reiporúta. Eipuruséta scrollspy peteĩ .navcomponente ndive.

<body data-spy="emboguapy" data-target=".barra de nav".....</body> data-spy = "desplazamiento" dato-destino = ".barra de nav" > ... </body> 

JavaScript rupive

Ehenói pe scrollspy-pe JavaScript rupive:

$ ('# barra de nav').scrollspy () .( '#navbar' ). scrollspy rehegua () .

Método-kuéra rehegua

.scrollspy('mbopyahu') .

Eipuru jave scrollspy ojoajúvo emoĩ térã eipeꞌa elemento DOM-gui, tekotevẽta ehenói método ñembopyahu péicha:

$ ('[datos-espión = "desplazamiento"]').peteĩteĩ (función () {( '[datos-espio="desplazamiento"]' ). peteĩteĩ ( función () { .  
  var $espio = $ ( kóva ). scrollspy ( 'mbopyahu' ) .
});

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-offset="".

Umi mba’e oikóva

Tembiecharã fichakuéra

Emoĩve funcionalidad ficha pya’e ha dinámica rehegua embohasa hag̃ua umi panel contenido local rupive, jepe umi menú desplegable rupive.

Jeporu rehegua

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

$('#cheTab a').emboguejy (función (e) {( '#cheTab a' ). clic ( función ( e ) { .  
  e . ohapejokoDefault ();
  $ ( kóva ). tab ( 'ehechauka' );
}) Ñe’ẽpoty ha purahéi .

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

$('# cheTab peteĩ [href="#perfil"]').tab ('ehechauka'); // Eiporavo pestaña héra rupive( '#cheTab peteĩ[href="#perfil"]' ). tab ( 'ehechauka' ); // Eiporavo pestaña héra rupive 
$ ( '#cheTab a:tenonderã' ). tab ( 'ehechauka' ); // Eiporavo peteĩha ficha 
$ ( '#cheTab peteĩ:paha' ). tab ( 'ehechauka' ); // Eiporavo pestaña paha 
$ ( '# cheTab li:eq(2) a' ). tab ( 'ehechauka' ); // Eiporavo mbohapyha ficha (0-indexado) . 

Marcado 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. Oñemoĩvo umi navha nav-tabsmbo’esyry pe ficha ul-pe ojeporúta pe ficha Bootstrap estilo.

<ul clase="nav nav-tabs"> rehegua clase = "nav nav-pestañas" >
  <li><a href = "#óga" data-toggle = "pestaña" > Óga </a></li>  
  <li><a href = "#perfil" data-toggle = "pestaña" > Perfil </a></li>  
  <li><a href = "#marandukuéra" data-toggle = "ficha" > Marandukuéra </a></li>  
  <li><a href = "#mboheko" data-toggle = "ficha" > Ñemboheko </a></li>  
</ul> rehegua

Método-kuéra rehegua

$().tab rehegua

Omombaꞌapo peteĩ elemento ficha ha mbaꞌeryru contenido rehegua. Tab oguerekovaꞌerã peteĩ data-targettérã peteĩ hrefojepytasóva peteĩ nodo mbaꞌerepy rehegua DOM-pe.

<ul class="nav nav-pestañas" id="cheTab"> clase = "nav nav-pestañas" id = "cheTab" > 
  <li clase = "activo" ><a href = "#óga" > Óga </a></li>  
  <li><a href = "#perfil" > Ñe’ẽmondo </a></li> 
  <li><a href = "#marandukuéra" > Marandukuéra </a></li> 
  <li><a href = "#mboheko" > Ñemboheko </a></li> 
</ul> rehegua
<div clase = "pestaña-contenido" > 
  <div clase = "ficha-pane activa" id = "óga" > ... </div>  
  <div clase = "ficha-pane" id = "perfil" > ... </div>  
  <div clase = "ficha-panel" id = "marandukuéra" > ... </div>  
  <div clase = "ficha-pane" id = "mboheko" > ... </div>  
</div> rehegua
<guión> rehegua
  $ ( tembiaporã () { .  
    $ ( '#cheTab peteĩ:paha' ). tab ( 'ehechauka' );
  }) Ñe’ẽpoty ha purahéi .
</script> rehegua

Umi mba’e oikóva

$('a [datos-toggle="pestaña"]').on ('ojehechauka', función (e) {( 'a[datos-toggle="ficha"]' ). pe ( 'ojehechauka' , función ( e ) {   
  e . target // ficha activada rehegua
  e . relatedTarget // pestaña mboyvegua
}) Ñe’ẽpoty ha purahéi .

Tembiecharã

Oñeinspiráva pe plugin iporãitereíva jQuery.tipsy ohaiva’ekue Jason Frame; Tembipururã ñe’ẽmondo ha’e peteĩ versión oñembopyahúva, ndojeroviapáiva ta’ãngamýire, oipuru CSS3 taꞌãngamýime g̃uarã, ha dato-atributo título ñeñongaturã tendápe g̃uarã.

Mba’érepa, tembipuru’i ñe’ẽmondo ha popover data-apis oĩ opt in, he’iséva ndete voi remoñepyrũva’erã .

Emoĩ nde po umi enlace oĩva ko’ápe rehecha hag̃ua tembipuru’i ñe’ẽmondo:

Irundy dirección rehegua

Tembipururã ñe’ẽmondo umi aty jeikerãme

Eipurúvo tembipuru’i ha popovers umi aty jeikerã Bootstrap rehegua ndive, emohendava’erã containeropción (ojehaipyréva iguýpe) ani hag̃ua oiko mba’e vai ojeipota’ỹva.

Jeporu rehegua

Emoñepyrũ tembipuru’i ñe’ẽmondo JavaScript rupive:

$('#techapyrã').tembipururã(opciones)( '#techapyrã' ). tembipururã ñe’ẽmondo ( opciones ) .

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-animation="".

Marcado rehegua

<a href="#" data-toggle="tembipuru’i ñe’ẽñemi" title="tembipuru’i peteĩha">emoĩ che ári</a> href = "#" data-toggle = "tembipuru’i ñe’ẽñemi" title = "tembipuru’i peteĩha" > emoĩ che ári </a>  

Método-kuéra rehegua

$().tembipuru’i(opciones) .

Ombojoaju peteĩ tembipuru’i ñemboguataha peteĩ elemento ñembyaty rehe.

.tembipuru'i('ehechauka')

Oikuaauka peteĩ elemento tembipururã ñe’ẽmondo.

$('#elemento').tembipururã ñe'ẽmondo ('ehechauka')( '#elemento' ).tembipuru'i ñe'ẽmondo ( 'ehechauka' ) .

.tembipuru'i('oñomi')

Oñomi peteĩ elemento tembipuru’i ñe’ẽmondo.

$ ('# elemento').tembipururã ñe'ẽmondo ('oñomi')( '#elemento' ). tembipuru'i ñe'ẽmondo ( 'oñomi' ) .

.tembipuru'i ñe'ẽmondo('toggle')

Ombohasa peteĩ elemento tembipuru’i ñe’ẽmondo.

$('#elemento').tembipururã ñe'ẽmondo ('toggle')( '#elemento' ). tembipuru'i ñe'ẽmondo ( 'toggle' ) .

.tembipuru'i('ohundi')

Oñomi ha ohundi peteĩ elemento tembipuru’i ñe’ẽmondo.

$('#elemento').tembipururã ñe'ẽmondo ('ohundi')( '#elemento' ). tembipuru'i ñe'ẽmondo ( 'ohundi' ) .

Tembiecharã

Oñemoĩve umi superposición michĩva contenido rehegua, umi oĩva iPad-peguáicha, oimeraẽ elemento-pe oñemohenda hag̃ua marandu secundaria. Emoĩ nde po pe botón ári emoñepyrũ hag̃ua pe popover. Oikotevẽ Tooltip oike hag̃ua.

Popover estático rehegua

Ojeguereko irundy opción: yvate, akatúa, yvy gotyo ha asu gotyo alineado.

Ndaipóri marcador ojehechaukáva popovers ramo oñemboheko JavaScript ha contenido peteĩ dataatributo ryepýpe.

Demostración en vivo rehegua

Irundy dirección rehegua

Jeporu rehegua

Emboguata popovers JavaScript rupive:

$('# techapyrã').popover(opciones) .( '#techapyrã' ). popover ( opciones ) rehegua .

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-animation="".

Marcado rehegua

Mba’éichapa omba’apo, Tooltip ha Popover data-apis oĩ opt in. Eipuruséramo emombe’únte peteĩ opción selector.

Método-kuéra rehegua

$().popover(opciones) rehegua .

Omoñepyrũ umi popover peteĩ elemento ñembyatyrã.

.popover('ehechauka')

Oikuaauka peteî elementos popover.

$('#elemento').popover ('ehechauka')( '#elemento' ). popover ( 'ehechauka' ) .

.popover('oñomi') .

Oñomi peteĩ elementos popover.

$('#elemento').popover ('oñomi')( '#elemento' ). popover ( 'oñomi' ) .

.popover('ombohasa') .

Ombohasa peteĩ elementos popover.

$('#elemento').popover ('toggle') Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.( '#elemento' ). popover ( 'mbojere' ) .

.popover('ohundi') .

Oñomi ha ohundi peteî elemento popover.

$('#elemento').popover('ohundi')( '#elemento' ). popover ( 'ohundi' ) .

Umi alerta techapyrãva

Emoĩve tembiaporã ñemboyke rehegua opaite marandu ñe’ẽmondo rehegua ko plugin rupive.

Jeporu rehegua

Emboguata peteĩ ñe’ẽmondo ñemboyke JavaScript rupive:

$(".alerta").alerta () Ñe'ẽpoty ha purahéi( ".alerta" ). alerta rehegua () .

Marcado rehegua

Emoĩnte data-dismiss="alert"nde botón ñemboty rehegua ome’ẽ hag̃ua ijeheguiete peteĩ alerta ñemboty funcionalidad.

<a class="omboty" data-dismiss="alerta" href="#">×</a> class = "omboty" data-dismiss = "alerta" href = "#" > × </a> rehegua  

Método-kuéra rehegua

$ ().alerta () Ñe'ẽ guarani.

Ombojere opaite alerta funcionalidad hi’aguĩva reheve. Ikatu hag̃uáicha ne alertakuéra oñemokyre’ỹ oñembotývo, eñangareko oguerekoha hikuái pe .fadeha .inclase ojeaplikamava’ekue hesekuéra.

.alert('mboty') .

Omboty peteĩ alerta.

$(".alerta").alerta('mboty')( ".alerta" ). alerta ( 'mboty' ) .

Umi mba’e oikóva

Bootstrap clase de alerta ohechauka mbovymi mbaꞌe ojehúva oñembojoaju hag̃ua funcionalidad alerta rehegua.

$('#che-alerta').bind('oñemboty', función () {( '#che-alerta' ). bind ( 'oñemboty' , función () {   
  // ejapo peteĩ mba'e...
}) Ñe’ẽpoty ha purahéi .

Tembiecharã jeporu

Ejapo hetave mba’e umi botón reheve. Control botón heꞌi térã omoheñói botón aty hetave componente-pe g̃uarã tembipururã ryru-icha.

Estado-pegua

Oñemoĩve data-loading-text="Loading..."ojepuru hag̃ua peteĩ estado de carga peteĩ botón rehe.

<button type="button" class="btn btn-primary" data-loading-text="Ojekarga...">Ojeguerahauka estado</button> type = "botón" clase = "btn btn-primary" data-loading-text = "Ojekarga..." > Ojekarga estado </botón>  

Peteĩ toggle rehegua

Emoĩve data-toggle="button"emombarete hag̃ua toggling peteĩ botón-pe.

<button type="button" class="btn btn-primary" data-toggle="botón">Ñe’ẽñemi peteĩva</botón> type = "botón" clase = "btn btn-primaria" data-toggle = "botón" > Ñemboheko peteĩva </botón>  

Ñe’ẽmondo ryru

Ombojoapy data-toggle="buttons-checkbox"casilla de verificación estilo toggling-pe g̃uarã btn-group-pe.

<div clase="btn-grupo" datokuéra ñembohasa="botón-kuéra jesarekoha"> clase = "btn-grupo" dato-kuéra ñembohasa = "botón-kuéra jesarekoha" > 
  <botón tipo = "botón" clase = "btn btn-primaria" > Izquierda </botón>  
  <botón tipo = "botón" clase = "btn btn-primaria" > Mbytegua </botón>  
  <botón tipo = "botón" clase = "btn btn-primaria" > Oike </botón>  
</div> rehegua

Radio rupive

Oñembojoapy data-toggle="buttons-radio"radio estilo toggling-pe g̃uarã btn-group-pe.

<div clase="btn-grupo" datokuéra ñembohasa="botón-radio"> clase = "btn-grupo" dato-toggle = "botón-radio" > 
  <botón tipo = "botón" clase = "btn btn-primaria" > Izquierda </botón>  
  <botón tipo = "botón" clase = "btn btn-primaria" > Mbytegua </botón>  
  <botón tipo = "botón" clase = "btn btn-primaria" > Oike </botón>  
</div> rehegua

Jeporu rehegua

Emboguata umi botón JavaScript rupive:

$ ('.nav-tabs').botón () Ñe'ẽ guarani.( '.nav-pestañas' ). botón () rehegua .

Marcado rehegua

Umi atributo dato rehegua haꞌehína integral pe botón plugin-pe. Ehecháke kódigo techapyrãva iguýpe opaichagua marcado tipo rehegua.

Opciones rehegua

Avave

Método-kuéra rehegua

$().botón('ombohasa') .

Ombohasa estado empuje rehegua. Ome’ẽ pe botón-pe ojehechaháicha oñemboguata hague.

<botón tipo="botón" clase="btn" data-toggle="botón" >...</botón> tipo = "botón" clase = "btn" data-toggle = "botón" > ... </botón> rehegua   

$().botón('oñekarga') .

Omohenda botón estado ojekarga hag̃ua - omboyke botón ha ombohasa jehaipyre ojekarga hag̃ua jehaipyre. Ojekarga hag̃ua jehaipyre oñembohekovaꞌerã elemento botón rehegua ojeporúvo atributo dato rehegua data-loading-text.

<button type="button" class="btn" data-loading-text="ojeguerahauka mba’e..." >...</botón> type = "botón" clase = "btn" data-loading-text = "ojekarga mba'e..." > ... </botón>   

$().botón ('ñemoĩjey') .

Omoĩjey botón estado - ombohasa jehaipyre jehaipyre ypykuépe.

$().botón(cadena) rehegua .

Omohendajey botón estado - ombohasa jehaipyre oimeraẽva datokuéra jehaipyre estado oñembohekopyrévape.

<botón tipo="botón" clase="btn" dato-completo-texto="oñemohu'ã!" >></botón> rehegua type = "botón" clase = "btn" dato-completo-texto = "oñemohu'ã!" > ... </botón> rehegua   
<guión> rehegua
  $ ( '.btn' rehegua ). botón ( 'oñemohu'ã' ) .
</script> rehegua

Upéva rehegua

Ojehupyty estilo base ha pytyvõ flexible umi componente plegable-pe g̃uarã haꞌeháicha acordeón ha navegación.

* Oikotevẽ oike hag̃ua Transitions plugin.

Techapyrã acordeón rehegua

Oipurúvo pe plugin colapso, romopu’ã peteĩ widget estilo acordeón simple:

<div class="acordeón" id="acordeón2"> rehegua clase = "acordeón" id = "acordeón2" > 
  <div clase = "acordeón-grupo" > 
    <div clase = "acordeón-ñakãrapu'ã" > 
      <a clase = "acordeón-toggle" data-toggle = "oñemboguejy" dato-túva = "#acordeón2" href = "#omboguejy peteĩ" >    
        Grupo Plegable Artículo #1 rehegua
      </a> rehegua
    </div> rehegua
    <div id = "collapseOne" class = "acordeón-rete ho'áva en" >  
      <div clase = "acordeón-pypegua" > 
        Anim pariatur cliché...
      </div> rehegua
    </div> rehegua
  </div> rehegua
  <div clase = "acordeón-grupo" > 
    <div clase = "acordeón-ñakãrapu'ã" > 
      <a clase = "acordeón-toggle" data-toggle = "oñemboguejy" dato-túva = "#acordeón2" href = "#omboguejyMokõi" >    
        Grupo Plegable Artículo #2 rehegua
      </a> rehegua
    </div> rehegua
    <div id = "collapseMokõi" clase = "acordeón-rete ho'a" >  
      <div clase = "acordeón-pypegua" > 
        Anim pariatur cliché...
      </div> rehegua
    </div> rehegua
  </div> rehegua
</div> rehegua
...

Ikatu avei reipuru pe plugin pe acordeón ñemboheko’ỹre. Ejapo peteĩ botón embohasa hag̃ua ambue elemento ñembotuichave ha ñemboguejy.

<botón tipo="botón" clase="btn btn-peligro" dato-toggle="oñemboguejy" dato-target="#demo"> tipo = "botón" clase = "btn btn-peligro" dato-toggle = "collapso" dato-objetivo = "#demo" >   
  simple plegable rehegua
</botón> rehegua
<div id = "demo" clase = "oñemboguejy" > ... </div>  

Jeporu rehegua

Umi atributo de datos rupive

Oñemoĩnte data-toggle="collapse"ha peteĩ data-targetelemento-pe oñemeꞌe hag̃ua ijeheguiete control peteĩ elemento oñembotýva rehegua. Pe data-targetatributo omoneĩ peteĩ css jeporavoha omoĩ hag̃ua pe ñemboguejy. Ejesareko porãke emoĩ hag̃ua pe mboꞌepy collapsepe elemento oñembotývape. Oipotáramo ojepe’a por defecto, emoĩve pe clase adicional in.

Oñemoĩ hag̃ua acordeón-ichagua jesareko aty rehegua peteĩ control oñembotykuaávape, emoĩve atributo dato rehegua data-parent="#selector". Ehechamína pe demostración rehecha hag̃ua kóva acción-pe.

JavaScript rupive

Emboguata manualmente ko’ãva ndive:

$(".oñemboguejy").oñemboguejy ()( ".ñembyai" ). ñembyai () .

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-parent="".

Método-kuéra rehegua

.collapse(opciones) rehegua .

Omomba’apo ne contenido peteĩ elemento oñemboguejýva ramo. Omoneĩ peteĩ opción opcional object.

$('#cheCollapsible').collapse({ ( '#cheCollapsible' ). oñemboty ({
  toggle : japu 
}) Ñe’ẽpoty ha purahéi .

.collapse('ombohasa') .

Ombohasa peteĩ elemento oñembotykuaáva ojehechauka térã oñeñomi hag̃ua.

.collapse('ehechauka') .

Ohechauka peteĩ elemento oñembotykuaáva.

.collapse('oñomi') .

Oñomi peteĩ elemento oñembotykuaáva.

Umi mba’e oikóva

Bootstrap clase de colapso ohechauka mbovymi mbaꞌe ojehúva oñembojoaju hag̃ua funcionalidad colapso-pe.

$ ( '#cheCollapsible' ). on ( 'oñomi' , función () {   
  // ejapo peteĩ mba'e...
}) Ñe’ẽpoty ha purahéi .

Techapyrã carrusel rehegua

Pe diapositiva jehechaukaha iguýpe ohechauka peteĩ plugin ha componente genérico ojejapo hag̃ua ciclo umi elemento rupive peteĩ carrusel-icha.

Primera Etiqueta de Miniatura rehegua

Cras justo odio, dapibus ac facilisis en, egestas eget quam rehegua. Donec id elit ndaha'éiva mi porta gravida eget metus-pe. Nullam id dolor id nibh ultrices mba'yrumýi ut id elit.

Mokõiha Etiqueta Miniatura rehegua

Cras justo odio, dapibus ac facilisis en, egestas eget quam rehegua. Donec id elit ndaha'éiva mi porta gravida eget metus-pe. Nullam id dolor id nibh ultrices mba'yrumýi ut id elit.

Mbohapyha Etiqueta de Miniatura rehegua

Cras justo odio, dapibus ac facilisis en, egestas eget quam rehegua. Donec id elit ndaha'éiva mi porta gravida eget metus-pe. Nullam id dolor id nibh ultrices mba'yrumýi ut id elit.

‹ Ñemby . › Ñe’ẽpoty ha purahéi

<div id = "cheCarrusel" clase = "diapositiva de carrusel" >  
  <ol clase = "carrusel-indicadores" > rehegua 
    <li data-target = "#myCarousel" dato-deslizante-a = "0" clase = "activo" ></li>   
    <li dato-target = "#cheCarrusel" dato-deslizante-a = "1" ></li>  
    <li dato-target = "#cheCarrusel" dato-deslizante-a = "2" ></li>  
  </ol> rehegua
  <!-- Artículos de carrusel -->
  <div clase = "carrusel-pypegua" > 
    <div clase = "mba’e’apopyrã” > ... </div> 
    <div clase = "artículo" > ... </div> rehegua 
    <div clase = "artículo" > ... </div> rehegua 
  </div> rehegua
  <!-- Carrusel nav --> rehegua
  <a clase = "carrusel-control izquierdo" href = "#checarrusel" data-slide = "ymavegua" > ‹ </a> rehegua   
  <a clase = "carrusel-control derecho" href = "#checarrusel" data-slide = "oúva" > › </a> rehegua   
</div> rehegua

Jeporu rehegua

Umi atributo de datos rupive

Eipuru umi atributo dato rehegua econtrola hagua fácilmente carrusel ñemohenda. data-slideomoneĩ umi ñe’ẽ clave prevtérã next, omoambuéva diapositiva ñemohenda relativamente iñemohenda ko’áĝaguáre. Ikatu avei, eipuru data-slide-toembohasa hag̃ua peteĩ índice diapositiva cruda carrusel-pe data-slide-to="2", haꞌeva salto's pe diapositiva ñemohenda peteĩ índice particular-pe oñepyrũva 0.

JavaScript rupive

Ohenói carrusel manualmente orekóva:

$ ( '.carrusel' ). carrusel rehegua () .

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScriptz rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-interval="".

Método-kuéra rehegua

.carrusel(opciones) rehegua .

Omoñepyrü carrusel orekóva opciones opcionales objectha oñepyrü bicicleta umi artículo rupive.

$ ( '.carrusel' ). carrusel rehegua ({
  intervalo : ary 2000-pe 
}) Ñe’ẽpoty ha purahéi .

.carrusel('ciclo') rehegua.

Ojapo ciclo umi mba e carrusel rehegua rupive izquierda guive derecha peve.

.carrusel('pausa') .

Ojoko carrusel ani haguã ohóva bicicleta rehe umi artículo rupive.

.carrusel(papapy) .

Ombojere carrusel peteĩ marco particular-pe (0 oñemopyendáva, ojoguáva peteĩ matriz-pe).

.carrusel('yva'ekue') .

Ombohasa ciclo pe elemento ohasava’ekuépe.

.carrusel('oúva') .

Ombojere pe mba’e oúvape.

Umi mba’e oikóva

Bootstrap clase carrusel oikuaauka mokõi evento ojeengancha haguã funcionalidad carrusel-pe.

Tembiecharã

Peteĩ plugin básico, oñembotuicháva ndahasýiva ojejapo pyaꞌe hag̃ua umi typeahead elegante oimeraẽva formulario jeike jehaipyre reheve.

< type de entrada = "jehaipyre" data-provide = "typeahead" >  

Emohendaséta autocomplete="off"ani hag̃ua ojekuaa umi menú kundahára ñepyrũrã Bootstrap typeahead ñemboguejyha ári.

Jeporu rehegua

Umi atributo de datos rupive

Oñemoĩve umi atributo dato rehegua ojeregistra hag̃ua peteĩ elemento orekóva funcionalidad typeahead ojehechaukaháicha techapyrã yvateguápe.

JavaScript rupive

Ehenói typeahead-pe manualmente ko’ãva ndive:

$ ( '.ehai tenonde' ). ehai tenondegua () .

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-source="".

Método-kuéra rehegua

.typeahead(opciones) rehegua .

Omoñepyrũ peteĩ jeike peteĩ typeahead reheve.

Tembiecharã

Pe subnavegación oĩva ijasu gotyo ha’e peteĩ demostración en vivo pe affix plugin rehegua.

Jeporu rehegua

Umi atributo de datos rupive

Oñemoĩ hag̃ua fácilmente comportamiento de affix oimeraẽ elemento-pe, emoĩnte data-spy="affix"pe elemento ojeespiaasévape. Upéi eipuru desplazamiento emombeꞌu hag̃ua arakaꞌepa embogue ha emboguevaꞌerã peteĩ elemento jekutu.

<div data-spy = "affix" dato-desplazamiento-yvate = "200" > ... </div>  

JavaScript rupive

Ehenói pe affix plugin JavaScript rupive:

$ ( '#navbar' ). affix rehegua () .

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-offset-top="200".