Javascript para iti Bootstrap

Iyeg ti biag dagiti paset ti Bootstrap—ita nga addaan iti 12 a kostumbre a plugin ti jQuery .

Dagiti Modal

Ti naurnos, ngem nalaka a maibagay, a mangala ti tradisional a javascript a modal a plugin nga addaan laeng ti kabassitan a kasapulan a panagusar ken dagiti nasirib a default.

Dagiti dropdown

Inayon dagiti dropdown menu iti dandani aniaman iti Bootstrap babaen iti daytoy simple a plugin. Ti Bootstrap ket mangitampok ti naan-anay a suporta ti dropdown menu iti navbar, tabs, ken pildoras.

Scrollspy nga

Usaren ti scrollspy tapno automatiko nga i-update dagiti silpo iti navbar-mo tapno maipakita ti agdama nga aktibo a silpo a naibatay iti posision ti panag-scroll.

Dagiti tab a mai-toggle

Usaren daytoy a plugin tapno ad-adda a makatulong dagiti tab ken pildoras babaen ti panangipalubos kadakuada nga ag-toggle babaen kadagiti tabbable a pane ti lokal a linaon.

Dagiti tip ti remienta

Maysa a baro a panangala iti plugin ti jQuery Tipsy, dagiti Tooltips ket saan nga agpannuray kadagiti ladawan—agus-usarda iti CSS3 para kadagiti animasion ken dagiti data-attribute para iti lokal a pagipempenan ti paulo.

Dagiti Popovers * .

Inayon dagiti babassit nga overlay ti linaon, kas kadagidiay adda iti iPad, iti aniaman nga elemento para iti panagbalay iti segundario nga impormasion.

* Kasapulan a mairaman dagiti Tooltips

Dagiti mensahe nga alerto

Ti plugin ti alerto ket maysa a bassit a klase para iti pananginayon ti asideg a panagusar kadagiti alerto.

Dagiti Buton

Aramiden ti ad-adu pay babaen kadagiti buton. Ibaga ti buton ti kontrol wenno mangpartuat kadagiti grupo dagiti buton para kadagiti ad-adu a paset a kas dagiti toolbar.

Marpuog

Mangala kadagiti batayan nga estilo ken nalaka a maibagay a suporta para kadagiti mai-collapsible a paset a kas dagiti akordeon ken nabigasion.

Karrusel nga

Mangaramid ti merry-go-round ti ania man a linaon a kayatmo a mangipaay ti interaktibo a slideshow ti linaon.

I-typeahead

Maysa a batayan, nalaka a mapalawa a plugin para iti napardas a panagpartuat kadagiti elegante a typeahead nga addaan iti ania man a panagserrek ti teksto ti porma.

Dagiti Panagbalbaliw * .

Para kadagiti simple nga epekto ti panagbalbaliw, iraman ti bootstrap-transition.js a maminsan tapno ag-slide kadagiti modal wenno agkupas dagiti alerto.

* Masapul para iti animasion kadagiti plugin

Ulo nga agpangato! Amin a plugin ti javascript ket kasapulan ti kaudian a bersion ti jQuery.

Maipapan kadagiti modal

Ti naurnos, ngem nalaka a maibagay, a mangala ti tradisional a javascript a modal a plugin nga addaan laeng ti kabassitan a kasapulan a panagusar ken dagiti nasirib a default.

I-download ti file

Estatiko nga ehemplo

Iti baba ket ti estatiko a naiparang a modal.

Agbiag nga demo

I-toggle ti modal babaen ti javascript babaen ti panangi-klik iti buton iti baba. Ag-slide dayta nga agpababa ken agkupas manipud iti ngato ti panid.

Irugi ti demo modal

Babaen ti panangusar iti bootstrap-modal

Awagan ti modal babaen ti javascript:

  1. $ ( '# ti Modalko' ). modal ( dagiti pagpilian ) .

Dagiti Pagpilian

Nagan tipo default panangiladawan
backdrop ti likud boolean nga agpayso Iramanna ti modal-backdrop nga elemento. Saan laeng a dayta, ikeddeng staticpara iti backdrop a saan a mangiserra ti modal iti panagpidut.
teklado nga boolean nga agpayso Serraan ti modal no maipidut ti escape key
ipakita boolean nga agpayso Ipakita ti modal no mairugi.

Panagmarka

Mabalinmo nga aktiboen dagiti modal iti panidmo a nalaka a saan a kasapulan nga agsuratka iti maymaysa a linia ti javascript. Itakderan laeng data-toggle="modal"iti maysa nga elemento ti kontrolador nga addaan iti data-target="#foo"wenno href="#foo"a katupag ti modal nga elemento nga id, ken no mai-klik, daytoy ket mangirugi ti modalmo.

