Bootstrap nisqapaq Javascript nisqa

Bootstrap kaqpa componentes kaqninta kawsayman apamuy —kunan 12 sapanchasqa jQuery plugins kaqwan.

Modales nisqa

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

Urmachiykuna

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.

Scrollspy nisqa

Scrollspy llamk'achiy kikinmanta musuqyachinaykipaq t'inkikunata navbarniykipi kunan ruwasqa t'inkita rikuchinaykipaq kuyuypa posiciónninpi.

Pestañas cambiables

Kay plugin llamk'achiy pestañas chaymanta pastillas aswan allin kananpaq saqispa chayta tikranankupaq paneles tablables kaqninta local contenido kaqmanta.

Yanapakuykuna

Huk musuq hap'iy jQuery Tipsy plugin kaqpi, Tooltips mana siq'ikunapi hapipakunkuchu—CSS3 llamk'achinku kawsachiykunapaq chaymanta willay-atributokuna kiti titulo waqaychaypaq.

Popovers * nisqa.

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

* Tooltips nisqakuna churasqa kananta mañan

Willakuykuna willakuy

Willakuy plugin huk uchuy clase kan qaylla ruwanakuna willaykunaman yapanapaq.

Botones

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

Tuñiy

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

Carrusel

Ruway huk kusikuy-muyuyta ima ruwanamanta munasqaykimanta huk interactivo diapositiva qhawayta quyta munanki.

Ñawpaqman qillqay

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

Transiciones * nisqa.

Sasan tikray efectos kaqpaq, bootstrap-transition.js huk kutita churay modales kaqpi llimp'inapaq utaq willakuykunata chinkachinapaq.

* Pluginkunapi animacionpaq mañasqa

¡Umakuna wichayman! Llapan javascript plugins jQuery kaqpa qhipa kaq laya kaqninta munanku.

Modalkunamanta

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

Archivota hurquy

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.

Modal de demostración nisqa qallariy

Bootstrap-modal nisqawan yanapachikuspa

Llama al modal vía javascript:

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

Akllanakuna

Suti niraq ñawpaqchasqa willay
telón de fondo boolean nisqa chiqaq Incluye un elemento de telón de fondo modal. Hukninpi, statichuk telón de fondopaq willay mayqinchus mana modal ñit'iypi wichq'anchu.
teclado nisqa boolean nisqa chiqaq Escape llave ñit'isqa kaptin modal nisqatam wichqan
qawachiy boolean nisqa chiqaq Qallarichisqa kaptin modal nisqatam qawachin.

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.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Modal nisqa qallariy </a>
  1. <div clase = "modal pakay" id = "myModal" >
  2. <div clase = "modal-umalliq" >
  3. <button type = "button" class = "wichqay" data-dismiss = "modal" > × </button>
  4. <h3> Modal umalliq </h3>
  5. </div> nisqa
  6. <div clase = "cuerpo-modal" >
  7. <p> Huk sumaq cuerpo... </p>
  8. </div> nisqa
  9. <div clase = "modal-chaki" >
  10. <a href = "#" clase = "btn" data-dismiss = "modal" > Wichqay </a>
  11. <a href = "#" class = "btn btn-primary" > Hukchasqakunata waqaychay </a>
  12. </div> nisqa
  13. </div> nisqa
¡Umakuna wichayman! Sichus modalniyki yaykuy chaymanta lluqsiy kawsachiyta munanki, huk .fadeclase .modalelementoman yapaylla (demo qhaway kayta ruwaypi qhawanaykipaq) chaymanta bootstrap-transition.js churay.

Métodos

.modal(akllanakuna) .

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

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

