JavaScript nisqa

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

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:

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

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

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

  1. $ ( ".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):

  1. $ ( "#modalniy" ). modal () // ñawpaqmanta churasqakunawan qallarisqa
  2. $ ( "#modalniy" ). modal ({ teclado : false }) // mana tecladoyuq qallarisqa
  3. $ ( "#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.

  1. var bootstrapButton = $ nisqa. fn nisqa. nisqa boton . noConflict () // kutichiy $.fn.button ñawpaq churasqa chaniman
  2. $ 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.

  1. $ ( '#modalniy' ). on ( 'rikuchiy' , ruway ( e ) {
  2. sichus (! datos ) kutichiy e . preventDefault () // modal rikuchisqa kananpaq sayachin
  3. }) 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.

  1. <div class = "modal pakay chinkachiy" >
  2. <div clase = "modal-umalliq" >
  3. <botón laya = "botón" clase = "wichqay" data-dismiss = "modal" aria-pakasqa = "chiqap" > × </boton> nisqa
  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" > Wichqay </a>
  11. <a href = "#" class = "btn btn-primary" > Hukchasqakunata waqaychay </a>
  12. </div> nisqa
  13. </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.

  1. <!-- Botón para disparo modal -->
  2. <a href = "#myModal" ruway = "botón" clase = "btn" data-toggle = "modal" > Demo modalta qallariy </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" clase = "modal pakay chinkachiy" tabindex = "-1" ruway = "rimanakuy" aria-labelledby = "myModalLabel" aria-pakasqa = "chiqap" >
  6. <div clase = "modal-umalliq" >
  7. <button type = "button" class = "wichqay" data-dismiss = "modal" aria-pakasqa = "chiqap" > × </button>
  8. <h3 id = "myModalLabel" > Modal umalliq </h3>
  9. </div> nisqa
  10. <div clase = "cuerpo-modal" >
  11. <p> Huk sumaq cuerpo... </p>
  12. </div> nisqa
  13. <div clase = "modal-chaki" >
  14. <button class = "btn" data- dismiss = "modal" aria-pakasqa = "chiqap" > Wichqay </button>
  15. <button class = "btn btn-primary" > Hukchasqakunata waqaychay </button>
  16. </div> nisqa
  17. </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.

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

JavaScript nisqawan

Huk modal id myModalkaqwan huk sapalla chiru JavaScript kaqwan waqyay:

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

Akllanakuna

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

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.
karu ñan pantasqa

loadSichus huk karu url qusqa, contenido jQuery kaqpa método kaqnintakama kargakunqa chaymanta .modal-body. Sichus willay api llamk'achkanki, hukniraymanta hrefetiquetata llamk'achiy atikunki karu pukyuta willanaykipaq. Kaymanta huk rikch'anachiymi kay urapi rikuchikun:

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

  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.

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.

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


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 .

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

JavaScript nisqawan

JavaScript nisqawan chay scrollspy nisqaman waqyay:

  1. $ ( '#navbar' ). scrollspy () nisqa.
¡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

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

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.

Ejemplo de tablas

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

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.


Uso

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

  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.

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:

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.

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:

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

Akllanakuna

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

Suti niraq ñawpaqchasqa willay
animación boolean nisqa chiqaq huk css fade tikrayta yanapakuypa yanapakuyninman churay
html nisqapi boolean nisqa pantasqa html nisqa yanapakuypa yanapakuyninman churay. Sichus llulla, jquerypa textmétodon llamk'achisqa kanqa dom kaqman contenidota churanapaq. Qillqata llamk'achiy sichus XSS ataquekunamanta llakisqa kanki.
churay q'aytu | ruway '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 enfoque' nisqa. imaynatataq yanapakuypa yuyaychaynin qallarikun - | ñit'iy hover | enfoque | makiwan. Reparay qan caso pasay gatillo mutliple, espacio t'aqasqa, gatillo layakuna.
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 }

contenedor q'aytu | pantasqa pantasqa

Huk elemento específico nisqaman yanapakuypa yuyaychayninta yapancontainer: 'body'

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

Markup

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

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

.tooltip('ch'usaqyachiy')

Huk elementopa yanapakuypa yuyaychayninta pakaspa chinkachin.

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

Popover pata

Sed posuere consectetur est en lobortis nisqa. Enean eu leo ​​quam. Pellentesco ornare sem lacinia quam venenatis vestibulo nisqa.

Popover derecho

Sed posuere consectetur est en lobortis nisqa. Enean eu leo ​​quam. Pellentesco ornare sem lacinia quam venenatis vestibulo nisqa.

Popover urapi

Sed posuere consectetur est en lobortis nisqa. Enean eu leo ​​quam. Pellentesco ornare sem lacinia quam venenatis vestibulo nisqa.

Popoverqa ripurqan

Sed posuere consectetur est en lobortis nisqa. Enean eu leo ​​quam. Pellentesco ornare sem lacinia quam venenatis vestibulo nisqa.

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:

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

Akllanakuna

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

Suti niraq ñawpaqchasqa willay
animación boolean nisqa chiqaq huk css fade tikrayta yanapakuypa yanapakuyninman churay
html nisqapi boolean nisqa pantasqa Popover nisqaman html nisqa churay. Sichus llulla, jquerypa textmétodon llamk'achisqa kanqa dom kaqman contenidota churanapaq. Qillqata llamk'achiy sichus XSS ataquekunamanta llakisqa kanki.
churay q'aytu | ruway '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 'click' nisqa. imayna popover qallarikun - ñit'iy | 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 }

contenedor q'aytu | pantasqa pantasqa

Popover nisqataqa huk elemento específico nisqamanmi yapancontainer: 'body'

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

.popover('ch'usaqyachiy')

Huk elementopa popover nisqa kayninta pakaspa chinkachin.

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

Ejemplo de alertas

Kay plugin kaqwan llapa willay willaykunaman qarquy ruwayta yapay.

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


Uso

JavaScript kaqnintakama huk willayta 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.

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 .

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

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

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

Radio

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

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

Uso

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.

Akllanakuna

Mana mayqinpas

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

  1. <button type = "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. <botón tipo = "botón" clase = "btn" datos-completo-texto = "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.

* 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.
  1. <div clase = "acordeón" id = "acordeón2" >
  2. <div clase = "acordeón-huñu" >
  3. <div clase = "acordeón- umalliq" >
  4. <a class = "acordeón-toggle" data-toggle = "t'uqyachiy" willay-tayta = "#acordeón2" href = "#huklla urmachiy" >
  5. Collapsible Grupo Artículo #1
  6. </a>
  7. </div> nisqa
  8. <div id = "collapseOne" class = "acordeón-cuerpo urmachiypi" >
  9. <div clase = "acordeón-ukhu" >
  10. Anim pariatur cliché...
  11. </div> nisqa
  12. </div> nisqa
  13. </div> nisqa
  14. <div clase = "acordeón-huñu" >
  15. <div clase = "acordeón- umalliq" >
  16. <a class = "acordeón-toggle" data-toggle = "collapse" data-parent = "#acordeón2" href = "#Iskay urmachiy" >
  17. Artículo de Grupo Plegable #2
  18. </a>
  19. </div> nisqa
  20. <div id = "Iskay urmachiy" class = "acordeón-kurku urmachiy" >
  21. <div clase = "acordeón-ukhu" >
  22. Anim pariatur cliché...
  23. </div> nisqa
  24. </div> nisqa
  25. </div> nisqa
  26. </div> nisqa
  27. ...

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

  1. <botón laya = "botón" clase = "btn btn-peligro" data-toggle = "collapse" datos-target = "#demo" >
  2. simple plegable
  3. </boton> nisqa
  4.  
  5. <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:

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

Akllanakuna

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

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

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.

Qatina

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

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

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

Akllanakuna

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

Suti niraq ñawpaqchasqa willay
qallariy matriz, ruway [ ] . Contra tapunapaq willakuypa pukyun. Ichapas huk matriz de cadenas utaq huk llamkana. Ruwayqa iskay argumentokunatam pasachin, queryyaykuna pampapi chanin chaymanta processkutichiy waqyay. Ruwayqa sincronicamente llamk'achiy atikunman willay pukyuta chiqalla utaq mana sincronamente kutichispa processkutichiy waqyaypa sapalla argumenton kaqnintakama.
imakuna yupay 8. Chay max yupay imakuna rikuchinapaq urayk'aqpi.
minLargo yupay 1. Aswan pisi qillqa sayay necesitakun manaraq autocompletar yuyaychaykunata qallarichkaspa
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.
musuqyachiq ruway akllasqa kaqta kutichin Akllasqa kaqta kutichinapaq método. Huklla argumentota chaskikun, itemchaymanta chaymanta typeahead instanciapa alcanceyuq.
resaltador nisqa ruway llapa ñawpaqmanta tupachisqakunata resaltan Método utilizado para resaltar resultados autocompletos. Huklla argumentota itemchaskin chaymanta typeahead instanciapa alcanceyuq. html nisqatam kutichinan.

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.

  1. <div data-spy = "affix" datos-offset-pata = "200" > ... </div>
¡Umakuna wichayman! Huk pinchasqa elementopa kayninta chaymanta chaylla tayta-mamanpa ruwayninta kamachinayki tiyan. Posición nisqataqa affix, affix-top, nisqawanmi kamachinku affix-bottom. Yuyariy huk tayta mama urmasqa kaqta qhawayta mayk'aq affix kicks in imaynachus contenidota normal flujo kaqmanta p'anqamanta hurquchkan.

JavaScript nisqawan

JavaScript nisqawan affix plugin nisqaman waqyay:

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

Akllanakuna

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

Suti niraq ñawpaqchasqa willay
offset nisqa yupay | ruway | ima 10. 10 Pixels pantallamanta desplazanapaq mayk'aq yupaypi posición de desplazamiento. Huk yupaylla qusqa kaptinqa, offset nisqa iskaynin hanaqpi, lluq'ipipas churakunqa. Huk ñanta uyarinaykipaq, icha achka sapalla offsetkunata uyarinaykipaq, huk imayayllata quy offset: { x: 10 }. Huk ruwayta llamk'achiy mayk'aq huk offset dinamicamente quyta munanki (wakin kutichiq diseñokunapaq allin).