Kasta met, tapno manginayon kadagiti pagpilian iti modal a pagariganmo, iraman laeng dagitoy a kas dagiti kanayonan a kababalin ti datos iti urayno ti elemento ti panagtengngel wenno ti modal a panagmarka a mismo.

  1. <a klase = "btn" data-toggle = "modal" href = "#myModal" > Irugi ti Modal </a>
  1. <div klase = "modal nga ilemmeng" id = "myModal" >
  2. <div klase = "modal-nga-ulo" >
  3. < kita ti buton = "buton" klase = "serraan" data-dismiss = "modal" > × </buton>
  4. <h3> Modal nga ulo </h3>
  5. </div>
  6. <div klase = "modal-a-bagi" >
  7. <p> Maysa a napino a bagi... </p>
  8. </div>
  9. <div klase = "modal-a-saka" >
  10. <a href = "#" klase = "btn" data-dismiss = "modal" > Serraan </a>
  11. <a href = "#" class = "btn btn-primary" > Idulin dagiti panagbalbaliw </a>
  12. </div>
  13. </div>
Ulo nga agpangato! No kayatmo a ti modalmo ket ag-animate iti uneg ken ruar, manginayon laeng ti maysa a .fadeklase iti .modalelemento (kitaen ti demo tapno makita daytoy nga agtigtignay) ken iraman ti bootstrap-transition.js.

Dagiti Pamay-an

.modal(dagiti pagpilian) .

Aktiboenna ti linaonmo kas modal. Awaten ti maysa nga opsional a pagpilian object.

  1. $ ( '# ti Modalko' ). modal nga ({
  2. teklado : palso nga
  3. }) nga

.modal ('agbalbaliw') .

Manual nga i-toggle ti maysa a modal.

  1. $ ( '# ti Modalko' ). modal ( 'agbaliwbaliw' ) .

.modal('ipakita') .

Manual a luktan ti maysa a modal.

  1. $ ( '# ti Modalko' ). modal ( 'ipakita' ) .

.modal('ilemmeng') .

Manual nga ilemmeng ti maysa a modal.

  1. $ ( '# ti Modalko' ). modal ( 'ilemmeng' ) .

Dagiti Pasamak

Ti modal a klase ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti modal a panagusar.

Pasamak Panangiladawan
ipakita Daytoy a pasamak ket agputok a dagus no ti showpamay-an ti pagarigan ket maawagan.
naipakita Daytoy a pasamak ket mapaputok no ti modal ket naaramiden a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti css a makompleto).
aglemmeng Daytoy a pasamak ket dagus a mapaputok no ti hidepamay-an ti pagarigan ket naawagan.
naidulin Daytoy a pasamak ket mapaputok no ti modal ket nalpas a nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti css a makompleto).
  1. $ ( '# ti Modalko' ). on ( 'nalimed' , trabaho () {
  2. // aramiden ti maysa a banag...
  3. }) nga

Ti plugin ti ScrollSpy ket para iti automatiko a panangpabaro kadagiti puntiria ti nav a naibatay iti posision ti panag-scroll.

I-download ti file

Pagarigan ti navbar nga addaan iti scrollspy

I-scroll ti lugar iti baba ken buyaem ti update ti nabigasion. Mai-highlight met dagiti dropdown sub items. Padasem dayta!

@nalukmeg

Ad leggings keytar, brunch id arte partido dolor labore. Pitchfork yr enim lo-fi sakbay nga nailako da qui. Tumblr farm-to-table bisikleta karbengan aniaman. Anim keffiyeh ni carles nga cardigan. Velit seitan cabina ti retrato ni mcsweeney 3 lobo bulan irure. Cosby suéter lomo jean shorts, williamsburg hoodie minim qui nalabit saanmo a nangngeg dagitoy et cardigan pondo ti panagtalek culpa biodiesel wes anderson estetika. Nihil tattoo nga accusamus, cred ironia biodiesel keffiyeh artisano ullamco consequat.

@mdo nga

Veniam marfa bigote nga skateboard, adipisicing fugiat velit pitchfork barbas. Freegan barbas aliqua cupidatat nga vero ni mcsweeney. Cupidatat uppat a loko nisi, ea helvetica nulla carles. Tattooed cosby suéter trak ti taraon, mcsweeney ni mcsweeney nga quis non freegan vinyl. Lo-fi wes anderson +1 nga sartorial. Carles saan nga estetiko nga ehersisio quis gentrify. Brooklyn adipisicing craft nga serbesa bise keytar deserunt.

