Umntu ngamnye okanye uqokelelwe

Iiplagi zingabandakanywa ngokwahlukeneyo (nangona ezinye zifuna ukuxhomekeka), okanye zonke ngaxeshanye. Zombini i- bootstrap.js kunye ne- bootstrap.min.js ziqulathe zonke iiplagi ezifakiweyo kwifayile enye.

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

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

Akukho kungquzulwano

Ngamanye amaxesha kuyimfuneko ukusebenzisa iiplagi ze-Bootstrap kunye nezinye izikhokelo ze-UI. Kwezi meko, ukungqubana kwesithuba segama kunokwenzeka ngamanye amaxesha. Ukuba oku kuyenzeka, .noConflictungafowunela iplagin onqwenela ukubuyisela ixabiso layo.

var bootstrapButton = $ . fn . iqhosha . noConflict () // buyisela i-$.fn.iqhosha kwixabiso ebelibekelwe ngaphambili 
$ . fn . i- bootstrapBtn = iqhosha le- bootstrap             // nika i-$().bootstrapBtn umsebenzi we-bootstrap

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, kunye nemo yaso yexesha elidlulileyo ye-participle form (umz. shown) iqala ekugqityweni kwesenzo.

Zonke iziganeko ezingapheliyo zibonelela ngokusebenza kokuthintelaMiselweyo. Oku kubonelela ukukwazi ukumisa 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 compiled (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 phantsi kwaye iphele ukusuka phezulu ephepheni.

<!-- Iqhosha lokucupha imodal -->
<a href = "#myModal" role = "iqhosha" iklasi = "btn" data-toggle = "modal"> Qalisa indlela yedemo </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" indima = "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 phantse 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 = "dropdown-toggle" data-toggle = "dropdown" 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('tshintsha')

Iprogrammatic api yokuguqula iimenu zebar ye navbar enikiweyo okanye ukukhangela kwe tabbed.

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 eyehlayo 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 eguquguqukayo kwinguqu kwiipaneli 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 = "ikhaya" > ... </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

Ikhuthazwe yeyona plugin igqwesileyo ye-jQuery.tipsy ebhalwe nguJason Frame; Iingcebiso zesixhobo luguqulelo oluhlaziyiweyo, olungathembekanga kwimifanekiso, sebenzisa i-CSS3 yoopopayi, kunye neempawu zedatha zogcino lwesihloko sasekuhlaleni.

Ngezizathu zokusebenza, i-tooltip kunye ne-popover data-apis zingenile, okuthetha ukuba kufuneka uziqalise ngokwakho .

Hambisa ngaphezulu kwezi linki zingezantsi ukuze ubone iingcebiso zesixhobo:

Iindlela ezine

Iingcebiso kumaqela egalelo

Xa usebenzisa iincam zesixhobo kunye neepopovers ngamaqela egalelo leBootstrap, kuya kufuneka usete i container(ebhalwe ngezantsi) ukhetho ukuphepha iziphumo ebezingalindelekanga ezingafunekiyo.

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

<a href = "#" data-toggle = "tooltip" title = "tooltip yokuqala"> 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 lubonisayo njenge popovers uveliswa kwiJavaScript kunye nomxholo ngaphakathi datakophawu.

Idemo ephilayo

Iindlela ezine

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

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

Izaziso zemizekelo

Yongeza umsebenzi wokugxotha kuyo yonke imiyalezo yesivuseleli 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.

.alert('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 data-loading-text="Loading..."ukusebenzisa imeko yokulayisha kwiqhosha.

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

Uguqulelo olunye

Yongeza data-toggle="button"ukuze uvule iqhosha elinye.

< uhlobo lweqhosha = "iqhosha" class = "btn btn-primary" data-toggle = "iqhosha" > Uguqulelo Olunye </ iqhosha>   

Ibhokisi yokujonga

Yongeza data-toggle="buttons-checkbox"isimbo sebhokisi yokukhangela kwi-btn-iqela.

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

Unomathotholo

Yongeza data-toggle="buttons-radio"kwisitayile sikanomathotholo kwi-btn-iqela.

<div class = "btn-group" data-toggle = "amaqhosha-radio" >  
  < uhlobo lweqhosha = "iqhosha" iklasi = "btn btn-primary" > Ekhohlo </ iqhosha>  
  < uhlobo lweqhosha = "iqhosha" iklasi = "btn btn-primary" > Phakathi </iqhosha>  
  < uhlobo lweqhosha = "iqhosha" iklasi = "btn btn-primary" > 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 kwakhona imeko yeqhosha-tshintshanisa umbhalo ukuya kumbhalo wokuqala.

$().iqhosha(umtya)

Seta kwakhona ubume beqhosha-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:

<div class = "accordion" id = "accordion2" >  
  <div iklasi = "i-accordion-iqela" > 
    <div class = "i-accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne"> _    
        Into yeQela egotywayo #1
      </a>
    </ div>
    <div id = "collapseOne" class = "accordion-body collapse in" >  
      <div iklasi = "i-accordion-yangaphakathi" > 
        Imifanekiso eshukumayo...
      </ div>
    </ div>
  </ div>
  <div iklasi = "i-accordion-iqela" > 
    <div class = "i-accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Into yeQela egotywayo #2
      </a>
    </ div>
    <div id = "collapseTwo" iklasi = "i-accordion-body collapse" >  
      <div iklasi = "i-accordion-yangaphakathi" > 
        Imifanekiso eshukumayo...
      </ div>
    </ div>
  </ div>
</ div>
...

Ungasebenzisa kwakhona iplagin ngaphandle kophawu lweaccordion. Yenza iqhosha ukuguqula ukwandisa kunye nokudilika kwenye into.

< uhlobo lweqhosha = "iqhosha" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  elula eqengqelekayo
</ iqhosha>
 
<div id = "idemo" iklasi = "ehla ngaphakathi" > … </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

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

Second Thumbnail label

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.

Third Thumbnail label

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" >  
  <ol iklasi = "i-carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ ol>
  <!-- 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

Sebenzisa iimpawu zedatha ukulawula ngokulula indawo ye-carousel. data-slideyamkela amagama angundoqo prevokanye next, etshintsha indawo yesilayidi ngokunxulumene nendawo yangoku. Kungenjalo, sebenzisa data-slide-toukudlulisa isalathiso sesilayidi ekrwada kwicarousel data-slide-to="2", etsiba indawo yesilayidi kwisalathiso esithile esiqala nge 0.

NgeJavaScript

Fowunela i-carousel ngesandla nge:

$ ( '.carousel' ). Icarousel ()

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScriptz. 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)

Ujikelezisa 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" >  

Uya kufuna ukuseta autocomplete="off"ukunqanda iimenu zesikhangeli esingagqibekanga ukuba zivele ngaphezulu koluhlu lwe-Bootstrap yokuchwetheza.

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 kwento ethile ukuyivula nokuvala.

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

NgeJavaScript

Fowunela i-affix plugin usebenzisa iJavaScript:

$ ( '#navbar' ). ncamathela ()

Iinketho

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