Umntu ngamnye okanye uqokelelwe

Ukuba ukhuphele uguqulelo lwamva nje lweBootstrap, zombini i- bootstrap.js kunye ne- bootstrap.min.js ziqulathe zonke iiplagi ezidweliswe kweli phepha.

Iimpawu zedatha

Ungasebenzisa zonke iiplagi ze-Bootstrap ngaphandle kwe-API yokuphawula ngaphandle kokubhala umgca omnye weJavaScript. Le yi-API yeklasi yokuqala ye-Bootstrap kwaye kufuneka ibe yingqwalasela yakho yokuqala xa usebenzisa iplagi.

Oko kwathiwa, kwezinye iimeko kunokunqweneleka ukucima lo msebenzi. Ngoko ke, sikwabonelela ngokukwazi ukuvala uphawu loyelelwano lwedatha i-API ngokukhulula zonke iziganeko kumzimba wegama elifakwe `'idatha-api'`. Oku kukhangeleka ngolu hlobo:

$ ( 'umzimba' ). cima ( '.data-api' )

Kungenjalo, ukujolisa iplagin ethile, faka nje igama leeplagi njengendawo yegama kunye ne-data-api namespace efana nale:

$ ( 'umzimba' ). cima ( '.alert.data-api' )

Programmatic API

Sikwakholelwa ukuba kufuneka ukwazi ukusebenzisa zonke iiplagi zeBootstrap ngeJavaScript API. Zonke ii-API zikawonke-wonke zinye, iindlela ezibolekwayo, kwaye zibuyisela ingqokelela eyenziwayo.

$ ( ".btn.danger" ). iqhosha ( "toggle" ). addClass ( "amafutha" )

Zonke iindlela kufuneka zamkele into ekhethiweyo yeenketho, umtya ojolise kwindlela ethile, okanye akukho nto (eqalisa iplagin ngokuziphatha okungagqibekanga):

$ ( "#myModal" ). imodal () // iqaliswe ngokumiselweyo                       
$ ( "#myModal" ). imodal ({ ikhibhodi : bubuxoki }) // iqaliswe ngaphandle kwebhodi yezitshixo     
$ ( "#myModal" ). imodali ( 'bonisa' ) // iqalisa kwaye ibhengeza ibonise ngoko nangoko                

Iplagi nganye efakiweyo iphinda iveze umakhi wayo ekrwada kwipropati `yoMakhi`: $.fn.popover.Constructor. Ukuba ungathanda ukufumana umzekelo othile weplagi, yifumane ngokuthe ngqo kwinto: $('[rel=popover]').data('popover').

Iziganeko

I-Bootstrap ibonelela ngeziganeko zesiko kwizinto ezininzi ezizodwa ze-plugin. Ngokubanzi, ezi ziza ngendlela engapheliyo kunye neyexesha elidlulileyo - apho i-infinitive (umz. show) iqaliswa ekuqaleni kwesiganeko, kwaye iyimo yexesha elidlulileyo ye-participle form (umz. shown) iqala ekugqityweni kwesenzo.

Zonke iziganeko ezingapheliyo zibonelela ngokusebenza kokuthintelaMiselweyo. Oku kunika amandla okumisa ukuphunyezwa kwesenzo phambi kokuba siqale.

$ ( '#myModal' ). kwi ( 'bonisa' , umsebenzi ( e ) {   
    ukuba (! data ) buyisela e . preventDefault () // iyamisa imodal ekubonisweni   
})

Malunga neenguqu

Ngeziphumo ezilula zotshintsho, quka i-bootstrap-transition.js kanye ecaleni kwezinye iifayile ze-JS. Ukuba usebenzisa i-comiled (okanye minified) bootstrap.js, akukho mfuneko yokuquka oku—sele kukho.

Sebenzisa iimeko

Imizekelo embalwa ye-plugin yotshintsho:

• Ukutyibilika okanye ukuncipha kwiimodyuli
• Ukucima iithebhu
• Ukucima izilumkiso
• Iipaneli zecarousel ezityibilikayo