maysa

Occaecat nga komodo nga aliqua delectus. Fap craft serbesa deserunt nga skateboard ea. Lomo bisikleta karbengan adipisicing banh mi, velit ea sunt sumaruno a lebel locavore maymaysa ti nagtaudanna a kape iti magna veniam. Nangato nga biag id vinyl, echo parke consequat quis aliquip banh mi tinidor. Vero VHS nga adipisicing. Consectetur nisi DIY minim nga bag ti mensahero. Cred ex iti, natalged a delectus consectetur fanny pack iphone.

dua

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 mensahero bag marfa aniaman delectus trak ti taraon. Sapiente nga sinte nga id nga assumenda. Locavore sed helvetica cliche irony, thundercats nalabit saanmo a nangngeg kadakuada consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat sakbay a nailakoda, terry richardson proident brunch nesciunt quis cosby suéter pariatur keffiyeh ut helvetica artisano. Cardigan nga craft nga serbesa seitan nga nakasagana velit. VHS chambray laboris nga apagbiit nga veniam. Anim mollit minim commodo ullamco nga mga pusa nga gurruod.


Usar ti bootstrap-scrollspy.js

Awagan ti scrollspy babaen ti javascript:

  1. $ ( '#navbar' ). scrollspy nga () .

Panagmarka

Tapno nalaka a mainayon ti scrollspy a kababalin iti nabigasionmo iti topbar, inayonmo data-spy="scroll"laeng ti elemento a kayatmo nga espia (kaaduan a gagangay a daytoy koma ti bagi).

  1. <bagi data-espia = "ag-scroll" > ... </bagi>
Ulo nga agpangato! Dagiti silpo ti Navbar ket masapul nga addaan kadagiti masolbar nga id a puntiria. Kas pagarigan, <a href="#home">home</a>masapul a katupag ti maysa a banag iti dom a kas iti <div id="home"></div>.

Dagiti Pamay-an

.scrollspy ('agpabaro') .

No agus-usar ti scrollspy a maikuyog ti pananginayon wenno panangikkat kadagiti elemento manipud iti DOM, kasapulam nga awagan ti pamay-an ti panagpabaro a kas iti kasta:

  1. $ ( '[datos-espia="ag-scroll"]' ). tunggal ( function () { .
  2. var $ espia = $ ( daytoy ). scrollspy ( 'pabaro' ) .
  3. });

Dagiti Pagpilian

Nagan tipo default panangiladawan
offset nga bilang 10 nga Pixels nga offset manipud iti ngato no kalkularen ti posision ti scroll.

Dagiti Pasamak

Pasamak Panangiladawan
aktiboen Daytoy a pasamak ket agputok tunggal ti baro a banag ket agbalin nga aktibo babaen ti scrollspy.

Daytoy a plugin ket manginayon ti napardas, dinamiko a panagandar ti tab ken pildoras para iti panagbalbaliw babaen ti lokal a linaon.

I-download ti file

Pagarigan dagiti tab

I-click dagiti tab iti baba tapno ag-toggle iti nagbaetan dagiti nailemmeng a pane, uray babaen kadagiti dropdown menu.

Raw denim dimo la ketdi nangngeg ida jean shorts Austin. Nesciunt tofu stumptown aliqua, retro nga sintet nga maestro nga pagdalus. Bigote cliche tempor, williamsburg carles nga vegan nga helvetica. Reprehenderit ti agkarkarnero retro keffiyeh ti mangtiliw ti tagtagainep synth. Cosby suéter eu banh mi, qui irure terry richardson dati nga pusit. Aliquip lugarat salvia cillum nga iphone. Seitan aliquip quis cardigan nga amerikano nga kawes, karnisero 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.


Usar ti bootstrap-tab.js

Pagbalinen dagiti tabbable a tab babaen ti javascript (tunggal tab ket kasapulan a mapaaktibo a saggaysa):

  1. $ ( '# ti Tab ko a' ). i-click ti ( funsion ( e ) { .
  2. e . lapdan tiDefault ();
  3. $ ( daytoy ). tab ( 'ipakita' );
  4. }) nga

Mabalinmo nga aktiboen dagiti indibidual a tab iti sumagmamano a wagas:

  1. $ ( '# ti Tabko a[href="#profile"]' ). tab ( 'ipakita' ); // Pilien ti tab babaen ti nagan
  2. $ ( '# ti Tab ko a:umuna' ). tab ( 'ipakita' ); // Pilien ti umuna a tab
  3. $ ( '# ti Tab ko a: maudi' ). tab ( 'ipakita' ); // Pilien ti maudi a tab
  4. $ ( '# ti Tab ko li: eq (2) a' ). tab ( 'ipakita' ); // Pilien ti maikatlo a tab (0-indexed) .

