Sapakama utaq huñusqa

Pluginkuna sapalla churasqa kanman (wakinkuna hapipakuykunata mañasqa kaptinpas), utaq llapan huk kutillapi. Iskaynin bootstrap.js chaymanta bootstrap.min.js llapa plugins huk willakuypi kanku.

Atributos de datos

Llapa Bootstrap plugins llamk'achiyta atikunki ch'uya API marcación kaqninta mana huk chiru JavaScript qillqaspa. Kayqa Bootstrap kaqpa ñawpaq clase API kaqnin chaymanta ñawpaq qhawayniyki kanan tiyan huk plugin llamk'achkaspa.

Chayta nispa, wakin situacionkunapi kay ruwayta wañuchiy munasqa kanman. Chayrayku, atiyta quykutaq willay atributo API mana llamk'achiyta llapa ruwaykunata mana wataspa kurku sutipi `'data-api'` kaqwan. Kayqa kayhinam rikchakun:

$ ( 'cuerpo' ). apagasqa ( '.datos-api' )

Hukninpi, huk específico plugin kaqman targetta ruwanapaq, pluginpa sutinta huk sutinchana hina churaylla kayhina data-api sutinchanawan kuska:

$ ( 'cuerpo' ). apagasqa ( '.alerta.datos-api' )

API programática nisqa

Hinallataq iñiyku llapa Bootstrap plugins llamk'achiyta atisqaykita ch'uya JavaScript API kaqnintakama. Llapan llapapaq APIkuna sapalla, kadenayuq ruwanakuna kanku, chaymanta huñusqa ruwasqa kutichiy.

$ ( ".btn.peligro" ). ñit'ina ( "toggle" ). addClass ( "wira" ) .

Llapan ruwanakuna huk akllana akllanakuna objetota chaskinanku tiyan, huk watiqa mayqinchus huk ruwanaman chayan, utaq mana ima (mayqinchus huk plugin ñawpaqmanta ruwaywan qallarichin):

$ ( "#modalniy" ). modal () // ñawpaqmanta churasqakunawan qallarisqa                       
$ ( "#modalniy" ). modal ({ teclado : false }) // mana tecladoyuq qallarisqa     
$ ( "#modalniy" ). modal ( 'rikuchiy' ) // chaylla rikuchiyta qallarichin hinaspa waqyan                

Sapa pluginpas huk `Constructor` kaqninpi raw ruwaqninta riqsichin: $.fn.popover.Constructor. Sichus huk plugin instanciata chaskiyta munanki, huk elementomanta chiqalla kutichiy: $('[rel=popover]').data('popover').

Mana Ch’aqway

Wakin kutiqa huk UI marcokunawan Bootstrap plugins llamk'achina tiyan. Kayhina kaqtinqa, sutikunap chiqan t'inkinakuyninkuna wakin kutipi kanman. Sichus kay ruwakun, chay plugin kaqman waqyayta .noConflictatikunki mayqinmantachus chanita kutichiyta munanki.

var bootstrapButton = $ nisqa. fn nisqa. nisqa boton . noConflict () // kutichiy $.fn.button ñawpaq churasqa chaniman 
$ nisqa. fn nisqa. bootstrapBtn = bootstrapButton             // quy $().bootstrapBtn chay bootstrap ruwayta

Eventos nisqakuna

Bootstrap sapanchasqa ruwaykunata qun aswan plugin sapalla ruwanakuna kaqpaq. Tukuypaq, kaykunaqa mana tukukuq, ñawpaq participio nisqa rikch'aypi hamunku - maypichus infinitivo (ex. show) huk suceso qallariypi llamk'achisqa, ñawpaq participio nisqa rikch'ayninqa (ex. shown) huk ruway tukukuptin llamk'achisqa.

Llapan mana tukukuq ruwaykuna preventDefault ruwayta qun. Kayqa huk ruwayta manaraq qallarichkaptin sayachiy atiyta qun.