Imizekelo

Iimodyuli zilungelelanisiwe, kodwa zibhetyebhetye, iingxoxo zencoko yababini ezinobuncinci obufunekayo obufunekayo kunye nokungagqibekanga okuhlakaniphile.

Umzekelo omileyo

Imodali enikezelweyo enesihloko, umzimba, kunye neseti yezenzo kumbhalo osemazantsi.

<div iklasi = "i-modal hide fade" > 
  <div class = "modal-header" > 
    < uhlobo lweqhosha = "iqhosha" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </ iqhosha>    
    <h3> imodal header </h3>
  </ div>
  <div class = "modal-body" > 
    <p> Umzimba omnye olungileyo… </p>
  </ div>
  <div class = "modal-footer" > 
    <a href = "#" iklasi = "btn"> Vala </a> _  
    <a href = "#" class = "btn btn-primary"> Gcina utshintsho </a>  
  </ div>
</ div>

Idemo ephilayo

Guqula imodal usebenzisa iJavaScript ngokucofa iqhosha elingezantsi. Iza kutyibilika ezantsi kwaye iphele ukusuka phezulu ephepheni.

<-- Iqhosha lokucupha imodal -->
<a href = "#myModal" role = "iqhosha" iklasi = "btn" data-toggle = "modal"> Qalisa indlela yedemo </a>    
 
<-- Imodeli -->
<div class = "modal" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria- hidden = "true" >      
  <div class = "modal-header" > 
    < uhlobo lweqhosha = "iqhosha" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </ iqhosha>    
    <h3 id = "myModalLabel" > Intloko yeModal </h3> 
  </ div>
  <div class = "modal-body" > 
    <p> Umzimba omnye olungileyo… </p>
  </ div>
  <div class = "modal-footer" > 
    < iklasi yeqhosha = "btn" data-dismiss = "modal" aria-hidden = "true" > Vala </ iqhosha>   
    < iklasi yeqhosha = "btn btn-primary" > Gcina utshintsho </ iqhosha> 
  </ div>
</ div>

Ukusetyenziswa

Ngeempawu zedatha

Vula imodali ngaphandle kokubhala iJavaScript. Cwangcisa data-toggle="modal"isiqalelo somlawuli, njengeqhosha, kunye ne data-target="#foo"okanye href="#foo"ukujolisa kwindlela ethile yokuguqula.

< uhlobo lweqhosha = "iqhosha" data-toggle = "modal" data-target = "#myModal" > Yandulula indlela </iqhosha>   

NgeJavaScript

Fowunela i-modal ene-id myModalngomgca omnye weJavaScript:

$ ( '#myModal' ). imodeli ( iinketho )

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-backdrop="".

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

Iindlela

.modal(iinketho)

Yenza umxholo wakho ube yimodali. Yamkela iinketho ozikhethelayo object.

$ ( '#myModal' ). imodeli ({
  keyboard : bubuxoki 
})

.modal('tshintsha')

Yenza imodal ngesandla.

$ ( '#myModal' ). imodali ( 'tshintsha' )

.imodal('umboniso')

Ivula imodali ngesandla.

$ ( '#myModal' ). imodali ( 'bonisa' )

.modal('fihla')

Ufihla imodali ngesandla.

$ ( '#myModal' ). imodali ( 'fihla' )

Iziganeko

Iklasi ye-modal ye-Bootstrap iveza iminyhadala embalwa yokuqhagamshelwa ekusebenzeni kwe-modal.

$ ( '#myModal' ). kwi ( 'ifihliwe' , umsebenzi () {   
  // Yenza into…
})

Imizekelo

Yongeza imenyu eyehlayo kuyo yonke into eneplagi elula, kubandakanya i-navbar, iithebhu, kunye neepilisi.

Ngaphakathi kwenavbar

Ngaphakathi kweethebhu

Ukusetyenziswa

Ngeempawu zedatha

Yongeza data-toggle="dropdown"kwikhonkco okanye iqhosha ukuguqula ukwehla.