Panagmarka

Mabalinmo nga aktiboen ti tab wenno pildoras a nabigasion a dika agsurat iti aniaman a javascript babaen ti basta panangidatag data-toggle="tab"wenno data-toggle="pill"iti maysa nga elemento. Ti pananginayon ti navken nav-tabsdagiti klase iti tab ulket mangyaplikar ti estilo ti tab ti bootstrap.

  1. <ul klase = "nav nav-tabs" >
  2. <li><a href = "#pagtaengan" data-toggle = "tab" > Pagtaengan </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Pakasaritaan </a></li>
  4. <li><a href = "#mensahe" data-toggle = "tab" > Dagiti mensahe </a></li>
  5. <li><a href = "#dagiti panagitunos" data-toggle = "tab" > Dagiti panagitunos </a></li>
  6. </ul>

Dagiti Pamay-an

$().tab nga

Paaktiboenna ti elemento ti tab ken container ti linaon. Ti tab ket rumbeng nga addaan iti maysa data-targetwenno maysa a hrefmangpuntiria iti maysa a container node iti DOM.

  1. <ul klase = "nav nav-tabs" id = "tabko" >
  2. <li klase = "aktibo" ><a href = "#pagtaengan" > Pagtaengan </a></li>
  3. <li><a href = "#profile" > Pakasaritaan </a></li>
  4. <li><a href = "#mensahe" > Dagiti mensahe </a></li>
  5. <li><a href = "#dagiti panagitunos" > Dagiti panagitunos </a></li>
  6. </ul>
  7.  
  8. <div klase = "linaon-tab" >
  9. <div klase = "aktibo ti tab-pane" id = "pagtaengan" > ... </div>
  10. <div klase = "tab-pane" id = "profile" > ... </div>
  11. <div klase = "tab-pane" id = "dagiti mensahe" > ... </div>
  12. <div klase = "tab-pane" id = "dagiti panagitunos" > ... </div>
  13. </div>
  14.  
  15. <iskrip>
  16. $ ( trabaho () { .
  17. $ ( '# ti Tab ko a: maudi' ). tab ( 'ipakita' );
  18. }) nga
  19. </script>

Dagiti Pasamak

Pasamak Panangiladawan
ipakita Daytoy a pasamak ket agpuor iti tab show, ngem sakbay a naipakita ti baro a tab. Usaren ti event.targetken event.relatedTargettapno puntiriaen ti aktibo a tab ken ti napalabas nga aktibo a tab (no adda) a nagsasaruno.
naipakita Daytoy a pasamak ket agpuor iti tab show kalpasan a naipakita ti maysa a tab. Usaren ti event.targetken event.relatedTargettapno puntiriaen ti aktibo a tab ken ti napalabas nga aktibo a tab (no adda) a nagsasaruno.
  1. $ ( 'a [datos-a-panagbalbaliw = "tab"]' ). on ( 'naipakita' , trabaho ( e ) {
  2. e . target // na-activate nga tab
  3. e . mainaig a Target // napalabas a tab
  4. }) nga

Maipapan kadagiti Tooltips

Napaltiingan babaen ti nagsayaat a jQuery.tipsy plugin nga insurat ni Jason Frame; Dagiti tip ti ramit ket maysa a napabaro a bersion, a saan nga agpannuray kadagiti ladawan, agus-usar ti css3 para kadagiti animasion, ken dagiti data-attribute para iti lokal a pagipempenan ti paulo.

I-download ti file

Pagarigan ti panagusar ti Tooltips

I-hover dagiti link iti baba tapno makita dagiti toltips:

Tight pants next level keffiyeh dimo la ketdi nangngeg. Photo booth barbas hilaw nga denim nga letterpress vegan nga mensahero nga bag stumptown. Talon-agingga-lamisaan seitan, mcsweeney's fixie sustainable quinoa 8-bit american a kawes addaan iti terry richardson vinyl chambray. Barbas stumptown, cardigans banh mi lomo dagiti gurruod a pusa. Tofu biodiesel williamsburg marfa, uppat a loko mcsweeney ti dalusan ti vegan a chambray. A talaga nga ironic nga artisano aniaman ti keytar , scenester talon-agingga-iti-lamisaan banksy Austin twitter handle freegan cred hilaw denim maymaysa-origin a kape viral.


Usar ti bootstrap-tooltip.js