$ ( '#modalniy' ). on ( 'rikuchiy' , ruway ( e ) {   
    sichus (! datos ) kutichiy e . preventDefault () // modal rikuchisqa kananpaq sayachin   
}) nisqa.

Transiciones nisqamanta

Sasan tikray efectos kaqpaq, bootstrap-transition.js huk kuti wak JS willañiqikunap ladunpi churay. Sichus huñusqa (utaq pisiyachisqa) bootstrap.js llamk'achkanki , mana kayta churanapaq necesidad kanchu—chaypi kachkanña.

Uso casos

Huk pisi rikch'anakuna tikray plugin kaqmanta:

• Deslizamiento o descoloramiento en modales
• Descoloramiento de pestañas
• Alertakuna chinkachiy
• Paneles de carrusel deslizantes

Ejemplos

Modalkuna allinchasqa kanku, ichaqa flexible, rimanakuna tapuykunata aswan pisi munasqa ruwanakunayuq chaymanta yuyaysapa ñawpaqmanta churasqakunayuq.

Ejemplo estático

Huk ruwasqa modal umawan, kurkuwan, chaymanta ruwanakuna huñuwan chaki kaqpi.

<div class = "modal pakay chinkachiy" > 
  <div clase = "modal-umalliq" > 
    <botón laya = "botón" clase = "wichqay" data-dismiss = "modal" aria-pakasqa = "chiqap" > × </boton> nisqa    
    <h3> Modal umalliq </h3>
  </div> nisqa
  <div clase = "cuerpo-modal" > 
    <p> Huk sumaq cuerpo... </p>
  </div> nisqa
  <div clase = "modal-chaki" > 
    <a href = "#" clase = "btn" > Wichqay </a>  
    <a href = "#" class = "btn btn-primary" > Hukchasqakunata waqaychay </a>  
  </div> nisqa
</div> nisqa

Demostración en vivo

Huk modal JavaScript kaqninta tikray uraypi kaq ñit'inata ñit'ispa. Chayqa urayman llimp’inqa, chaymantataq p’anqa patamantapacha chinkapunqa.

<!-- Botón para disparo modal -->
<a href = "#myModal" ruway = "botón" clase = "btn" data-toggle = "modal" > Demo modalta qallariy </a>    
 
<!-- Modal -->
<div id = "myModal" clase = "modal pakay chinkachiy" tabindex = "-1" ruway = "rimanakuy" aria-labelledby = "myModalLabel" aria-pakasqa = "chiqap" >      
  <div clase = "modal-umalliq" > 
    <button type = "button" class = "wichqay" data-dismiss = "modal" aria-pakasqa = "chiqap" > × </button>    
    <h3 id = "myModalLabel" > Modal umalliq </h3> 
  </div> nisqa
  <div clase = "cuerpo-modal" > 
    <p> Huk sumaq cuerpo... </p>
  </div> nisqa
  <div clase = "modal-chaki" > 
    <button class = "btn" data- dismiss = "modal" aria-pakasqa = "chiqap" > Wichqay </button>   
    <button class = "btn btn-primary" > Hukchasqakunata waqaychay </button> 
  </div> nisqa
</div> nisqa

Uso

Atributos de datos nisqawan

JavaScript qillqaspa mana huk modal nisqa llamk'achiy. Huk kamachiq elemento kaqpi churay data-toggle="modal", huk ñit'ina hina, huk data-target="#foo"utaq href="#foo"huk específico modal kaqman tikranapaq target kaqwan kuska.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Modal </button> qallariy   

JavaScript nisqawan

Huk modal id myModalkaqwan huk sapalla chiru JavaScript kaqwan waqyay:

$ ( '#modalniy' ). modal ( akllanakuna ) .

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-backdrop="".

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

Métodos

.modal(akllanakuna) .

Contenidoykita huk modal hina activan. Huk akllana akllanakunata chaskikun object.

$ ( '#modalniy' ). modal ({
  teclado : llulla 
}) nisqa.

