Ngamunye noma ihlanganiswe

Ama-plugin angafakwa ngawodwana (yize amanye edinga ukuncika), noma konke ngesikhathi esisodwa. Kokubili i- bootstrap.js ne- bootstrap.min.js iqukethe wonke ama-plugin efayeleni elilodwa.

Izibaluli zedatha

Ungasebenzisa wonke ama-plugin e-Bootstrap ngokusebenzisa i-markup API ngaphandle kokubhala umugqa owodwa we-JavaScript. Lena i-API yekilasi lokuqala le-Bootstrap futhi kufanele kube ukucabangela kwakho kokuqala lapho usebenzisa i-plugin.

Sekushiwo lokho, kwezinye izimo kungase kufiseleke ukucisha lokhu kusebenza. Ngakho-ke, siphinde futhi sinikeze amandla okukhubaza i-API yesibaluli sedatha ngokukhulula yonke imicimbi emzimbeni ofakwe ``idatha-api'`. Lokhu kubukeka kanje:

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

Kungenjalo, ukuze uqondise i-plugin ethile, vele ufake igama le-plugin njengendawo yegama kanye ne-namespace yedatha-api kanje:

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

I-Programmatic API

Sikholelwa futhi ukuthi kufanele ukwazi ukusebenzisa wonke ama-plugin e-Bootstrap nge-JavaScript API. Wonke ama-API asesidlangalaleni ayizindlela zodwa, ezisebenzisekayo, futhi abuyisela iqoqo osekwenziwe ngalo.

$ ( ".btn.danger" ). inkinobho ( "guqula" ). addClass ( "amafutha" )

Zonke izindlela kufanele zamukele into ongakhetha kuyo, iyunithi yezinhlamvu eqondise indlela ethile, noma lutho (okuqalisa i-plugin ngokuziphatha okuzenzakalelayo):

$ ( "#myModal" ). i -modal () // iqaliswe ngokuzenzakalelayo                       
$ ( "#myModal" ). i-modal ({ keyboard : false }) // iqaliswe ngaphandle kwekhibhodi     
$ ( "#myModal" ). i -modal ( 'show' ) // iqalisa futhi icele ibonakale ngokushesha                

I-plugin ngayinye iphinda iveze umakhi wayo ongahluziwe esakhiweni `soMakhi`: $.fn.popover.Constructor. Uma ungathanda ukuthola isibonelo esithile se-plugin, sithole ngokuqondile entweni: $('[rel=popover]').data('popover').

Akukho Ukungqubuzana

Kwesinye isikhathi kuyadingeka ukusebenzisa ama-plugin e-Bootstrap nezinye izinhlaka ze-UI. Kulezi zimo, ukungqubuzana kwendawo yamagama kungenzeka ngezikhathi ezithile. Uma lokhu kwenzeka, ungashayela .noConflicti-plugin ofisa ukubuyisela inani layo.

var bootstrapButton = $ . fn . inkinobho . noConflict () // buyisela inkinobho engu-$.fn. enanini elinikezwe ngaphambilini 
$ . fn . i -bootstrapBtn = i -bootstrapButton             // nika i-$().bootstrapBtn ukusebenza kwe-bootstrap

Imicimbi

I-Bootstrap inikeza imicimbi yangokwezifiso yezenzo eziningi ezihlukile ze-plugin. Ngokuvamile, lezi ziza ngendlela engapheli kanye nenkathi edlule - lapho okungapheli (isib. show) kuqalwa ekuqaleni komcimbi, futhi isimo saso sokuhlanganyela esidlule (isib. shown) siyisiqalo lapho kuqedwa isenzo.

Yonke imicimbi engapheli ihlinzeka ngokusebenza kokuvimbelaOkuzenzakalelayo. Lokhu kunikeza ikhono lokumisa ukwenziwa kwesenzo ngaphambi kokuthi siqale.