I-trigger ti tooltip babaen ti javascript:

  1. $ ( '#pagarigan' ). tooltip ( dagiti pagpilian ) .

Dagiti Pagpilian

Nagan tipo default panangiladawan
animasion nga boolean nga agpayso iyaplikar ti css fade a panagbalbaliw iti tooltip
pannakaikabil kuerdas|panagaramid 'ngato' no kasano nga iposision ti tooltip - ngato | baba | kanigid | kusto
agpili nga kuerdas saan nga agpayso No ti maysa a mangpili ket naited, dagiti banag ti tooltip ket maitedto kadagiti naikeddeng a puntiria.
titulo kuerdas nga | amad '' . default a pateg ti paulo no awan ti etiketa ti `title`
kalbiten kuerdas 'ag-hover'. no kasano a mai-trigger ti tooltip - hover | pokus | giya
itantan numero | banag 0 nga

delay ti panangiparang ken panangilemmeng ti tooltip (ms) - saan nga agaplikar iti manual a kita ti trigger

No naited ti numero, maipakat ti delay agpadpada iti hide/show

Ti estruktura ti banag ket:delay: { show: 500, hide: 100 }

Ulo nga agpangato! Dagiti pagpilian para kadagiti indibidual a toltip ket mabalin a alternatibo a maikeddeng babaen ti panagusar kadagiti kababalin ti datos.

Panagmarka

Para kadagiti rason ti panagaramid, ti Tooltip ken Popover data-apis ket ag-opt in. No kayatmo nga usaren dagitoy ket mangibaga laeng ti maysa a pagpilian ti agpili.

  1. <a href = "#" rel = "tip ti ramit" title = "umuna a tip ti ramit" > ag-hover iti rabawko </a>

Dagiti Pamay-an

$ (). tip ti ramit (dagiti pagpilian) .

Ikapet ti tooltip handler iti maysa a koleksion ti elemento.

.tooltip ('ipakita') .

Ipalgakna ti tooltip ti maysa nga elemento.

  1. $ ( '#elemento' ). tooltip ( 'ipakita' ) .

.tooltip ('ilemmeng') .

Ilemmeng ti tooltip ti maysa nga elemento.

  1. $ ( '#elemento' ). tip ti ramit ( 'ilemmeng' ) .

.tooltip ('agbalbaliw') .

I-toggle ti tooltip ti maysa nga elemento.

  1. $ ( '#elemento' ). tip ti ramit ( 'agbaliwbaliw' ) .

Maipapan kadagiti popovers

Inayon dagiti babassit nga overlay ti linaon, kas kadagidiay adda iti iPad, iti aniaman nga elemento para iti panagbalay iti segundario nga impormasion.

* Kasapulan a mairaman ti Tooltip

I-download ti file

Pagarigan ti hover popover

I-hover ti buton tapno mai-trigger ti popover.


Usar ti bootstrap-popover.js

Pagbalinen dagiti popover babaen ti javascript:

  1. $ ( '#pagarigan' ). popover ( dagiti pagpilian ) .

Dagiti Pagpilian

Nagan tipo default panangiladawan
animasion nga boolean nga agpayso iyaplikar ti css fade a panagbalbaliw iti tooltip
pannakaikabil kuerdas|panagaramid 'kusto' kasano nga iposision ti popover - top | baba | kanigid | kusto
agpili nga kuerdas saan nga agpayso no ti maysa a mangpili ket naited, dagiti banag ti tooltip ket maitalek kadagiti naikeddeng a puntiria
kalbiten kuerdas 'ag-hover'. no kasano a mai-trigger ti tooltip - hover | pokus | giya
titulo kuerdas nga | amad '' . ti kasisigud a pateg ti paulo no ti kabileg ti `titulo` ket awan
linaon kuerdas nga | amad '' . ti kasisigud a pateg ti linaon no ti `data-content` a kababalin ket awan
itantan numero | banag 0 nga

delay ti panangiparang ken panangilemmeng ti popover (ms) - saan nga agaplikar iti manual a kita ti trigger

No naited ti numero, maipakat ti delay agpadpada iti hide/show

Ti estruktura ti banag ket:delay: { show: 500, hide: 100 }

Ulo nga agpangato! Dagiti pagpilian para kadagiti indibidual a popover ket mabalin nga alternatibo a maikeddeng babaen ti panagusar kadagiti kababalin ti datos.

Panagmarka

Para kadagiti rason ti panagaramid, ti Tooltip ken Popover data-apis ket ag-opt in. No kayatmo nga usaren dagitoy ket mangibaga laeng ti maysa a pagpilian ti agpili.