.modal('t'ikray')

Manualmente huk modal nisqatam tikran.

$ ( '#modalniy' ). modal ( 't'ikray' ) .

.modal('rikuchiy')

Manualmente kichan huk modal.

$ ( '#modalniy' ). modal ( 'rikuchiy' )

.modal('pakakuy')

Manualmente pakakun huk modal.

$ ( '#modalniy' ). modal ( 'pakakuy' ) .

Eventos nisqakuna

Bootstrap kaqpa modal clase huk pisi ruwaykunata rikuchin modal ruwanakunaman enganche kaqpaq.

$ ( '#modalniy' ). on ( 'pakasqa' , ruway () {   
  // imatapas ruway...
}) nisqa.

Ejemplos

Yaqa imamanpas urayk'aq menúkunata yapay kay sasan plugin kaqwan, navbar kaqwan, tablakuna chaymanta pastillas kaqwan.

Huk navbar ukhupi

Dentro de tablas

Uso

Atributos de datos nisqawan

data-toggle="dropdown"Huk t'inkiman utaq ñit'inaman yapay huk urayk'achiqta tikranaykipaq.

<div clase = "uraq" > 
  <a class = "urquy-tukuy" data-toggle = "urquy" href = "#" > Urmachiy llamk'achiq </a>   
  <ul clase = "uray-menú" ruway = "menú" aria-etiquetadoby = "dEtiqueta" >   
    ...
  </ul>
</div> nisqa

URLkuna mana imayuq kananpaq data-target, href="#".

<div clase = "uraq" > 
  <a clase = "uraq-t'ikray" id = "dLabel" ruway = "botón" willay-t'ikray = "uraq" willay-target = "#" href = "/p'anqa.html" >      
    Urmachiy
    <b clase = "caret" ></b> 
  </a>
  <ul clase = "uray-menú" ruway = "menú" aria-etiquetadoby = "dEtiqueta" >   
    ...
  </ul>
</div> nisqa

JavaScript nisqawan

JavaScript nisqawan urayk'achiqkunata waqyay:

$ ( '.urquy-t'ikray' ). urayk'aq () .

Akllanakuna

Mana mayqinpas

Métodos

$().dropdown('t'ikray') .

Huk programatico api menúkuna huk qusqa navbar utaq tabbed puriypaq tikraypaq.

Ejemplo en navbar

ScrollSpy plugin kikinmanta musuqyachiypaq nav metakuna kuyuchiy posición kaqpi. Navbar urapi kaq áreata kuyuchiy chaymanta qhaway activo clase tikrayta. Chay urayk’aq sub elementokuna hinallataq resaltasqa kanqa.

Uso

Atributos de datos nisqawan

Scrollspy ruwayta mana sasachakuspa yapanaykipaq topbar puriyniykiman, data-spy="scroll"elemento espía munasqaykiman yapaylla (aswan típicamente kay cuerpo kanman) chaymanta data-target=".navbar"mayqin nav llamk'achinaykipaq akllanaykipaq. .navHuk componentewan scrollspy llamk'achiyta munanki .

<cuerpo data-spy = "kurkuy" willay-target = ".navbar" > ... </body>  

JavaScript nisqawan

JavaScript nisqawan chay scrollspy nisqaman waqyay:

$ ( '#navbar' ). scrollspy () nisqa.

Métodos

.scrollspy(' musuqyachiy')

Scrollspy DOM kaqmanta elementokuna yapay utaq hurquywan kuska llamk'achkaspa, musuqyachiy ñanta chayhina waqyanayki tiyan:

$ ( '[datos-espio="desplazamiento"]' ). sapa ( ruway () { .  
  var $spy = $ ( kay ). scrollspy ( 'manta musuqyachiy' ) .
});

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-offset="".

Eventos nisqakuna

Ejemplo de tablas

Yanapakuy utqaylla, kallpasapa tabla ruwanakunata kitipi kaqpa paneles kaqninta tikraypaq, urayk'aq menúkuna kaqnintakamapas.

Uso

JavaScript kaqnintakama tablakuna ruwanakuna atichiy (sapa tablakuna sapalla llamk'achinan tiyan):

$ ( '#miTab a' ). ñit'iy ( ruray ( e ) { .  
  e . hark'ayÑawpaqmanta churasqa ();
  $ ( kay ). tab ( 'rikuchiy' );
}) nisqa.

Sapa tablakunata achka ruwaykunapi llamk'achiyta atikunki:

$ ( '#miTab huk[href="#perfil"]' ). tab ( 'rikuchiy' ); // Sutiman hina tablata akllay 
$ ( '#miTab a:primero' ). tab ( 'rikuchiy' ); // Ñawpaq kaq tablata akllay 
$ ( '#miTab a:qhipa' ). tab ( 'rikuchiy' ); // Qhipa kaq tablata akllay 
$ ( '#miTab li:eq(2) a' ). tab ( 'rikuchiy' ); // Kimsa kaq tablata akllay (0-indexado) . 

Markup

Huk tabla utaq pastilla puriyta mana ima JavaScript qillqaspa llamk'achiyta atikunki huk elemento kaqpi willaylla data-toggle="tab"utaq data-toggle="pill"huk elemento kaqpi. navchaymanta chaymanta nav-tabsclasekuna tablaman yapayqa ulBootstrap tabla estilota ruwanqa.

<ul clase = "nav nav-tabs" > 
  <li><a href = "#wasi" data-toggle = "tab" > Wasi </a></li>  
  <li><a href = "#perfil" data-toggle = "tab" > Willakuy </a></li>  
  <li><a href = "#willakuykuna" data-toggle = "tab" > Willakuykuna </a></li>  
  <li><a href = "#ajustes" data-toggle = "tab" > Ajustes </a></li>  
</ul>

Métodos

$().tab nisqa

Huk elemento de pestaña chaymanta contenido waqaychanata llamk'achin. Tab huk data-targetutaq huk hreftargeting huk contenedor nodo DOM kaqpi kanan tiyan.

<ul clase = "nav nav-tabs" id = "miTab" >  
  <li clase = "activo" ><a href = "#wasi" > Wasi </a></li>  
  <li><a href = "#perfil" > Willakuy </a></li> 
  <li><a href = "#willakuykuna" > Willakuykuna </a></li> 
  <li><a href = "#ajustes" > Ajustes </a></li> 
</ul>
 
<div clase = "pistaña-contenido" > 
  <div clase = "tab-pane activo" id = "wasi" > ... </div>  
  <div clase = "tab-pane" id = "perfil" > ... </div>  
  <div clase = "tab-pane" id = "willakuykuna" > ... </div>  
  <div clase = "tab-pane" id = "ajustes" > ... </div>  
</div> nisqa
 
<qillqa>
  $ ( ruway () { .  
    $ ( '#miTab a:qhipa' ). tab ( 'rikuchiy' );
  }) nisqa.
</script> nisqa

Eventos nisqakuna

$ ( 'a[datos-toggle="tab"]' ). on ( 'rikuchishka' , rurana ( e ) {   
  e . target // llamk'achisqa tabla
  e . relatedTarget // ñawpaq kaq tabla
}) nisqa.

Ejemplos

Jason Framepa qillqasqan allin jQuery.tipsy pluginmanta yuyaychasqa; Llamkanakuna huk musuqchasqa laya kanku, mayqinkunachus mana siq'ikunapi hapipakunkuchu, CSS3 llamk'achinku kawsachiykunapaq, chaymanta willay-atributokuna llaqta titulu waqaychaypaq.

Ruway razonkunarayku, yanapakuypa yanapakuynin chaymanta popover data-apis akllana kachkanku, niyta munan qam kikiyki qallarichinayki tiyan .

Uraypi t'inkikuna patapi makiwan ñit'iy yanapakuykunata qhawanaykipaq:

Tawa ñankuna

Yaykuy huñukunapi yanapakuykuna

Bootstrap yaykuna qutukunawan yanapakuykunata chaymanta popovers llamk'achkaspa, container(urapi qillqasqa) akllanata churanayki tiyan mana munasqa efectos secundarios kaqmanta.

Uso

JavaScript nisqawan yanapakuypa yuyaychayninta llamk'achiy:

$ ( '#ejemplo' ). yanapakuypa yuyaychaynin ( akllanakuna ) .

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-animation="".

Markup

<a href = "#" data-toggle = "llamk'anapa yuyaychaynin" title = "ñawpaq kaq yanapakuypa yuyaychaynin" > ñuqapa hawaypi </a> kuyurichiy   

Métodos

$().llamk'anakuna(akllanakuna) .

Huk elemento huñusqaman huk yanapakuypa yanapaqninta k'askachin.

.tooltip('rikuchiy')

Huk elementopa yanapakuypa yuyaychaynintam qawachin.

$ ( '#elemento' ). yanapakuypa yuyaychasqan ( 'rikuchiy' )

.tooltip('pakakuy')

Huk elementopa yanapakuypa yuyaychayninta pakan.

$ ( '#elemento' ). yanapakuypa yuyaychasqan ( 'pakakuy' )

.tooltip('t'ikray')

Huk elementopa yanapakuypa yuyaychaynintam tikran.

$ ( '#elemento' ). yanapakuypa yuyaychasqan ( 'toggle' )

.tooltip('ch'usaqyachiy')

Huk elementopa yanapakuypa yuyaychayninta pakaspa chinkachin.

$ ( '#elemento' ). tooltip ( 'ch'usaqyachiy' )

Ejemplos

Yanapakuy uchuy llanthukuna contenidomanta, iPad kaqpi hina, mayqin elementomanpas iskay kaq willayta wasichaypaq. Chay botón hawapi makiwan churay popover nisqa qallarinanpaq. Tooltip nisqa churasqa kananta munan .

Popover estático

Tawa akllanakuna kan: pata, paña, uray, lluq'i chiqanchasqa.

Mana huk marka rikuchisqachu popovers hina JavaScript kaqmanta chaymanta huk dataatributo ukhupi contenidomanta ruwasqa.

Demostración en vivo

Tawa ñankuna

Uso

JavaScript nisqawan popovers nisqakunata atichiy:

$ ( '#ejemplo' ). popover ( akllanakuna ) .

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-animation="".

Markup

Ruwayrayku, Tooltip chaymanta Popover data-apis akllana kanku Sichus chayta llamk'achiyta munanki huk akllana akllanallata willay.

Métodos

$().popover(akllanakuna) .

Huk elemento huñunapaq popovers nisqakunata qallarichin.

.popover('rikuchiy')

Revela un elementos popover.

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

.popover('pakakuy')

Pakakun huk elementokuna popover.

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

.popover('t'ikray')

Huk elementokuna popover nisqatam tikran.

$ ( '#elemento' ). popover ( 't'ikray' ) .

.popover('ch'usaqyachiy')

Huk elementopa popover nisqa kayninta pakaspa chinkachin.

$ ( '#elemento' ). popover ( 'ch'usaqyachiy' ) .

Ejemplo de alertas

Kay plugin kaqwan llapa willay willaykunaman qarquy ruwayta yapay.

Uso

JavaScript kaqnintakama huk willayta qarquyta atichiy:

$ ( ".alerta" ). alerta () .

Markup

Yanapakuylla data-dismiss="alert"botón wichq'ayniykiman kikillanmanta huk alerta wichq'ay ruwayta qunaykipaq.

<a class = "wichqay" data-dismiss = "alerta" href = "#" > &kutikuna; </a>   

Métodos

$().alerta() nisqa.

Llapan alertakunata qaylla ruwanakunawan p’istun. Alertaykikuna wichq'asqa kaptin animanankupaq, allinta qhaway chay .fadechaymanta .inclase paykunaman churasqaña kasqankuta.

.alert('wichqay')

Huk alertata wichqan.

$ ( ".alerta" ). alerta ( 'wichqay' ) .

Eventos nisqakuna

Bootstrap kaqpa willay clasen huk pisi ruwaykunata riqsichin willay ruwanaman enganche kaqpaq.

$ ( '#mi-alerta' ). bind ( 'wichqasqa' , ruway () {   
  // imatapas ruway...
}) nisqa.

Ejemplos de usos

Astawan ruway botoneswan. Control ñit'ina willan utaq huñukuna botones ruwan aswan componentes kaqpaq imayna llamkanakuna barrakuna.

Estadoyuq

data-loading-text="Loading..."Huk ñit'inapi huk karga estadota llamk'achinapaq yapay .

<button type = "button" class = "btn btn-primary" data-loading-text = "Karqachkan..." > Karqachiy estado </button>   

Huklla toggle

data-toggle="button"Huklla ñit'inapi tikrayta llamk'achinapaq yapay .

<button type = "button" class = "btn btn-primary" data-toggle = "botón" > Huklla tikray </button>   

Caja de verificación

Btn data-toggle="buttons-checkbox"-grupo kaqpi qhawaypaq qillqana mayt'u estilo tikraypaq yapay.

<div clase = "btn-huñu" willay-t'ikray = "botonkuna-qhaway qutu" >  
  <button type = "button" class = "btn btn-primary" > Lluq'i </botón>  
  <botón laya = "botón" clase = "btn btn-primaria" > Chawpi </botón>  
  <botón tipo = "botón" clase = "btn btn-primaria" > Paña </botón>  
</div> nisqa

Radio

btn data-toggle="buttons-radio"-grupo nisqapi radio estilo tikraypaq yapay.

<div clase = "btn-huñu" willay-t'ikray = "botonkuna-radio" >  
  <button type = "button" class = "btn btn-primary" > Lluq'i </botón>  
  <botón laya = "botón" clase = "btn btn-primaria" > Chawpi </botón>  
  <botón tipo = "botón" clase = "btn btn-primaria" > Paña </botón>  
</div> nisqa

Uso

JavaScript nisqawan ñit'inakunata atichiy:

$ ( '.nav-tabs' ). botón () nisqa.

Markup

Willayta atributokuna integral kanku chay botón plugin kaqpi. Uraypi rikch'ana codigota qhaway imaymana markakuna layakuna kaqpaq.

Akllanakuna

Mana mayqinpas

Métodos

$().botón('toggle') nisqa.

Toggles estado de empuje. Chay botónmanmi qun chay rikchayta activasqa kasqanmanta.

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

$().button('carga') .

Botón estadota kargaman churan - ñit'inata mana llamk'achinchu chaymanta qillqata qillqa kargaman tikran. Qillqata kargayqa willay layawan llamk'achispa ñit'ina elementopi sut'inchasqa kanan tiyan data-loading-text.

<button type = "button" class = "btn" data-loading-text = "imakunatapas kargachkanki..." > ... </button>    

$().button('kutichiy') .

Botón estadota kutichin - qillqata ñawpaq qillqaman tikran.

$().botón(cadena) .

Botón estadota kutichin - qillqata mayqin willayta riqsichisqa qillqa estadomanpas tikran.

<botón tipo = "botón" clase = "btn" datos-completo-texto = "tukusqa!" > ... </boton> nisqa    
<qillqa>
  $ ( '.btn' nisqa ). botón ( 'hunt'asqa' ) .
</script> nisqa

Sobre

Estilos de base chaymanta flexible yanapakuyta hapiy componentes collapsibles kaqpaq acordeón hina chaymanta navegación kaqhina.

* Transiciones nisqa plugin nisqa churasqa kananta munan.

Ejemplo de acordeón

Collapse plugin kaqwan, huk sanu acordeón estilo widgetta ruwarqayku:

<div clase = "acordeón" id = "acordeón2" >  
  <div clase = "acordeón-huñu" > 
    <div clase = "acordeón- umalliq" > 
      <a class = "acordeón-toggle" data-toggle = "t'uqyachiy" willay-tayta = "#acordeón2" href = "#huklla urmachiy" >    
        Collapsible Grupo Artículo #1
      </a>
    </div> nisqa
    <div id = "collapseOne" class = "acordeón-cuerpo urmachiypi" >  
      <div clase = "acordeón-ukhu" > 
        Anim pariatur cliché...
      </div> nisqa
    </div> nisqa
  </div> nisqa
  <div clase = "acordeón-huñu" > 
    <div clase = "acordeón- umalliq" > 
      <a class = "acordeón-toggle" data-toggle = "collapse" data-parent = "#acordeón2" href = "#Iskay urmachiy" >    
        Artículo de Grupo Plegable #2
      </a>
    </div> nisqa
    <div id = "Iskay urmachiy" class = "acordeón-kurku urmachiy" >  
      <div clase = "acordeón-ukhu" > 
        Anim pariatur cliché...
      </div> nisqa
    </div> nisqa
  </div> nisqa
</div> nisqa
...

Hinallataqmi chay plugin nisqatapas mana acordeón nisqa markayuqta llamk'achiyta atinki. Huk botón huk elementopa mastarikuyninta, urmaynintapas tikrayta ruway.

<botón laya = "botón" clase = "btn btn-peligro" data-toggle = "collapse" datos-target = "#demo" >    
  simple plegable
</boton> nisqa
 
<div id = "demo" clase = "uchuy" > ... </div>  

Uso

Atributos de datos nisqawan

Solo añadir data-toggle="collapse"y un data-targeta elemento para asignar automáticamente control de un elemento collapsible. Atributo data-targethuk css akllaqta chaskikun chayman urmachiyta churanapaq. Aswan allinta yapay chay claseta collapsechay elemento collapsible nisqaman. Sichus ñawpaqmanta kichasqa kananta munanki, yapasqa claseta yapay in.

Acordeón hina huñu kamachiyta huk llalliq kamachiyman yapanaykipaq, willay laya yapay data-parent="#selector". Kayta ruwaypi qhawanaykipaq demo nisqapi qhaway.

JavaScript nisqawan

Makiwan atichiy kaykunawan:

$ ( ".ch'usaqyachiy" ). urmachiy () .

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-parent="".

Métodos

.collapse(akllanakuna) .

Contenidoykita huk elemento collapsible hina activan. Huk akllana akllanakunata chaskikun object.

$ ( '#ÑoqaqT'inkisqa' ). urmachiy ({
  toggle : llulla 
}) nisqa.

.collapse('t'ikray') .

Huk ñit'isqa elementota rikuchisqaman icha pakasqaman tikran.

.collapse('rikuchiy') .

Huk llalliq elementota rikuchin.

.collapse('pakakuy') .

Huk llalliq elementota pakan.

Eventos nisqakuna

Bootstrap kaqpa urmachiy clase huk pisi ruwaykunata riqsichin urmachiy ruwanaman enganche kaqpaq.

$ ( '#ÑoqaqT'inkisqa' ). on ( 'pakasqa' , ruway () {   
  // imatapas ruway...
}) nisqa.

Ejemplo carrusel

Uraypi diapositiva rikuchiy huk genérico plugin chaymanta componente rikuchin huk carrusel hina elementokuna kaqninta ciclopaq.

Ñawpaq kaq Etiqueta de Miniatura

Cras justo odio, dapibus ac facilisis en, egestas eget quam. Donec id elit mana mi porta gravida nisqapi eget metus nisqapi. Nullam id dolor id nibh ultricies antawakuna ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ . › .

<div id = "mi Carrusel" clase = "carrusel diapositiva" >  
  <ol clase = "carrusel-rikuchiqkuna" > 
    <li data-target = "#myCarousel" data-slide-to = "0" clase = "activo" ></li>   
    <li willay-target = "#myCarousel" willay-slide-a = "1" ></li>  
    <li willay-target = "#myCarousel" willay-slide-a = "2" ></li>  
  </ol> nisqa
  <!-- Artículos de carrusel -->
  <div clase = "carrusel-ukhu" > 
    <div clase = "ruray kaq" > ... </div> 
    <div clase = "imayna" > ... </div> 
    <div clase = "imayna" > ... </div> 
  </div> nisqa
  <!-- Carrusel nav -->
  <a class = "carrusel-control izquierdo" href = "#mi Carrusel" data-slide = "ñawpaq" > ‹ </a>   
  <a class = "carrusel-control derecho" href = "#mi Carrusel" data-slide = "qhipa" > › </a>   
</div> nisqa

Uso

Atributos de datos nisqawan

Atributos de datos nisqawan yanapachikuy carruselpa maypi kayninta mana sasachakuspalla kamachinaykipaq. data-slidechaskin llalliq simikunata prevutaq next, mayqinchus diapositivapa kayninta kunan tiyasqanmanhina tikran. Hukninpi, llamk'achiy data-slide-tohuk raw diapositiva indiceta carruselman pasananpaq data-slide-to="2", mayqinchus salta's diapositiva posición huk particular indiceman qallariq 0.

JavaScript nisqawan

Llama a carrusel manualmente con:

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

Akllanakuna

Akllanakuna willay layakuna utaq JavaScriptz kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-interval="".

Métodos

.carrusel(akllanakuna) .

Carruselta huk opcional akllanakunawan objectqallarichin chaymanta bicicletapi puriyta qallarikun imakuna kaqnintakama.

$ ( '.carrusel' ). carrusel ({
  intervalo : 2000 watamanta 
}) nisqa.

.carrusel('ciclo') nisqa.

Carrusel nisqa imakunatapas lluq’imanta pañaman muyurin.

.carrusel('pausa') .

Carruselta imakuna chawpinta bicicletapi purinanta harkan.

.carrusel(yupay) .

Carruselta huk marco particularman muyuchin (0 kaqpi, huk matrizman rikch'akuq).

.carrusel('ñawpaq')

Ñawpaq kaq kaqman muyurin.

.carrusel('qhipa')

Qatiqnin kaqman muyurin.

Eventos nisqakuna

Bootstrap kaqpa carrusel clase iskay ruwaykunata rikuchin carrusel ruwanaman enganche kaqpaq.

Qatina

Huk sapsi, mana sasa mast'arisqa plugin usqhaylla ruwanapaq elegante typeaheads ima formulario qillqa yaykuywan.

<yaykuna laya = "qillqa" data-provide = "typeahead" >  

Qam churayta munanki autocomplete="off"harkananpaq ñawpaqmanta maskaq menúkuna Bootstrap typeahead urayk'aq patapi rikhurinanpaq.

Uso

Atributos de datos nisqawan

Yanapakuypa atributonkunata yapay huk elementota qillqanapaq typeahead ruwanakunayuq imaynachus hawapi rikuchiypi rikuchikun.

JavaScript nisqawan

Llama al typeahead manualmente con:

$ ( '.awpaqman qillqay' ). ñawpaqman qillqay () .

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-source="".

Métodos

.typeahead(akllanakuna) .

Huk yaykusqata huk typeahead nisqawan qallarichin.

Qatina

Lluq'i kaqpi subnavigacionqa huk kawsaq demo kaqmanta affix plugin kaqmanta.

Uso

Atributos de datos nisqawan

Ima elementomanpas affix ruwayta mana sasachakuspa yapanaykipaq data-spy="affix", chay elementoman yapaylla espia munasqaykiman. Chaymantataq offsets nisqawan llamk'achiy mayk'aq huk elementop pinchayta llank'achiyta, wañuchiyta ima tikranapaq.

<div data-spy = "affix" datos-offset-pata = "200" > ... </div>  

JavaScript nisqawan

JavaScript nisqawan affix plugin nisqaman waqyay:

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

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-offset-top="200".