<div iklasi = "ukwehla" > 
  <a iklasi = "i-dropdown-toggle" href = "#" > Isiqhumiso sokuwisa </a>  
  <ul class = "dropdown-menu" role = "imenyu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</ div>

Ukugcina ii-URL zicocekile, sebenzisa data-targetuphawu loyelelwano endaweni ye href="#".

<div iklasi = "ukwehla" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "iqhosha" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Lahla phantsi
    <b iklasi = "inkathalo" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "imenyu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</ div>

NgeJavaScript

Fowunela ukwehla ngeJavaScript:

$ ( '.ukuhla-ukuguqula' ). ukwehla ()

Iinketho

Akukho nanye

Iindlela

$().ukwehla()

I-api ecwangcisiweyo yokuvula iimenu zebar ye navbar enikiweyo okanye ukukhangela kwe tab.

Umzekelo kwi-navbar

I-plugin yeScrollSpy yeyokuhlaziya ngokuzenzekelayo iithagethi ze-nav ngokusekelwe kwindawo yokuskrola. Skrolela indawo engezantsi kwe-navbar kwaye ubukele utshintsho lweklasi esebenzayo. Imiba esezantsi yokwehla nayo iya kuphawulwa.

Ukusetyenziswa

Ngeempawu zedatha

Ukongeza ngokulula isimilo sokuskrola kulawulo lwakho lwebar engaphezulu, yongeza data-spy="scroll"nje kwinto ofuna ukuyihlola (ubukhulu becala lo iyakuba ngumzimba) kwaye data-target=".navbar"ukhethe ukuba yeyiphi nav oza kuyisebenzisa. Uya kufuna ukusebenzisa iscrollspy kunye .navnecandelo.

<body data-spy = "scroll" data-target = ".navbar" > ... </ body>  

NgeJavaScript

Fowunela iscrollspy ngeJavaScript:

$ ( '#navbar' ). skrola ()

Iindlela

.skrola('hlaziya')

Xa usebenzisa i-scrollspy ngokudibanisa okanye ukususa izinto kwi-DOM, kuya kufuneka ufowunele indlela yokuhlaziya ngolu hlobo:

$ ( '[data-spy="scroll"]' ). Nganye ( umsebenzi () {  
  var $ hlola = $ ( le ). scrollspy ( 'hlaziya' )
});

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-offset="".

Iziganeko

Iithebhu zemizekelo

Yongeza ngokukhawuleza, ukusebenza kwethebhu eguqukayo kwi-transiton ngokusebenzisa iipaneli zomxholo wasekhaya, nangeemenyu ezihlayo.

Ukusetyenziswa

Yenza iithebhu ezinokubakho ngeJavaScript (ithebhu nganye kufuneka ivulwe ngokwayo):

$ ( '#myTab a' ). cofa ( umsebenzi ( e ) {  
  e . preventDefault ();
  $ ( oku ). ithebhu ( 'bonisa' );
})

Unokwenza ithebhu nganye isebenze ngeendlela ezininzi:

$ ( '#myTab a[href="#profile"]' ). ithebhu ( 'bonisa' ); // Khetha isithuba ngegama 
$ ( '#myTab a:first' ). ithebhu ( 'bonisa' ); // Khetha ithebhu yokuqala 
$ ( '#myTab a:last' ). ithebhu ( 'bonisa' ); // Khetha isithuba sokugqibela 
$ ( '#myTab li:eq(2) a' ). ithebhu ( 'bonisa' ); // Khetha ithebhu yesithathu (0-isalathisi) 

IMarkup

Unokwenza ithebhu okanye ukukhangela iipilisi ngaphandle kokubhala nayiphi na iJavaScript ngokuchaza ngokulula data-toggle="tab"okanye data-toggle="pill"kwinto. Ukongeza i navkunye nav-tabsneeklasi kwithebhu ulkuya kusebenzisa isitayile se-Bootstrap tab.