Dagiti Pamay-an

$ ().popover (dagiti pagpilian) .

Mangrugi kadagiti popovers para iti maysa a koleksion ti elemento.

.popover('ipakita') .

Ipalgakna ti maysa nga elemento popover.

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

.popover('ilemmeng') .

Ilemmeng ti maysa nga elemento popover.

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

.popover ('agbaliwbaliw') .

Toggles ti maysa nga elemento popover.

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

Maipapan kadagiti alerto

Ti plugin ti alerto ket maysa a bassit a klase para iti pananginayon ti asideg a panagusar kadagiti alerto.

I-download

Pagarigan dagiti alerto

Ti plugin dagiti alerto ket agtrabaho kadagiti regular a mensahe ti alerto, ken dagiti mensahe ti bloke.

Nasantuan a guacamole! Best check yo self, saan ka nga nasayaat unay ti langam.

Oh snap! Naalamon ti biddut!

Baliwam daytoy ken dayta ken padasem manen. Duis mollis, est non commodo luctus, nisi erat nga porttitor ligula, eget lacinia odio sem nec elit. Ti cras mattis consectetur purus ket agtugaw iti amet fermentum.

Aramidenyo daytoy nga aramid Wenno aramiden daytoy


Babaen ti panangusar iti bootstrap-alert.js

Pagbalinen ti pannakaikkat ti maysa nga alerto babaen ti javascript:

  1. $ ( ".alerto" ). alerto () .

Panagmarka

Inayon data-dismiss="alert"laeng iti close button-mo tapno automatiko a mangted iti alerto close functionality.

  1. <a klase = "serraan" data-dismiss = "alerto" href = "#" > × </a>

Dagiti Pamay-an

$ ().alerto () .

Balkotenna amin nga alerto nga addaan iti asideg a panagandar. Tapno dagiti alertom ket ag-animate out no naserraan, siguraduem nga addaanda iti .fadeken .inklase a dati a naipakat kadakuada.

.alert('serraan') .

Serraan ti maysa nga alerto.

  1. $ ( ".alerto" ). alerto ( 'serraan' ) .

Dagiti Pasamak

Ti klase ti alerto ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti panagusar ti alerto.

Pasamak Panangiladawan
iserra Daytoy a pasamak ket agputok a dagus no ti closepamay-an ti pagarigan ket maawagan.
naserraan Daytoy a pasamak ket mapaputok no ti alerto ket naiserra (urayenna dagiti panagbalbaliw ti css a makompleto).
  1. $ ( '#ti-alertok' ). bind ( 'naserraan' , trabaho () {
  2. // aramiden ti maysa a banag...
  3. }) nga

Maipapan

Aramiden ti ad-adu pay babaen kadagiti buton. Ibaga ti buton ti kontrol wenno mangpartuat kadagiti grupo dagiti buton para kadagiti ad-adu a paset a kas dagiti toolbar.

I-download ti file

Pagarigan nga usaren

Usaren ti plugin dagiti buton para kadagiti estado ken dagiti panagbalbaliw.

Stateful nga
Maymaysa nga toggle
Kahon ti tsek
Radio nga

Babaen ti panangusar iti bootstrap-button.js

Pagbalinen dagiti buton babaen ti javascript:

  1. $ ( '.nav-tab' ). buton () .

Panagmarka

Dagiti attribute ti datos ket napateg iti plugin ti buton. Kitaen ti pagarigan a kodigo iti baba para kadagiti nadumaduma a kita ti marka.

  1. <!-- Inayon ti data-toggle="button" tapno mapaandar ti panag-toggle iti maymaysa a buton -->
  2. < klase ti buton = "btn" data-toggle = "buton" > Agmaymaysa a Panagbalbaliw </button>
  3.  
  4. <!-- Inayon ti data-toggle="buttons-checkbox" para iti panagbalbaliw ti estilo ti kahon ti tsek iti btn-group -->
  5. <div klase = "btn-grupo" data-toggle = "kahon ti tsek dagiti buton" >
  6. <buton klase = "btn" > Kannigid </button>
  7. <buton klase = "btn" > Tengnga </button>
  8. < klase ti buton = "btn" > Kannawan </button>
  9. </div>
  10.  
  11. <!-- Inayon ti data-toggle="buttons-radio" para iti panagbalbaliw ti estilo ti radio iti btn-group -->
  12. <div klase = "btn-grupo" data-toggle = "dagiti buton-radio" >
  13. <buton klase = "btn" > Kannigid </button>
  14. <buton klase = "btn" > Tengnga </button>
  15. < klase ti buton = "btn" > Kannawan </button>
  16. </div>