$ ( '#MyModal' ). ku ( 'show' , umsebenzi ( e ) {   
    uma (! idatha ) ibuyisela e . preventDefault () // imisa i-modal ekubonisweni   
})

Mayelana noshintsho

Ukuze uthole imiphumela elula yoshintsho, faka i -bootstrap-transition.js kanye eceleni kwamanye amafayela e-JS. Uma usebenzisa i-comiled (noma minified) bootstrap.js , asikho isidingo sokufaka lokhu—sekukhona kakade.

Sebenzisa amacala

Izibonelo ezimbalwa ze-plugin yoshintsho:

• Ukushelela noma ukufiphala kumamodeli
• Ukufiphala kwamathebhu
• Iyafiphala izexwayiso
• Amafasitelana e-carousel ashelelayo

Izibonelo

Ama-modal ayahlelwa, kodwa aguquguqukayo, imiyalo yengxoxo enobuncane bokusebenza obudingekayo kanye nokuzenzakalelayo okuhlakaniphile.

Isibonelo esiqinile

I-modal enikeziwe enesihloko, umzimba, nesethi yezenzo kunyaweni.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </inkinobho>    
    <h3> Unhlokweni we-Modal </h3>
  </div>
  <div class = "modal-body" > 
    <p> Umzimba owodwa omuhle… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn"> Vala </a> _  
    <a href = "#" class = "btn btn-primary" > Londoloza izinguquko </a>  
  </div>
</div>

Idemo ebukhoma

Guqula i-modal usebenzisa i-JavaScript ngokuchofoza inkinobho engezansi. Izoshelela phansi bese ifiphala kusukela phezulu kwekhasi.

<!-- Inkinobho yokuqalisa i-modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Yethula imodeli yedemo </a>    
 
<!-- Imodeli -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Unhlokweni wemodeli </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Umzimba owodwa omuhle… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Vala </button>   
    <button class = "btn btn-primary" > Londoloza izinguquko </inkinobho> 
  </div>
</div>

Ukusetshenziswa

Ngezibaluli zedatha

Yenza kusebenze i-modal ngaphandle kokubhala i-JavaScript. Misa data-toggle="modal"into yesilawuli, njengenkinobho, kanye ne-a data-target="#foo"noma href="#foo"ukuze uqondise i-modal ethile ukuze uyiguqule.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Imodi yokwethula </button>   

Nge-JavaScript

Shayela i-modal ene-id myModalenomugqa owodwa we-JavaScript:

$ ( '#MyModal' ). imodeli ( izinketho )

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-backdrop="".

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

Izindlela

.modal(izinketho)

Yenza okuqukethwe kwakho kusebenze njengemodeli. Yamukela izinketho ozikhethela object.

$ ( '#MyModal' ). imodeli ({
  ikhibhodi : amanga 
})

.modal('guqula')

Iguqula ngokwenza i-modal.

$ ( '#MyModal' ). i-modal ( 'guqula' )

.modal('show')

Ivula mathupha i-modal.

$ ( '#MyModal' ). imodeli ( 'show' )

.imodeli('fihla')

Ifihla i-modal ngokwenza.

$ ( '#MyModal' ). i-modal ( 'fihla' )

Imicimbi

Ikilasi le-modal ye-Bootstrap lidalula imicimbi embalwa ukuze ixhume ekusebenzeni kwe-modal.

$ ( '#MyModal' ). ku ( 'kufihliwe' , umsebenzi () {   
  // enza into…
})

Izibonelo

Engeza amamenyu okwehlayo cishe kunoma yini enale plugin elula, okuhlanganisa i-navbar, amathebhu, namaphilisi.

Ngaphakathi kwe-navbar

Ngaphakathi kwamathebhu

Ukusetshenziswa

Ngezibaluli zedatha

Engeza data-toggle="dropdown"kusixhumanisi noma inkinobho ukuze uguqule okwehliswayo.