<ul iklasi = "nav-tabs" > 
  <li><a href = "#ikhaya" data-toggle = "tab"> Ekhaya </a> < /li>  
  <li><a href = "#profile" data-toggle = "tab"> Inkangeleko yesimo </a></li >  
  <li><a href = "# imiyalezo" data-toggle = "tab"> Imiyalezo </a> < /li>  
  <li><a href = "#settings" data-toggle = "tab"> Useto </a> </li>  
</ul>

Iindlela

$().tab

Yenza isiqalelo sethebhu kunye nesiqulatho sisebenze. Isithuba kufuneka sibenendawo data-targetokanye indawo hrefyesikhongozeli kwiDOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li iklasi = "esebenzayo" > <a href = "#ikhaya"> Ekhaya </a></li>  
  <li><a href = "#profile"> Inkangeleko yesimo </a></li> 
  <li><a href = "#imiyalezo"> Imiyalezo </a> </li> 
  <li><a href = "#iisetingi"> Useto </a> </li> 
</ul>
 
<div class = "ithebhu-umxholo" > 
  <div class = "i-tab-pane esebenzayo" id = "ekhaya" > ... </div>  
  <div class = "i-tab-pane" id = "iprofayile" > ... </div>  
  <div class = "i-tab-pane" id = "imiyalezo" > ... </div>  
  <div class = "i-tab-pane" id = "iisetingi" > ... </div>  
</ div>
 
<script>
  $ ( umsebenzi () {  
    $ ( '#myTab a:last' ). ithebhu ( 'bonisa' );
  })
</script>

Iziganeko

$ ( 'a[data-toggle="tab"]' ). kwi ( 'ibonisiwe' , umsebenzi ( e ) {   
  e . ekujoliswe kuko // ithebhu evuliwe
  e . relatedTarget // ithebhu yangaphambili
})

Imizekelo

Iphefumlelwe yi-plugin egqwesileyo ye-jQuery.tipsy ebhalwe nguJason Frame; Iingcebiso zesixhobo luguqulelo oluhlaziyiweyo, olungathembekanga kwimifanekiso, sebenzisa i-CSS3 yoopopayi, kunye neempawu zedatha zogcino lwesihloko sendawo.

Hambisa ngaphezulu kwezi linki zingezantsi ukuze ubone iingcebiso zesixhobo:

Iindlela ezine

Ukusetyenziswa

Qalisa ingcebiso yesixhobo ngeJavaScript:

$ ( '#example' ). incam yesixhobo ( iinketho )

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-animation="".

IMarkup

Ngezizathu zokusebenza, iSixhobo kunye nePopover data-apis zingenile.

<a href = "#" rel = "isihloko sesixhobo" = "ingcebiso yesixhobo sokuqala"> hambisa phezu kwam </a>   

Iindlela

$().ingcebiso yesixhobo(iinketho)

Iqhoboshela isibambi sesixhobo kwingqokelela yesiqalelo.

.ingcebiso yesixhobo('bonisa')

Ityhila inqaku lesixhobo.

$ ( '#isiqalelo' ). incam yesixhobo ( 'bonisa' )

.ingcebiso yesixhobo('fihla')

Ifihla incam yesixhobo.

$ ( '#isiqalelo' ). incam yesixhobo ( 'fihla' )

.ingcebiso yesixhobo('tshintsha')

Itshintshela incam yesixhobo.

$ ( '#isiqalelo' ). incam yesixhobo ( 'toggle' )

.ingcebiso yesixhobo('yonakalisa')

Ifihla kwaye itshabalalise isixhobo sesixhobo.

$ ( '#isiqalelo' ). incam yesixhobo ( 'yonakalisa' )

Imizekelo

Yongeza imixholo emincinci, njengaleyo ikwi-iPad, kuyo nayiphi na into yolwazi lwesibini lwezindlu. Hambisa ngaphezulu kweqhosha ukuqalisa ipopover. Ifuna iTip yesixhobo ukuba ibandakanywe.

Ipopover engatshintshiyo

Zine iinketho ezikhoyo: phezulu, ekunene, ezantsi, nasekhohlo zilungelelanisiwe.

Akukho phawu lubonakalisiweyo njengepopovers uveliswa kwiJavaScript kunye nomxholo ngaphakathi datakophawu.