.modal('t'ikray')

Manualmente huk modal nisqatam tikran.

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

.modal('rikuchiy')

Manualmente kichan huk modal.

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

.modal('pakakuy')

Manualmente pakakun huk modal.

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

Eventos nisqakuna

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

Ruwana Willay
qawachiy Kay ruwayqa chaylla rawrarin mayk'aq showinstancia método waqyasqa.
rikuchisqa Kay ruwayqa llamk'achisqa kachkan mayk'aq modal ruwaqman rikukuq ruwasqa kachkan (css tikraykunata tukunanta suyanqa).
pakay Kay ruwayqa chaylla llamk'achisqa kachkan mayk'aq hideinstancia método waqyasqa kachkan.
pakasqa Kay ruwayqa llamk'achisqa kachkan mayk'aq modal llamk'aqmanta pakasqa kayta tukusqa (css tikraykunata tukunanta suyanqa).
  1. $ ( '#modalniy' ). on ( 'pakasqa' , ruway () {
  2. // imatapas ruway...
  3. }) nisqa.

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

Archivota hurquy

Ejemplo navbar con scrollspy

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

@wira

Polainas de anuncios keytar, brunch id arte fiesta dolor labore. Horquilla yr enim lo-fi antes de que se venden qui. Tumblr chakramanta mesaman bicicleta derechokuna imapas. Anim keffiyeh carles cardigan. Velit seitan mcsweeneypa foto cabina 3 lobo killa irure. Cosby suéter lomo jean pantalones cortos, williamsburg sudadera minim qui probablemente no has escuchado de ellos et cardigan fondo de fideicomiso culpa biodiesel wes anderson estética. Nihil tatuado acusamus, cred ironía biodiésel keffiyeh artesano ullamco consequat.

@mdo nisqa

Veniam marfa bigote patineta, adipisicing fugiat velit horquilla barba. Freegan barba aliqua cupidatat mcsweeneypa vero. Cupidatat tawa loko nisi, ea helvetica nulla carles. Tatuado cosby suéter camión de alimentos, mcsweeney's quis mana freegan vinilo. Lo-fi wes anderson +1 sartorial nisqa. Carles mana estético ejercicio quis gentrificar. Brooklyn adipisicing artesanal cerveza vice keytar deserunt.

huk

Occaecat nisqa commodo nisqa uywa. Fap artesanía cerveza deserunt patineta ea. Lomo bicicleta derechos adipisicing banh mi, velit ea sunt qatiqnin nivel locavore huk-origen café en magna veniam. Alta vida id vinilo, eco parque consequat quis aliquip banh mi horquilla. Vero VHS est adipisicing nisqa. Consectetur nisi DIY mínimo bolsa de mensajero. Cred ex en, sostenible delectus consectetur fanny pack iphone.

iskay

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa mensajero bolsa marfa imapas delectus mikhuy camion. Sapiente sintet id assumenda. Locavore sed helvetica cliche ironía, truenos gatos probablemente no has escuchado de ellos consequat sudadera con capucha sin gluten lo-fi fap aliquip. Labore elit placeat manaraq vendisqanku, terry richardson proident brunch nesciunt quis cosby suéter pariatur keffiyeh ut helvetica artesano. Cardigan cerveza artesanal seitan velit listo. VHS chambray laboris venam temporal nisqa. Anim mollit minim commodo ullamco rayokuna.


Bootstrap-scrollspy.js nisqawan yanapachikuspa

Javascript nisqawan scrollspy nisqaman waqyay:

  1. $ ( '#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).

  1. <kurku data-spy = "kurkuy" > ... </cuerpo>
¡Umakuna wichayman! Navbar t'inkikuna allichanapaq id metakunayuq kanan tiyan. Ejemplopaq, a <a href="#home">home</a>tupananmi imapas dom nisqapi hina <div id="home"></div>.

Métodos

.scrollspy(' musuqyachiy')

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

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

Akllanakuna

Suti niraq ñawpaqchasqa willay
offset nisqa yupay 10. 10 Pixelkuna patamanta offset kananpaq, kuyuypa posiciónninta yupaspa.

Eventos nisqakuna

Ruwana Willay
activar Kay suceso ninawan mayk'aqllapas huk musuq imapas scrollspy kaqwan llamk'achisqa kaptin.

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

Archivota hurquy

Ejemplo de tablas

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

Crudo denim probablemente no has escuchado de ellos pantalones cortos vaqueros Austin. Nesciunt tofu tocón aliqua, retro sintetizador maestro limpieza. Bigote cliché temporal, williamsburg carles vegana helvetica. Reprehenderit carnicero retro keffiyeh musquy hapiq sintetizador. Suéter cosby eu banh mi, qui irure terry richardson ex calamar. Aliquip lugarat salvia cillum 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.


Bootstrap-tab.js nisqawan yanapachikuspa

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

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

Sapa tablakunata achka ruwaykunapi llamk'achiyta atikunki:

  1. $ ( '#miTab huk[href="#perfil"]' ). tab ( 'rikuchiy' ); // Sutiman hina tablata akllay
  2. $ ( '#miTab a:primero' ). tab ( 'rikuchiy' ); // Ñawpaq kaq tablata akllay
  3. $ ( '#miTab a:qhipa' ). tab ( 'rikuchiy' ); // Qhipa kaq tablata akllay
  4. $ ( '#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.

  1. <ul clase = "nav nav-tabs" >
  2. <li><a href = "#wasi" data-toggle = "tab" > Wasi </a></li>
  3. <li><a href = "#perfil" data-toggle = "tab" > Willakuy </a></li>
  4. <li><a href = "#willakuykuna" data-toggle = "tab" > Willakuykuna </a></li>
  5. <li><a href = "#ajustes" data-toggle = "tab" > Ajustes </a></li>
  6. </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.

  1. <ul clase = "nav nav-tabs" id = "miTab" >
  2. <li clase = "activo" ><a href = "#wasi" > Wasi </a></li>
  3. <li><a href = "#perfil" > Willakuy </a></li>
  4. <li><a href = "#willakuykuna" > Willakuykuna </a></li>
  5. <li><a href = "#ajustes" > Ajustes </a></li>
  6. </ul>
  7.  
  8. <div clase = "pistaña-contenido" >
  9. <div clase = "tab-pane activo" id = "wasi" > ... </div>
  10. <div clase = "tab-pane" id = "perfil" > ... </div>
  11. <div clase = "tab-pane" id = "willakuykuna" > ... </div>
  12. <div clase = "tab-pane" id = "ajustes" > ... </div>
  13. </div> nisqa
  14.  
  15. <qillqa>
  16. $ ( ruway () { .
  17. $ ( '#miTab a:qhipa' ). tab ( 'rikuchiy' );
  18. }) nisqa.
  19. </script> nisqa

Eventos nisqakuna

Ruwana Willay
qawachiy Kay ruwayqa tabla rikuchiypi ninawan, ichaqa manaraq musuq tabla rikuchisqa kachkaptin. Utilizar event.targety event.relatedTargetpara target a la pestaña activa y la pestaña activo anterior (si está disponible) respectivamente.
rikuchisqa Kay ruwayqa tabla rikuchiypi ninawan huk tabla rikuchisqa kaptin. Utilizar event.targety event.relatedTargetpara target a la pestaña activa y la pestaña activo anterior (si está disponible) respectivamente.
  1. $ ( 'a[datos-toggle="tab"]' ). on ( 'rikuchishka' , rurana ( e ) {
  2. e . target // llamk'achisqa tabla
  3. e . relatedTarget // ñawpaq kaq tabla
  4. }) 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.

Archivota hurquy

Ejemplo de uso de Tooltips

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

Pantalón apretado siguiente nivel keffiyeh probablemente no has escuchado de ellos. Foto cabina barba crudo denim tipografía vegano mensajero bolsa stumptown. Haciendamanta mesakama seitan, mcsweeneypa fixie sostenible quinoa 8-bit americano pachayuqmi huk terry richardson vinilo chambray. Barba tocón, cardigans banh mi lomo trueno misikuna. Tofu biodiésel williamsburg marfa, tawa loko mcsweeney's pichay vegano chambray. Huk chiqap irónico artesano imapas keytar , scenester chakra-manta-mesa banksy Austin twitter manejo freegan cred crudo denim huk-origen café viral.


Bootstrap-tooltip.js nisqawan yanapachikuspa

Javascript nisqawan yanapakuypa yuyaychayninta llamk'achiy:

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

Akllanakuna

Suti niraq ñawpaqchasqa willay
animación boolean nisqa chiqaq huk css fade tikrayta yanapakuypa yanapakuyninman churay
churay watiqa|ruray 'hanaq' imaynatataq yanapakuypa yuyaychayninta churana - pata | urayninpi | lluq'i | paña
akllaq qaytu pantasqa Sichus huk akllana qusqa, yanapakuypa yanapakuynin imakuna kamachisqa metakunaman qusqa kanqa.
suti q'aytu | ruway '' . ñawpaqmanta churasqa titulu chani sichus `title` etiqueta mana kanchu
piñachiy qaytu 'hover' nisqa. imaynatataq llamkanakuna llamk'achisqa - hover | enfoque | makiwan
unayay yupay | ima 0.

tardiy rikuchiy chaymanta pakay yanapakuypa yuyaychayninta (ms) - mana makiwan llamkana layapaqchu ruwakun

Sichus huk yupay qusqa, tardiy iskaynin pakay/rikuchiypi churasqa

Imakunap rurasqanqa kaymi:delay: { show: 500, hide: 100 }

¡Umakuna wichayman! Sapanchasqa yanapakuykunapaq akllanakuna hukmanta willaypa layakuna llamk'achiyninwan willayta atikunku.

Markup

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

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

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

.tooltip('pakakuy')

Huk elementopa yanapakuypa yuyaychayninta pakan.

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

.tooltip('t'ikray')

Huk elementopa yanapakuypa yuyaychaynintam tikran.

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

Popovers nisqamanta

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

* Tooltip nisqa churasqa kananta munan

Archivota hurquy

Ejemplo hover popover nisqa

Chay botón hawapi makiwan churay popover nisqa qallarinanpaq.


Bootstrap-popover.js nisqawan yanapachikuspa

Javascript nisqawan popovers nisqakunata atichiy:

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

Akllanakuna

Suti niraq ñawpaqchasqa willay
animación boolean nisqa chiqaq huk css fade tikrayta yanapakuypa yanapakuyninman churay
churay watiqa|ruray 'paña' imaynatataq popoverta churana - pata | urayninpi | lluq'i | paña
akllaq qaytu pantasqa sichus huk akllaq qusqa, yanapakuypa yanapakuynin imakuna kamachisqa metakunaman qusqa kanqa
piñachiy qaytu 'hover' nisqa. imaynatataq llamkanakuna llamk'achisqa - hover | enfoque | makiwan
suti q'aytu | ruway '' . ñawpaqmanta churasqa titulu chani sichus `title` laya mana kanchu
winay q'aytu | ruway '' . ñawpaqmanta churasqa kaqpa chanin sichus `data-content` laya mana kanchu
unayay yupay | ima 0.

tardanza rikuchiy chaymanta pakay popover (ms) - mana manual gatillo layapaqchu ruwakun

Sichus huk yupay qusqa, tardiy iskaynin pakay/rikuchiypi churasqa

Imakunap rurasqanqa kaymi:delay: { show: 500, hide: 100 }

¡Umakuna wichayman! Sapa popovers kaqpaq akllanakuna hukniraymanta willayta atributokuna llamk'achiyninwan riqsichikunman.

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.

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

.popover('pakakuy')

Pakakun huk elementokuna popover.

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

.popover('t'ikray')

Huk elementokuna popover nisqatam tikran.

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

Alertakunamanta

Willakuy plugin huk uchuy clase kan qaylla ruwanakuna willaykunaman yapanapaq.

Uraykachiy

Ejemplo de alertas

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

Santo guacamole! Best check yo self, mana ancha allintachu qhawarikunki.

¡Ay snap! ¡Huk pantayta chaskirqanki!

Kayta chayta tikray hinaspa hukmanta kallpanchakuy. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit nisqa. Cras mattis consectetur purus tiyay amet fermentum.

Kay ruwayta ruway Otaq kayta ruway


Bootstrap-alert.js nisqawan yanapachikuspa

Huk willayta javascript kaqnintakama qarquyta atichiy:

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

Markup

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

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

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

Eventos nisqakuna

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

Ruwana Willay
wichqay Kay ruwayqa chaylla rawrarin mayk'aq closeinstancia método waqyasqa.
wisq’asqa Kay ruwayqa llamk'achisqa kachkan mayk'aq willay wichq'asqa kachkan (css tikraykunata tukunanta suyanqa).
  1. $ ( '#mi-alerta' ). bind ( 'wichqasqa' , ruway () {
  2. // imatapas ruway...
  3. }) nisqa.

Sobre

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

Archivota hurquy

Ejemplos de usos

Estadokunapaq chaymanta tikraykunapaq botones plugin kaqwan llamk'achiy.

Estadoyuq
Huklla toggle
Caja de verificación
Radio

Bootstrap-button.js nisqawan yanapachikuspa

Javascript nisqawan ñit'inakunata atichiy:

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

Markup

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

  1. <!-- Huk ñit'inapi tikrayta llamk'achinapaq data-toggle="button" yapay -->
  2. <button class = "btn" data-toggle = "button" > Huklla tikray </button>
  3.  
  4. <!-- data-toggle="buttons-checkbox" nisqa yapay, btn-group nisqapi --> nisqapi qhawana estilo tikraypaq
  5. <div clase = "btn-huñu" willay-t'ikray = "botonkuna-qhaway qutu" >
  6. <button class = "btn" > Lluq'i </button>
  7. <button class = "btn" > Chawpi </button>
  8. <button class = "btn" > Paña </button>
  9. </div> nisqa
  10.  
  11. <!-- yapay data-toggle="buttons-radio" radio estilo tikraypaq btn-grupo kaqpi -->
  12. <div clase = "btn-huñu" willay-t'ikray = "botonkuna-radio" >
  13. <button class = "btn" > Lluq'i </button>
  14. <button class = "btn" > Chawpi </button>
  15. <button class = "btn" > Paña </button>
  16. </div> nisqa

Métodos

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

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

¡Umakuna wichayman! Huk ñit'inamanta auto toggling nisqa atichiyta atinki, data-toggleatributo nisqawan.
  1. <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.

  1. <button class = "btn" data-loading-text = "imakunatapas kargachkanki..." > ... </button>
¡Umakuna wichayman! Firefox mana llamk'achisqa estadota tukuy p'anqa kargakunapi takyachin . Kaypaq huk allichayqa llamk'achiymi autocomplete="off".

$().button('kutichiy') .

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

$().botón(cadena) .

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

  1. <button class = "btn" willay-hunt'asqa-qillqa = "tukusqa!" > ... </boton> nisqa
  2. <qillqa>
  3. $ ( '.btn' nisqa ). botón ( 'hunt'asqa' ) .
  4. </script> nisqa

Sobre

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

Archivota hurquy

* Transiciones nisqa plugin nisqa churasqa kananta munan.

Ejemplo de acordeón

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

Anim pariatur cliché reprehenderit, enim eiusmod alto vida acusamus terry richardson ad calamar. 3 lobo killa officia aute, mana cupidatat patineta dolor brunch. Mikhuy apaykachana quinoa nesciunt laborum eiusmod. Brunch 3 lobo killa tempor, sunt aliqua churan huk pisquta chayman calamar huk-origen café nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, artesanía cerveza llamk'ay wes anderson cred nesciunt sapiente ea proident. Anuncio vegano excepteur carnicero vice lomo. Polainas occaecat artesanía cerveza granja-a-mesa, crudo denim estético synth nesciunt ichapas mana uyarirqankichu paykunamanta accusamus labore sostenible VHS.
Anim pariatur cliché reprehenderit, enim eiusmod alto vida acusamus terry richardson ad calamar. 3 lobo killa officia aute, mana cupidatat patineta dolor brunch. Mikhuy apaykachana quinoa nesciunt laborum eiusmod. Brunch 3 lobo killa tempor, sunt aliqua churan huk pisquta chayman calamar huk-origen café nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, artesanía cerveza llamk'ay wes anderson cred nesciunt sapiente ea proident. Anuncio vegano excepteur carnicero vice lomo. Polainas occaecat artesanía cerveza granja-a-mesa, crudo denim estético synth nesciunt ichapas mana uyarirqankichu paykunamanta accusamus labore sostenible VHS.
Anim pariatur cliché reprehenderit, enim eiusmod alto vida acusamus terry richardson ad calamar. 3 lobo killa officia aute, mana cupidatat patineta dolor brunch. Mikhuy apaykachana quinoa nesciunt laborum eiusmod. Brunch 3 lobo killa tempor, sunt aliqua churan huk pisquta chayman calamar huk-origen café nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, artesanía cerveza llamk'ay wes anderson cred nesciunt sapiente ea proident. Anuncio vegano excepteur carnicero vice lomo. Polainas occaecat artesanía cerveza granja-a-mesa, crudo denim estético synth nesciunt ichapas mana uyarirqankichu paykunamanta accusamus labore sostenible VHS.

Bootstrap-collapse.js nisqawan yanapachikuspa

Javascript nisqawan atichiy:

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

Akllanakuna

Suti niraq ñawpaqchasqa willay
tayta mama akllaq pantasqa Sichus akllaq chaymanta llapa t'inkisqa elementokuna nisqa tayta mama ukhupi wichq'asqa kanqa mayk'aq kay t'uqyakuq elemento rikuchisqa. (ñawpamanta pacha acordeón nisqap puriyninman rikch'akuq)
toggle nisqa boolean nisqa chiqaq Invocacionpi colapsible elementota tikran

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.

  1. <botón clase = "btn btn-peligro" dato-toggle = "collapse" datos-target = "#demo" >
  2. simple plegable
  3. </boton> nisqa
  4.  
  5. <div id = "demo" clase = "uchuy" > ... </div>
¡Umakuna wichayman! Acordeón hina huñu kamachiyta huk llalliq kamachiyman yapanaykipaq, willay laya yapay data-parent="#selector". Kayta ruwaypi qhawanaykipaq demo nisqapi qhaway.

Métodos

.collapse(akllanakuna) .

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

  1. $ ( '#ÑoqaqT'inkisqa' ). urmachiy ({
  2. toggle : llulla
  3. }) 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.

Ruwana Willay
qawachiy Kay ruwayqa chaylla rawrarin mayk'aq showinstancia método waqyasqa.
rikuchisqa Kay ruwayqa huk urmachiy elemento ruwaqman rikukuq ruwasqa kaptin llamk'achisqa (css tikraykunata tukunanta suyanqa).
pakay Kay ruwayqa chaylla llamk'achisqa kachkan mayk'aqchus hidemétodo waqyasqa kachkan.
pakasqa Kay ruwayqa llamk'achiqmanta huk urmachiy elemento pakasqa kaptin llamk'achisqa (css tikraykunata tukunanta suyanqa).
  1. $ ( '#ÑoqaqT'inkisqa' ). on ( 'pakasqa' , ruway () {
  2. // imatapas ruway...
  3. }) nisqa.

Sobre

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

Archivota hurquy

Qatina

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


Bootstrap-typeahead.js nisqawan yanapachikuspa

Javascript nisqawan typeahead nisqaman waqyay:

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

Akllanakuna

Suti niraq ñawpaqchasqa willay
qallariy matriz [ ] . Contra tapunapaq willakuypa pukyun.
imakuna yupay 8. Chay max yupay imakuna rikuchinapaq urayk'aqpi.
tupachiq ruway mayúsculas insensibles nisqa Huk tapuy huk imayaywan tupanchu icha manachu chayta yachanapaq llamk'achisqa ñan. Huklla argumentota chaskin, chaypa itemcontranpi tapuyta pruebananpaq. Kunan tapukuyman yaykuy this.query. Huk booleanta kutichiy truesichus tapuy tupan.
t'aqaq ruway chiqan tupachiy,
mayúsculas sensibles, mayúsculas
sin sensibles
Método utilizado para ordenar resultados autocompletos. Huklla argumentota itemschaskin chaymanta typeahead instanciapa alcanceyuq. Kunan tapuyta this.query.
resaltador nisqa ruway llapa ñawpaqmanta tupachisqakunata resaltan Método utilizado para resaltar resultados autocompletos. Huklla argumentota itemchaskin chaymanta typeahead instanciapa alcanceyuq. html nisqatam kutichinan.

Markup

Huk elementota typeahead ruwanawan qillqanapaq willay layakunata yapay.

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

Métodos

.typeahead(akllanakuna) .

Huk yaykusqata huk typeahead nisqawan qallarichin.