<div class = "okwehlayo" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Inhlamvu yokudonsela phansi </a>   
  <ul class = "dropdown-menu" role = "imenyu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Ukuze ugcine ama-URL eqinile, sebenzisa data-targetisibaluli esikhundleni se- href="#".

<div class = "okwehlayo" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Okwehlayo
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "imenyu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Nge-JavaScript

Shayela okwehliswayo nge-JavaScript:

$ ( '.ukuguqula-okwehlayo' ). okwehlayo ()

Izinketho

Lutho

Izindlela

$().okwehlayo('guqula')

I-programmatic api yokuguqula amamenyu kubha ye-navbar noma ukuzulazula okunethebhu.

Isibonelo ku-navbar

I-plugin ye-ScrollSpy ingeyokuvuselela ngokuzenzakalelayo okuhlosiwe kwe-nav ngokusekelwe endaweni yokuskrola. Skrola indawo engezansi kwe-navbar bese ubuka ukuguquka kwekilasi elisebenzayo. Izinto ezincanyana zokwehla zizogqanyiswa nazo.

Ukusetshenziswa

Ngezibaluli zedatha

Ukwengeza kalula ukuziphatha kwe-scrollspy ekuzulazuleni kwe data-spy="scroll"-topbar yakho, vele ungeze entweni ofuna ukuyihlola (imvamisa lokhu kuzoba umzimba) data-target=".navbar"nokukhetha ukuthi iyiphi i-nav ongayisebenzisa. Uzofuna ukusebenzisa i-scrollspy nengxenye .nav.

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

Nge-JavaScript

Shayela i-scrollspy nge-JavaScript:

$ ( '#navbar' ). scrollspy ()

Izindlela

.scrollspy('refresh')

Uma usebenzisa i-scrollspy ngokuhambisana nokwengeza noma ukususa izakhi ku-DOM, uzodinga ukushayela indlela yokuvuselela kanje:

$ ( '[data-spy="scroll"]' ). ngakunye ( umsebenzi () {  
  var $spy = $ ( lokhu ). scrollspy ( 'refresh' )
});

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-offset="".

Imicimbi

Amathebhu ayisibonelo

Engeza ukusebenza kwethebhu esheshayo, eguqukayo ukuze udlule kumafasitelana wokuqukethwe kwasendaweni, ngisho namamenyu okwehlayo.

Ukusetshenziswa

Nika amandla amathebhu aphathekayo nge-JavaScript (ithebhu ngayinye idinga ukwenziwa isebenze ngayodwana):

$ ( '#myTab a' ). chofoza ( umsebenzi ( e ) {  
  e . vimbelaOkuzenzakalelayo ();
  $ ( lokhu ). ithebhu ( 'show' );
})

Ungavula amathebhu ngamanye ngezindlela ezimbalwa:

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

Imakhaphu

Ungakwazi ukuvula ithebhu noma ukuzulazula kwephilisi ngaphandle kokubhala noma iyiphi i-JavaScript ngokucacisa data-toggle="tab"noma ngento data-toggle="pill"ethile. Ukwengeza i- navkanye nav-tabsnamakilasi kuthebhu ulkuzosebenzisa isitayela sethebhu ye-Bootstrap.

<ul class = "nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab"> Ikhaya </a></li >  
  <li><a href = "#profile" data-toggle = "tab"> Iphrofayili </a></li >  
  <li><a href = "#messages" data-toggle = "tab"> Imilayezo </a></li >  
  <li><a href = "#settings" data-toggle = "tab"> Izilungiselelo </a></li >  
</ul>

Izindlela

$().ithebhu

Yenza i-elementi yethebhu isebenze nesiqukathi sokuqukethwe. Ithebhu kufanele ibe no-a data-targetnoma i href-container node ku-DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home"> Ikhaya </a></li >  
  <li > <a href = "#iphrofayili"> Iphrofayili </a></li> 
  <li><a href = "#imiyalezo" > Imilayezo </a></li> 
  <li > <a href = "#settings"> Izilungiselelo </a></li> 
