Modalkunamanta

Huk allinchasqa, ichaqa flexible, ñawpaq javascript modal plugin kaqpi hap'iy aswan pisi munasqa ruwanakunallawan chaymanta yuyaysapa ñawpaqmanta churasqakunawan.

Ejemplo estático

Uraypiqa huk modal estáticamente ruwasqa kachkan.

Demostración en vivo

Huk modalta javascript kaqnintakama tikray uraypi kaq ñit'inata ñit'ispa. Chayqa urayman llimp’inqa, chaymantataq p’anqa patamantapacha chinkapunqa.

Bootstrap-modal nisqawan yanapachikuspa

Llama al modal vía javascript:

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

Akllanakuna

Markup

Modalkunata p'anqaykipi mana sasachakuspa llamk'achiyta atinki mana huk chiru javascript qillqanaykichu tiyan. Huk data-toggle="modal"controlador elemento kaqpi huk data-target="#foo"utaq href="#foo"mayqinchus huk modal elemento id kaqwan tupan kaqlla churay, chaymanta ñit'isqa kaqtin, modalniyki qallarinqa.

Hinallataq, akllanakuna modal instanciaykiman yapanapaq, chaylla yapa willay atributokuna hina kamachiy elemento kaqpi utaq kikin modal markapi churay.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Modal nisqa qallariy </a>    

<div clase = "modal pakay" id = "myModal" >  
  <div clase = "modal-umalliq" > 
    <button type = "button" class = "wichqay" data-dismiss = "modal" > × </button>   
    <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" data-dismiss = "modal" > Wichqay </a>   
    <a href = "#" class = "btn btn-primary" > Hukchasqakunata waqaychay </a>  
  </div> nisqa
</div> nisqa

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.

Urmachiykunamanta

Yaqa imamanpas Bootstrap kaqpi urayk'aq menúkunata yapay kay sanu plugin kaqwan. Bootstrap hunt'asqa urayk'aq menú yanapakuyta ruwan kay navbar kaqpi, tablakuna chaymanta pastillas kaqpi.

Ejemplos

Uraypi navbar kaqpi nav t’inkikuna urayk’aq kaqpi ñit’iy chaymanta uraypi pastillakuna urayk’aqkunata pruebapaq.

• Enlace regular
• Urmachiy
  • Action
  • Another action
  • Something else here
  • Separated link
• Urmachiy 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Urmachiy 3
  • Action
  • Another action
  • Something else here
  • Separated link

Bootstrap-dropdown.js nisqawan yanapachikuspa

Javascript nisqawan urayk'achiqkunata waqyay:

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

Markup

Utqaylla yapanapaq urayk'aq ruwanakunata mayqin elementomanpas yapaylla data-toggle="dropdown"chaymanta mayqin allin bootstrap urayk'aq kikinmanta llamk'achisqa kanqa.

<ul clase = "nav nav-pastillas" > 
  <li class = "activo" ><a href = "#" > Sapa kuti t'inki </a></li>  
  <li clase = "uraq" id = "menú1" >  
    <a clase = "uraq-tukuy" data-toggle = "uraq" href = "#menu1" >   
      Urmachiy
      <b clase = "caret" ></b> 
    </a>
    <ul clase = "uraq-menú" > 
      <li><a href = "#" > Ruway </a></li> 
      <li><a href = "#" > Huk ruray </a></li> 
      <li><a href = "#" > Huk kaypi </a></li> 
      <li clase = "rakiq" </li> 
      <li><a href = "#" > T'aqasqa t'inki </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul clase = "nav nav-pastillas" > 
  <li clase = "uraq" > 
    <a class = "urquy-t'ikray" data-toggle = "urquy" willay-target = "#" href = "ñan/a/p'anqa.html" >    
      Urmachiy
      <b clase = "caret" ></b> 
    </a>
    <ul clase = "uraq-menú" > 
      ...
    </ul>
  </li>
</ul>

Métodos

$().urquy() .

Huk programatico api huk qusqa navbar utaq tabbed puriypaq menúkuna llamk'achinapaq.

ScrollSpy plugin kikinmanta musuqyachiypaq nav metakuna kuyuchiy posición kaqpi.

Ejemplo navbar con scrollspy

Uraypi kaq chiqanpi puriy hinaspa qhaway puriy musuqyachiyta. Chay urayk’aq sub elementokuna hinallataq resaltasqa kanqa. ¡Pruebalo!

Bootstrap-scrollspy.js nisqawan yanapachikuspa

Javascript nisqawan scrollspy nisqaman waqyay:

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

Markup

Scrollspy ruwayta mana sasachakuspa yapanapaq hawa barra puriyniykiman, data-spy="scroll"elemento espía munasqaykiman yapaylla (aswan típicamente kay cuerpo kanman).