Dagiti Pamay-an

$ (). buton ('ag-toggle') .

Toggles ti estado ti iduron. Ikkan ti buton ti langa a na-activate dayta.

Ulo nga agpangato! Mabalinmo nga ipalubos ti auto toggling ti maysa a buton babaen ti panagusar ti data-toggleattribute.
  1. < klase ti buton = "btn" data-toggle = "buton" > ... </buton>

$ (). buton ( 'agkarga') .

Itakderanna ti estado ti buton iti panagkarga - balbaliwanna ti buton ken isukat ti teksto iti panagkarga ti teksto. Ti panagkarga ti teksto ket rumbeng a maipalawag iti elemento ti buton babaen ti panagusar ti kabileg ti datos data-loading-text.

  1. <button class = "btn" data-loading-text = "agkarga kadagiti bambanag..." > ... </button>
Ulo nga agpangato! Ti Firefox ket agtultuloy ti nabaldado a kasasaad iti ballasiw dagiti panagkarga ti panid . Ti maysa a pangliklik iti daytoy ket ti panagusar iti autocomplete="off".

$ (). buton ('i-reset') .

Isubli ti estado ti buton - isukat ti teksto iti orihinal a teksto.

$ ().buton (kuerdas) .

Isubli ti estado ti buton - agsinnukat ti teksto iti ania man a datos a naikeddeng nga estado ti teksto.

  1. <button class = "btn" datos-kompleto-a-teksto = "nalpasen!" > ... </buton> nga
  2. <iskrip>
  3. $ ( '.btn' nga ). buton ( 'kompleto' ) .
  4. </script>

Maipapan

Mangala kadagiti batayan nga estilo ken nalaka a maibagay a suporta para kadagiti mai-collapsible a paset a kas dagiti akordeon ken nabigasion.

I-download ti file

* Kasapulan a mairaman ti Transitions plugin.

Pagarigan ti akordeon

Babaen ti panagusar ti collapse plugin, nangaramidkami ti simple a widget ti estilo ti akordeon:

Anim pariatur cliche reprehenderit, enim eiusmod nangato a biag accusamus terry richardson ad pusit. 3 lobo bulan officia aute, saan nga cupidatat nga skateboard dolor brunch. Trak ti taraon quinoa nesciunt laborum eiusmod. Brunch 3 lobo bulan tempor, sunt aliqua ikabil ti tumatayab iti dayta pusit maymaysa ti nagtaudanna a kape nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft serbesa a panagtrabaho wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur nga kartero bise lomo. Leggings occaecat craft beer talon-agingga-iti-lamisaan, hilaw a denim aesthetic synth nesciunt nalabit saanmo a nangngeg kadakuada accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod nangato a biag accusamus terry richardson ad pusit. 3 lobo bulan officia aute, saan nga cupidatat nga skateboard dolor brunch. Trak ti taraon quinoa nesciunt laborum eiusmod. Brunch 3 lobo bulan tempor, sunt aliqua ikabil ti tumatayab iti dayta pusit maymaysa ti nagtaudanna a kape nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft serbesa a panagtrabaho wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur nga kartero bise lomo. Leggings occaecat craft beer talon-agingga-iti-lamisaan, hilaw a denim aesthetic synth nesciunt nalabit saanmo a nangngeg kadakuada accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod nangato a biag accusamus terry richardson ad pusit. 3 lobo bulan officia aute, saan nga cupidatat nga skateboard dolor brunch. Trak ti taraon quinoa nesciunt laborum eiusmod. Brunch 3 lobo bulan tempor, sunt aliqua ikabil ti tumatayab iti dayta pusit maymaysa ti nagtaudanna a kape nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft serbesa a panagtrabaho wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur nga kartero bise lomo. Leggings occaecat craft beer talon-agingga-iti-lamisaan, hilaw a denim aesthetic synth nesciunt nalabit saanmo a nangngeg kadakuada accusamus labore sustainable VHS.

Usar ti bootstrap-collapse.js

Pagbalinen babaen ti javascript:

  1. $ ( ".ag-collapse" ). agrupsa () .

Dagiti Pagpilian

Nagan tipo default panangiladawan
nagannak agpili nga saan nga agpayso No agpili kalpasanna amin dagiti maibukbok nga elemento iti baba ti naikeddeng a nagannak ket maiserra no daytoy a maibukbok a banag ket maipakita. (kaasping ti tradisional a kababalin ti akordeon) .
ag-toggle nga boolean nga agpayso I-toggles ti collapsible nga elemento iti inbokasion