</ul>
 
<div class = "ithebhu-okuqukethwe" > 
  <div class = "i-tab-pane esebenzayo" id = "ikhaya" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "imiyalezo" > ... </div>  
  <div class = "tab-pane" id = "izilungiselelo" > ... </div>  
</div>
 
<script>
  $ ( umsebenzi () {  
    $ ( '#myTab a:last' ). ithebhu ( 'show' );
  })
</script>

Imicimbi

$ ( 'a[data-toggle="tab"]' ). ku ( 'kubonisiwe' , umsebenzi ( e ) {   
  e . target // ithebhu evuliwe
  e . relatedTarget // ithebhu yangaphambilini
})

Izibonelo

Igqugquzelwe i-plugin enhle kakhulu ye-jQuery.tipsy ebhalwe ngu-Jason Frame; Amathuluzi ayinguqulo ebuyekeziwe, engancikile ezithombeni, sebenzisa i-CSS3 ukuze uthole ukugqwayiza, kanye nezibaluli zedatha zokulondoloza isihloko sendawo.

Ngenxa yezizathu zokusebenza, ithiphu yamathuluzi kanye ne-popover data-apis zingena, okusho ukuthi kufanele uziqalise ngokwakho .

Hambisa phezulu kwezixhumanisi ezingezansi ukuze ubone amathuluzi:

Izikhombisi-ndlela ezine

Amathuluzi emaqenjini okokufaka

Uma usebenzisa amathiphu wamathuluzi nama-popover ngamaqembu okufaka we-Bootstrap, kuzodingeka ukuthi usethe containerinketho (ebhalwe ngezansi) ukuze ugweme imiphumela emibi engadingeki.

Ukusetshenziswa

Qalisa ithiphu yamathuluzi nge-JavaScript:

$ ( '#isibonelo' ). ithiphu ( izinketho )

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-animation="".

Imakhaphu

<a href = "#" data-toggle = "tooltip" title = "ithulusi lokuqala"> hambisa phezu kwami ​​</a>   

Izindlela

$().ithulusi(izinketho)

Inamathisela isibambi sethulithiphu eqoqweni le-elementi.

.ithiphu yethuluzi('show')

Iveza ithulithiphu yento ethile.

$ ( '#element' ). ithiphu yamathuluzi ( 'show' )

.ithiphu yethuluzi('fihla')

Ifihla ithiphu yento ethile.

$ ( '#element' ). ithiphu yamathuluzi ( 'fihla' )

.ithiphu yethuluzi('guqula')

Iguqula ithiphu lethuluzi le-elementi.

$ ( '#element' ). ithiphu yamathuluzi ( 'guqula' )

.tooltip('destroy')

Ifihla futhi ibhubhise ithiphu yento ethile.

$ ( '#element' ). ithiphu yamathuluzi ( 'destroy' )

Izibonelo

Engeza izimbondela ezincane zokuqukethwe, njengalezo eziku-iPad, kunoma iyiphi into ukuze uthole ulwazi lwesibili lwezindlu. Hambisa phezulu kwenkinobho ukuze uqalise i-popover. Idinga ithiphu yamathuluzi ukuthi ifakwe.

I-popover emile

Kunezinketho ezine ezitholakalayo: kuqondaniswe phezulu, kwesokudla, phansi, nesobunxele.

Akukho makhaphu aboniswa njengama-popover akhiqizwa ku-JavaScript nokuqukethwe ngaphakathi datakwesibaluli.

Idemo ebukhoma

Izikhombisi-ndlela ezine

Ukusetshenziswa

Nika amandla ama-popovers nge-JavaScript:

$ ( '#isibonelo' ). i- popover ( izinketho )

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-animation="".

Imakhaphu

Ngezizathu zokusebenza, Ithulithiphu kanye ne-Popover data-apis zingena. Uma ungathanda ukuzisebenzisa vele ucacise inketho yesikhethi.