Idemo ephilayo

Ukusetyenziswa

Vumela iipopovers ngeJavaScript:

$ ( '#example' ). popover ( iinketho )

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-animation="".

IMarkup

Ngezizathu zokusebenza, iSixhobo kunye nePopover data-apis zingenile.

Iindlela

$().popover(iinketho)

Uqalisa iipopovers zengqokelela yezinto.

.popover('bonisa')

Ityhila i-elementi popover.

$ ( '#isiqalelo' ). popover ( 'bonisa' )

.popover('fihla')

Ifihla i-elements popover.

$ ( '#isiqalelo' ). popover ( 'fihla' )

.popover('tshintsha')

Itshintshela izinto popover.

$ ( '#isiqalelo' ). ipopover ( 'tshintsha' )

.popover('yonakalisa')

Ifihla kwaye itshabalalise i-element's popover.

$ ( '#isiqalelo' ). ipopover ( 'yonakalisa' )

Imizekelo yezilumkiso

Yongeza umsebenzi wokugxotha kuyo yonke imiyalezo yokwazisa ngale plugin.

Ukusetyenziswa

Vula ukugxothwa kwesivuseleli ngeJavaScript:

$ ( ".alert" ). lumkisa ()

IMarkup

Yongeza data-dismiss="alert"nje kwiqhosha lakho lokuvala ukunika ngokuzenzekelayo umsebenzi okufutshane wesilumkiso.

<a class = "close" data-dismiss = "alert" href = "#" > &amaxesha; </a>   

Iindlela

$().isilumkiso()

Isonga zonke izilumkiso ngokusebenza ngokusondeleyo. Ukuze izilumkiso zakho ziphile xa zivaliwe, qiniseka ukuba zine .fadekwaye .inudidi sele lufakiwe kuzo.

.isilumkiso('vala')

Ivala isilumkiso.

$ ( ".alert" ). lumkisa ( 'vala' )

Iziganeko

Iklasi yesilumkiso ye-Bootstrap iveza iminyhadala embalwa yokuqhagamshelwa ekusebenzeni kwesilumkiso.

$ ( '#isilumkiso sam' ). bopha ( 'ivaliwe' , umsebenzi () {   
  // Yenza into…
})

Umzekelo wokusetyenziswa

Yenza ngakumbi ngamaqhosha. Iqhosha lokulawula lixela okanye wenze amaqela amaqhosha amalungu amaninzi njengebar yesixhobo.

Inyanisile

Yongeza idata-loading-text="Iyalayisha..." ukusebenzisa imeko yokulayisha kwiqhosha.

< uhlobo lweqhosha = "iqhosha" class = "btn btn-primary" data-loading-text = "Iyalayisha..." > Ilayisha imeko </iqhosha>   

Uguqulelo olunye

Yongeza i-data-toggle = "iqhosha" ukuvula ukuguqula kwiqhosha elinye.

< uhlobo lweqhosha = "iqhosha" class = "btn" data-toggle = "iqhosha" > Uguqulo olunye </ iqhosha>   

Ibhokisi yokujonga

Yongeza i-data-toggle="amaqhosha-checkbox" ukwenzela isimbo sokukhangela kwi-btn-iqela.

<div class = "btn-group" data-toggle = "amaqhosha-checkbox" >  
  < uhlobo lweqhosha = "iqhosha" iklasi = "btn" > Ekhohlo </ iqhosha>  
  < uhlobo lweqhosha = "iqhosha" iklasi = "btn" > Embindini </ iqhosha>  
  < uhlobo lweqhosha = "iqhosha" iklasi = "btn" > Ekunene </ iqhosha>  
</ div>

Unomathotholo

Yongeza idatha-toggle="amaqhosha-erediyo" kwisimbo sikanomathotholo ukuguqulela kwi-btn-iqela.