<kurku data-spy = "kurkuy" > ... </cuerpo>  

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

Eventos nisqakuna

Kay plugin usqay, kallpasapa tabla chaymanta pastilla ruwanakunata yapan llaqta contenido kaqninta tikraypaq.

Ejemplo de tablas

Uraypi kaq tablakunata ñit'iy pakasqa paneles ukhupi tikranaykipaq, urayk'aq menúkunawanpas.

• Wasi
• Runapa kaynin
• Urmachiy
  • @fat
  • @mdo

Bootstrap-tab.js nisqawan yanapachikuspa

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 pestaña 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.

Yanapakuykunamanta

Jason Framepa qillqasqan allin jQuery.tipsy pluginmanta yuyaychasqa; Llamkanakuna huk musuqchasqa laya kanku, mayqinkunachus mana siq'ikunapi hapipakunkuchu, css3 llamk'achinku kawsachiykunapaq, chaymanta data-attributos kitipi titulu waqaychaypaq.

Ejemplo de uso de Tooltips

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

Bootstrap-tooltip.js nisqawan yanapachikuspa

Javascript nisqawan yanapakuypa yuyaychayninta llamk'achiy:

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

Akllanakuna

Markup

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

<a href = "#" rel = "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' )

Popovers nisqamanta

Yanapakuy uchuy llanthukuna contenidomanta, iPad kaqpi hina, mayqin elementomanpas iskay kaq willayta wasichaypaq.

* Tooltip nisqa churasqa kananta munan

Ejemplo hover popover nisqa

Chay botón hawapi makiwan churay popover nisqa qallarinanpaq.

Bootstrap-popover.js nisqawan yanapachikuspa

Javascript nisqawan popovers nisqakunata atichiy:

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

Akllanakuna

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' ) .

Alertakunamanta

Willakuy plugin huk uchuy clase kan qaylla ruwanakuna willaykunaman yapanapaq.

Ejemplo de alertas

Alertakuna plugin sapa kuti willakuy willakuykunapi llamkan, chaymanta harkakuy willakuykunata.

Bootstrap-alert.js nisqawan yanapachikuspa

Huk willayta javascript kaqnintakama 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.

Sobre

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

Ejemplos de usos

Estadokunapaq chaymanta tikraykunapaq botones plugin kaqwan llamk'achiy.

Bootstrap-button.js nisqawan yanapachikuspa

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.

<!-- Huk ñit'inapi tikrayta llamk'achinapaq data-toggle="button" yapay -->
<button class = "btn" data-toggle = "button" > Huklla tikray </button>  
 
<!-- data-toggle="buttons-checkbox" nisqa yapay, btn-group nisqapi --> nisqapi qhawana estilo tikraypaq
<div clase = "btn-huñu" willay-t'ikray = "botonkuna-qhaway qutu" >  
  <button class = "btn" > Lluq'i </button> 
  <button class = "btn" > Chawpi </button> 
  <button class = "btn" > Paña </button> 
</div> nisqa
 
<!-- yapay data-toggle="buttons-radio" radio estilo tikraypaq btn-grupo kaqpi -->
<div clase = "btn-huñu" willay-t'ikray = "botonkuna-radio" >  
  <button class = "btn" > Lluq'i </button> 
  <button class = "btn" > Chawpi </button> 
  <button class = "btn" > Paña </button> 
</div> nisqa

Métodos

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

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

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

<button class = "btn" willay-hunt'asqa-qillqa = "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:

Bootstrap-collapse.js nisqawan yanapachikuspa

Javascript nisqawan atichiy:

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

Akllanakuna

Markup

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.

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

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.

Sobre

Elementokuna chawpipi ciclopaq huk genérico plugin. Kusikuy-ruray.

Ejemplo carrusel

Uraypi kaq diapositivakunata qhaway.

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

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

Kimsa kaq Uchuylla etiqueta

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.

‹ . › .

Bootstrap-carousel.js nisqawan yanapachikuspa

Llama vía javascript:

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

Akllanakuna

Markup

Willayta atributukuna ñawpaq chaymanta qatiq conrol kaqpaq llamk'achisqa. Qawaykuy kay urapi ejemplo marcadota.

<div id = "mi Carrusel" clase = "carrusel diapositiva" >  
  <!-- 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

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.

Sobre

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

Qatina

Uraypi kaq pampapi qillqayta qallariy, qillqana ñawpaqpi ruwasqakunata rikuchinaykipaq.

Bootstrap-typeahead.js nisqawan yanapachikuspa

Javascript nisqawan typeahead nisqaman waqyay:

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

Akllanakuna

Markup

Huk elementota typeahead ruwanawan qillqanapaq willay layakunata yapay.

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

Métodos

.typeahead(akllanakuna) .

Huk yaykusqata huk typeahead nisqawan qallarichin.