Izindlela

$().i-popover(izinketho)

Iqalisa ama-popover eqoqo le-elementi.

.popover('show')

Iveza i-popover yama-elementi.

$ ( '#element' ). popover ( 'show' )

.popover('fihla')

Ifihla i-popover yama-elementi.

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

.popover('guqula')

Iguqula i-popover yezinto.

$ ( '#element' ). i- popover ( 'guqula' )

.popover('destroy')

Ifihla futhi icekele phansi i-popover yento.

$ ( '#element' ). i- popover ( 'destroy' )

Izexwayiso eziyisibonelo

Engeza umsebenzi wokucashisa kuyo yonke imilayezo yesixwayiso enale plugin.

Ukusetshenziswa

Nika amandla ukuchithwa kwesexwayiso nge-JavaScript:

$ ( ".isaziso" ). qaphela ()

Imakhaphu

Vele ungeze data-dismiss="alert"enkinobheni yakho yokuvala ukuze unikeze ngokuzenzakalelayo ukusebenza kwesexwayiso sokuvala.

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

Izindlela

$().isaziso()

Igoqa zonke izexwayiso ngokusebenza okuseduze. Ukuze izexwayiso zakho zigqwayize uma zivaliwe, qiniseka ukuthi sezisetshenzisiwe .fadefuthi .innekilasi kuzo.

.sexwayiso('vala')

Ivala isexwayiso.

$ ( ".isaziso" ). isixwayiso ( 'vala' )

Imicimbi

Ikilasi lesexwayiso le-Bootstrap lidalula imicimbi embalwa ukuze ixhumeke ekusebenzeni kwesixwayiso.

$ ( '#isaziso sami' ). bopha ( 'kuvaliwe' , umsebenzi () {   
  // enza into…
})

Isibonelo sokusetshenziswa

Yenza okwengeziwe ngezinkinobho. Inkinobho yokulawula ithi noma dala amaqembu ezinkinobho zezingxenye ezengeziwe njengamabha wamathuluzi.

Okushoyo

Engeza data-loading-text="Loading..."ukuze usebenzise isimo sokulayisha enkinobho.

<button type = "button" class = "btn btn-primary" data-loading-text = "Iyalayisha..." > Isimo sokulayisha </button>   

Ukuguqula okukodwa

Engeza data-toggle="button"ukuze wenze kusebenze ukuguqula inkinobho eyodwa.

<button type = "button" class = "btn btn-primary" data-toggle = "inkinobho" > Ukuguqula Okukodwa </inkinobho>   

Ibhokisi lokuhlola

Engeza data-toggle="buttons-checkbox"ukuguqula isitayela sebhokisi lokuhlola ku-btn-group.

<div class = "btn-group" data-toggle = "ibhokisi lokuhlola lezinkinobho" >  
  <button type = "button" class = "btn btn-primary" > Kwesokunxele </inkinobho>  
  <button type = "button" class = "btn btn-primary" > Phakathi </inkinobho>  
  <button type = "button" class = "btn btn-primary" > Right </button>  
</div>

Umsakazo

Engeza data-toggle="buttons-radio"ukuze uguqule isitayela serediyo ku-btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Kwesokunxele </inkinobho>  
  <button type = "button" class = "btn btn-primary" > Phakathi </inkinobho>  
  <button type = "button" class = "btn btn-primary" > Right </button>  
</div>

Ukusetshenziswa

Nika amandla izinkinobho nge-JavaScript:

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

Imakhaphu

Izibaluli zedatha ziyingxenye ye-plugin yenkinobho. Bheka ikhodi yesibonelo ngezansi ngezinhlobo ezahlukene zokumaka.

Izinketho

Lutho

Izindlela

$().inkinobho('guqula')

Iguqula isimo sohlelo. Inikeza inkinobho ukubonakala sengathi yenziwe yasebenza.