<div class = "btn-group" data-toggle = "amaqhosha-radio" >  
  < uhlobo lweqhosha = "iqhosha" iklasi = "btn" > Ekhohlo </ iqhosha>  
  < uhlobo lweqhosha = "iqhosha" iklasi = "btn" > Embindini </ iqhosha>  
  < uhlobo lweqhosha = "iqhosha" iklasi = "btn" > Ekunene </ iqhosha>  
</ div>

Ukusetyenziswa

Vula amaqhosha ngeJavaScript:

$ ( '.nav-tabs' ). iqhosha ()

IMarkup

Iimpawu zedatha zibalulekile kwiplagi yeqhosha. Jonga umzekelo wekhowudi engezantsi kwiindidi ezahlukeneyo zokuphawula.

Iinketho

Akukho nanye

Iindlela

$().iqhosha('tshintsha')

Itshintsha imeko yokutyhala. Inika iqhosha inkangeleko yokuba livuliwe.

< uhlobo lweqhosha = "iqhosha" class = "btn" data-toggle = "iqhosha" > … </iqhosha>    

$().iqhosha('iyalayisha')

Icwangcisa imeko yeqhosha kulayisho - licima iqhosha kwaye utshintshise okubhaliweyo kukulayisha okubhaliweyo. Ukulayisha okubhaliweyo kufuneka kuchazwe kwiqhosha kusetyenziswa uphawu loyelelwano lwedatha data-loading-text.

< uhlobo lweqhosha = "iqhosha" class = "btn" data-loading-text = "ukulayisha izinto..." > ... </iqhosha>    

$().iqhosha('seta ngokutsha')

Seta ngokutsha imo yeqhosha-tshintshanisa okubhaliweyo kumbhalo wokuqala.

$().iqhosha(umtya)

Seta ngokutsha imo yeqhosha-tshintshanisa okubhaliweyo kuyo nayiphi na idatha echazwe kwimeko yokubhaliweyo.

< uhlobo lweqhosha = "iqhosha" class = "btn" data-complete-text = "kugqityiwe!" > ... </ iqhosha>    
<script>
  $ ( '.btn' ). iqhosha ( 'gqiba' )
</script>

Malunga

Fumana izitayile ezisisiseko kunye nenkxaso ebhetyebhetye kumacandelo aqengqelekayo anje ngeaccordion kunye nokuhamba.

* Ifuna iplagin yeTransitions ukuba ibandakanywe.

Umzekelo iaccordion

Sisebenzisa iplagin yokuwa, sakhe iwijethi yesitayile esilula se-accordion:

< uhlobo lweqhosha = "iqhosha" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  elula eqengqelekayo
</ iqhosha>
 
<div id = "demo" class = "colla in" > … </div>  

Ukusetyenziswa

Ngeempawu zedatha

Yongeza nje data-toggle="collapse"kunye ne- data-targetelementi ukunika ngokuzenzekelayo ulawulo lwento eqengqelekayo. Uphawu data-targetloyelelwano lwamkela umkhethi we-css ukuze kufakwe ukutshitshiswa. Qinisekisa ukuba wongeza iklasi collapsekwinto eqengqelekayo. Ukuba ungathanda ukuba ivuleke ngokungagqibekanga, yongeza udidi olongezelelweyo in.

Ukongeza ulawulo lweqela olufana ne-accordion kulawulo oluqengqelekayo, yongeza uphawu loyelelwano lwedatha data-parent="#selector". Jonga kwidemo ukuze ubone oku kusebenza.

NgeJavaScript

Vula ngesandla nge:

$ ( ".collapse" ). Ukuwa ()

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-parent="".

Iindlela

.cotha(iinketho)

Yenza umxholo wakho ube yinto eqengqelekayo. Yamkela iinketho ozikhethelayo object.

$ ( '#myCollapsible' ). ukuwa ({
  guqula : bubuxoki 
})

.thoba('tshintsha')

Iguqulela into eqengqelekayo ukuze iboniswe okanye ifihliwe.

.cotha('bonisa')

Ibonisa into eqengqelekayo.

.coqa('fihla')

Ifihla into eqengqelekayo.

Iziganeko