Panagmarka

Basta add data-toggle="collapse"ken a data-targetto element tapno automatiko a mangituding ti kontrol ti maysa a collapsible nga elemento. Ti data-targetattribute ket umawat ti css selector a pangipakat ti collapse. Siguraduen nga inayon ti klase collapseiti collapsible nga elemento. No kayatmo a default a malukatan, inayon ti kanayonan a klase in.

  1. < klase ti buton = "btn btn-peggad" data-toggle = "panag-collapse" data-puntiria = "#demo" >
  2. simple nga collapsible
  3. </button> nga
  4.  
  5. <div id = "demo" klase = "agtinnag iti" > ... </div>
Ulo nga agpangato! Tapno manginayon ti kasla akordeon a panagituray ti grupo iti maysa a maibukbok a kontrol, inayon ti kabileg ti datos data-parent="#selector". Kitaen ti demo tapno makita daytoy nga agtigtignay.

Dagiti Pamay-an

.collapse(dagiti pagpilian) .

Paaktiboenna ti linaonmo kas maysa a collapsible nga elemento. Awaten ti maysa nga opsional a pagpilian object.

  1. $ ( '# ti Makollap-ko' ). marpuog ({
  2. toggle : palso nga
  3. }) nga

.collapse ('agbalbaliw') .

I-toggles ti collapsible nga elemento iti maipakita wenno mailemmeng.

.collapse ('ipakita') .

Ipakita ti maysa a collapsible nga elemento.

.collapse('ilemmeng') .

Ilemmengna ti maysa a collapsible nga elemento.

Dagiti Pasamak

Ti klase ti panagreggaay ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti panagusar ti panagreggaay.

Pasamak Panangiladawan
ipakita Daytoy a pasamak ket agputok a dagus no ti showpamay-an ti pagarigan ket maawagan.
naipakita Daytoy a pasamak ket mapaputok no ti maysa nga elemento ti panagreggaay ket naaramid a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti css a makompleto).
aglemmeng Daytoy a pasamak ket dagus a mapaputok no ti hidepamay-an ket naawagan.
naidulin Daytoy a pasamak ket mapaputok no ti maysa nga elemento ti panagreggaay ket nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti css a makompleto).
  1. $ ( '# ti Makollap-ko' ). on ( 'nalimed' , trabaho () {
  2. // aramiden ti maysa a banag...
  3. }) nga

Maipapan

Maysa a batayan, nalaka a mapalawa a plugin para iti napardas a panagpartuat kadagiti elegante a typeahead nga addaan iti ania man a panagserrek ti teksto ti porma.

I-download ti file

Pagwadan

Rugian ti ag-type iti tay-ak iti baba tapno maipakita dagiti resulta ti typeahead.


Usar ti bootstrap-typeahead.js

Awagan ti typeahead babaen ti javascript:

  1. $ ( '.ag-typeahead' ). i- typeahead () .

Dagiti Pagpilian

Nagan tipo default panangiladawan
pammataudan array nga [ ] . Ti gubuayan ti datos a pagsaludsodan a maibusor.
dagiti banag bilang 8 nga Ti max a bilang dagiti banag a maiparang iti dropdown.
matcher nga amad di sensitibo iti kaso Ti pamay-an a maus-usar a mangikeddeng no ti maysa a saludsod ket maitunos iti maysa a banag. Awaten ti maymaysa nga argumento, ti itemkontra a pangsubok ti saludsod. Aksesen ti agdama a saludsod babaen ti this.query. Isubli ti boolean trueno ti saludsod ket maysa a panagtunos.
agsort nga amad eksakto a panagtunos,
sensitibo iti dakkel a letra, saan a
sensitibo iti dakkel a letra
Pamay-an a nausar a mangurnos kadagiti autocomplete a resulta. Awaten ti maymaysa nga argumento itemsken addaan ti sakop ti typeahead nga instansia. Reperensiaan ti agdama a saludsod babaen ti this.query.
highlighter nga amad itampokna amin a default a panagtunos Pamay-an a nausar a mangitag-ay kadagiti autocomplete a resulta. Awaten ti maymaysa nga argumento itemken addaan ti sakop ti typeahead nga instansia. Rumbeng nga isublin ti html.

Panagmarka

Inayon dagiti kababalin ti datos tapno mangirehistro ti maysa nga elemento nga addaan iti panagusar ti typeahead.

  1. < tipo ti panagserrek = "teksto" data-provide = "typeahead" >

Dagiti Pamay-an

.typeahead(dagiti pagpilian) .

Mangrugi ti maysa nga input babaen ti typeahead.