<button type = "button" class = "btn" data-toggle = "inkinobho" > … </button>    

$().inkinobho('iyalayisha')

Imisa isimo senkinobho ekulayisheni - inkinobho ikhubaza futhi ishintshanisa umbhalo ukuze ulayishe umbhalo. Ukulayisha umbhalo kufanele kuchazwe engxenyeni yenkinobho kusetshenziswa isibaluli sedatha data-loading-text.

<button type = "button" class = "btn" data-loading-text = "ilayisha izinto..." > ... </button>    

$().inkinobho('setha kabusha')

Isetha kabusha isimo senkinobho - ishintsha umbhalo ube umbhalo wokuqala.

$().inkinobho(uchungechunge)

Isetha kabusha isimo senkinobho - ishintshanisa umbhalo kunoma yisiphi isimo sombhalo esichazwe idatha.

<button type = "button" class = "btn" data-complete-text = "kuqediwe!" > ... </inkinobho>    
<script>
  $ ( '.btn' ). inkinobho ( 'qedile' )
</script>

Mayelana

Thola izitayela eziyisisekelo nosekelo oluguquguqukayo lwezingxenye ezigoqekayo njengama-accordion nokuzulazula.

* Idinga i-plugin ye-Transitions ukuthi ifakwe.

Isibonelo se-accordion

Sisebenzisa i-plugin yokugoqa, sakhe iwijethi yesitayela se-accordion elula:

<div class = "i-accordion" id = "i-accordion2" >  
  <div class = "iqembu le-accordion" > 
    <div class = "isihloko se-accordion" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Into Yeqembu Egoqekayo #1
      </a>
    </div>
    <div id = "collapseOne" class = "i-accordion-body collapse" >  
      <div class = "i-accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "iqembu le-accordion" > 
    <div class = "isihloko se-accordion" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Into Yeqembu Egoqekayo #2
      </a>
    </div>
    <div id = "collapseTwo" class = "i-accordion-body collapse" >  
      <div class = "i-accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Ungasebenzisa futhi i-plugin ngaphandle kwemakhaphu ye-accordion. Yenza inkinobho iguqule ukunwetshwa nokugoqa kwenye i-elementi.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  elula egoqekayo
</inkinobho>
 
<div id = "demo" class = "goqa phakathi" > … </div>  

Ukusetshenziswa

Ngezibaluli zedatha

Vele ungeze data-toggle="collapse"futhi u-a data-targetku-elementi ukuze unikeze ngokuzenzakalelayo ukulawula kwento egoqekayo. Isibaluli data-targetsamukela isikhethi se-css ongafaka kuso ukugoqa. Qiniseka ukuthi ungeza ikilasi collapseku-elementi egoqekayo. Uma ungathanda ukuthi ivuleke ngokuzenzakalelayo, engeza iklasi elengeziwe in.

Ukuze ungeze ukuphathwa kweqembu okufana ne-accordion kusilawuli esigoqekayo, engeza isibaluli sedatha data-parent="#selector". Bheka idemo ukuze ubone lokhu kusebenza.

Nge-JavaScript

Nika amandla ngokwenza nge:

$ ( ".goqa" ). bhidliza ()

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-parent="".

Izindlela

.goqa(izinketho)

Yenza okuqukethwe kwakho kusebenze njengento egoqekayo. Yamukela izinketho ozikhethela object.

$ ( '#myCollapsible' ). bhidlika ({
  guqula : amanga 
})

.goqa('guqula')

Iguqula into egoqekayo ukuze iboniswe noma ifihlwe.

.goqa('show')

Ibonisa into egoqekayo.

.goqa('fihla')

Ifihla into egoqekayo.

Imicimbi

Ikilasi lokugoqa le-Bootstrap lidalula imicimbi embalwa ukuze ixhumeke ekusebenzeni kokugoqa.