Iklasi yokuwa yeBootstrap iveza iminyhadala embalwa yokuhuka ekusebenzeni kokuwa.

$ ( '#myCollapsible' ). kwi ( 'ifihliwe' , umsebenzi () {   
  // Yenza into…
})

Umzekelo carousel

Lo mboniso wesilayidi ungezantsi ubonisa iplagi yegeneric kunye necandelo lokukhwela ibhayisekile kwizinto ezifana necarousel.

Ileyibhile ye-Thumbnail yokuqala

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

Ileyibhile yeThumbnail yesibini

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

Ileyibhile yeThumbnail yesithathu

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

‹ ›

<div id = "myCarousel" iklasi = "icarousel isilayidi" >  
  <!-- Izinto zeCarousel -->
  <div iklasi = "i-carousel-yangaphakathi" > 
    <div class = "into esebenzayo" > ... </div> 
    <div class = "into" > ... </div> 
    <div class = "into" > ... </div> 
  </ div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev"> &lsaquo ; </a>   
  <a class = "right carousel-control" href = "#myCarousel" data-slide = "elandelayo" > › </a>   
</ div>

Ukusetyenziswa

Ngeempawu zedatha

...

NgeJavaScript

Fowunela i-carousel ngesandla nge:

$ ( '.carousel' ). Icarousel ()

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-interval="".

Iindlela

.carousel(iinketho)

Uqalisa i-carousel ngeendlela ozikhethelayo objectkwaye uqalise ukukhwela ibhayisekile kwizinto.

$ ( '.carousel' ). icarousel ({
  Ikhefu : 2000 
})

.carousel('umjikelo')

Ujikeleza izinto zecarousel ukusuka ekhohlo ukuya ekunene.

.carousel('nqumama')

Imisa ikhareshi ekukhweleni ibhayisekile kwizinto.

.carousel(inombolo)

Ukujikelisa i-carousel kwisakhelo esithile (i-0 esekelwe, efana noluhlu).

.carousel('prev')

Imijikelo ukuya kwinto yangaphambili.

.carousel('elandelayo')

Biyela ukuya kwinto elandelayo.

Iziganeko

Iklasi ye-carousel ye-Bootstrap iveza iminyhadala emibini yokuhuka ekusebenzeni kwecarousel.

Umzekelo

I-plugin esisiseko, eyandisiweyo ngokulula yokwenza ngokukhawuleza iintloko zokuchwetheza ezintle ngalo naluphi na uhlobo lokufakwa kombhalo.

<input type = "text" data-provide = "typeahead" >  

Ukusetyenziswa

Ngeempawu zedatha

Yongeza iimpawu zedatha ukubhalisa into enomsebenzi wokuchwetheza njengoko kubonisiwe kumzekelo ongasentla.

NgeJavaScript

Fowunela i-typeahead ngesandla nge:

$ ( '.typeahead' ). umphambili wokuchwetheza ()

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-source="".

Iindlela

.chwetheza ngaphambili(iinketho)

Uqalisa igalelo nge-typeahead.

Umzekelo

Ukuhanjiswa ngasekhohlo yidemo ephilayo ye-affix plugin.

Ukusetyenziswa

Ngeempawu zedatha

Ukongeza ngokulula i-affix isimilo kuyo nayiphi na into, yongeza data-spy="affix"nje kwinto ofuna ukuyihlola. Emva koko sebenzisa ii-offsets ukuchaza ixesha lokutshintshela ukuphina into kwaye uyivale.

<div data-spy = "affix" data-offset-top = "200" > ... </ body>  

NgeJavaScript

Fowunela i-affix plugin usebenzisa iJavaScript:

$ ( '#navbar' ). ncamathela ()

Iindlela

.ncamathela('hlaziya')

Xa usebenzisa i-affix ngokubambisana nokongeza okanye ukususa izinto kwi-DOM, uya kufuna ukufowunela indlela yokuhlaziya:

$ ( '[data-spy="affix"]' ). Nganye ( umsebenzi () {  
  $ ( oku ). ncamathelisa ( 'hlaziya' )
});

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-offset-top="200".