$ ( '#myCollapsible' ). ku ( 'kufihliwe' , umsebenzi () {   
  // enza into…
})

Isibonelo se-carousel

Umbukiso wesilayidi ongezansi ubonisa i-plugin evamile kanye nengxenye yokuhamba ngebhayisikili ezintweni ezifana ne-carousel.

Ilebula lesithonjana sokuqala

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.

Ilebula lesithonjana sesibili

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.

Ilebula Lesithonjana Sesithathu

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" class = "carousel slide" >  
  <ol class = "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 ze-carousel -->
  <div class = "i-carousel-inner" > 
    <div class = "into esebenzayo" > … </div> 
    <div class = "into" > … </div> 
    <div class = "into" > … </div> 
  </div>
  <!-- I-Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Ukusetshenziswa

Ngezibaluli zedatha

Sebenzisa izibaluli zedatha ukuze ulawule kalula ukuma kwe-carousel. data-slideyamukela amagama angukhiye prevnoma next, eshintsha indawo yesilayidi ngokuhlobene nendawo yaso yamanje. Kungenjalo, sebenzisa data-slide-toukudlulisa inkomba yesilayidi eluhlaza ku-carousel data-slide-to="2", eyeqa indawo yesilayidi enkombeni ethile eqala ngo- 0.

Nge-JavaScript

Shayela i-carousel ngokwenza:

$ ( '.carousel' ). i- carousel ()

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma nge-JavaScriptz. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-interval="".

Izindlela

.i-carousel(izinketho)

Iqalisa i-carousel ngezinketho zokuzithandela objectfuthi iqala ukuhamba ngebhayisikili ezintweni.

$ ( '.carousel' ). i- carousel ({
  Isikhathi : 2000 
})

.carousel('umjikelezo')

Izungeza izinto ze-carousel ukusuka kwesokunxele kuye kwesokudla.

.carousel('ikhefu')

Imisa i-carousel ekuhambeni ngebhayisikili ezintweni.

.carousel(inombolo)

Ibiyela i-carousel kuhlaka oluthile (okusekelwe ngo-0, okufana namalungu afanayo).

.carousel('prev')

Imijikelezo eya entweni edlule.

.carousel('okulandelayo')

Imijikelezo eya entweni elandelayo.

Imicimbi

Ikilasi le-carousel le-Bootstrap lidalula imicimbi emibili yokuxhunywa ekusebenzeni kwe-carousel.

Isibonelo

I-plugin eyisisekelo, enwetshwe kalula yokudala ngokushesha ama-typehead amahle nganoma iyiphi indlela yokufaka umbhalo.

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

Uzofuna ukusetha autocomplete="off"ukuze uvimbele amamenyu esiphequluli azenzakalelayo ukuthi angaveli phezu kokwehla kohlobo lwe-Bootstrap.

Ukusetshenziswa

Ngezibaluli zedatha

Engeza izibaluli zedatha ukuze ubhalise i-elementi ngokusebenza kwe-typeahead njengoba kuboniswe kusibonelo esingenhla.

Nge-JavaScript

Shayela i-typeahead mathupha ngokuthi:

$ ( '.typeahead' ). i-typehead ()

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-source="".

Izindlela

.typeahead(izinketho)

Iqalisa okokufaka nge-typeahead.

Isibonelo

Ukuzulazula okungaphansi kwesokunxele kuyidemo ebukhoma ye-plugin ye-affix.

Ukusetshenziswa

Ngezibaluli zedatha

Ukwengeza kalula ukuziphatha kokunamathisela kunoma iyiphi i-elementi, vele ungeze data-spy="affix"ku-elementi ofuna ukuyihlola. Bese usebenzisa ama-offsets ukuchaza ukuthi ushintsha nini ukuphina kwe-elementi uvule futhi ukuvale.

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

Nge-JavaScript

Shayela i-plugin ye-affix nge-JavaScript:

$ ( '#navbar' ). namathisela ()

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-offset-top="200".