Ya mtu binafsi au iliyokusanywa

Programu-jalizi zinaweza kujumuishwa kibinafsi (ingawa zingine zimehitaji utegemezi), au zote mara moja. Bootstrap.js na bootstrap.min.js zote zina programu-jalizi zote kwenye faili moja.

Sifa za data

Unaweza kutumia programu jalizi zote za Bootstrap kupitia API ya ghafi bila kuandika safu moja ya JavaScript. Hii ni API ya daraja la kwanza ya Bootstrap na inapaswa kuwa fikira yako ya kwanza unapotumia programu-jalizi.

Hiyo ilisema, katika hali zingine inaweza kuhitajika kuzima utendakazi huu. Kwa hivyo, pia tunatoa uwezo wa kuzima API ya sifa ya data kwa kutenganisha matukio yote kwenye sehemu ya majina ya mwili na `'data-api'`. Hii inaonekana kama hii:

$ ( 'mwili' ). imezimwa ( '.data-api' )

Vinginevyo, ili kulenga programu-jalizi maalum, jumuisha tu jina la programu-jalizi kama nafasi ya majina pamoja na nafasi ya majina ya data-api kama hii:

$ ( 'mwili' ). imezimwa ( '.alert.data-api' )

Programu ya API

Pia tunaamini kuwa unapaswa kutumia programu jalizi zote za Bootstrap kupitia JavaScript API. API zote za umma ni mbinu moja, zinazoweza kuunganishwa, na hurejesha mkusanyiko uliochukuliwa hatua.

$ ( ".btn.hatari" ). kitufe ( "geuza" ). addClass ( "mafuta" )

Mbinu zote zinapaswa kukubali chaguo la chaguo la chaguo, mfuatano ambao unalenga mbinu fulani, au chochote (ambacho huanzisha programu-jalizi yenye tabia chaguo-msingi):

$ ( "#MyModal" ). modal () // iliyoanzishwa na chaguo-msingi                       
$ ( "#MyModal" ). modal ({ keyboard : false }) // imeanzishwa bila kibodi     
$ ( "#MyModal" ). modal ( 'show' ) // inaanzisha na ishawishi kuonyesha mara moja                

Kila programu-jalizi pia inafichua mjenzi wake mbichi kwenye mali ya `Mjenzi`: $.fn.popover.Constructor. Ikiwa ungependa kupata mfano fulani wa programu-jalizi, ipate moja kwa moja kutoka kwa kipengele: $('[rel=popover]').data('popover').

Hakuna Migogoro

Wakati mwingine ni muhimu kutumia programu-jalizi za Bootstrap na mifumo mingine ya UI. Katika hali hizi, migongano ya nafasi ya majina inaweza kutokea mara kwa mara. Hili likitokea, unaweza kupiga simu .noConflictkwenye programu-jalizi unayotaka kurejesha thamani yake.

var bootstrapButton = $ . fn . kitufe . noConflict () // rudisha $.fn.button kwa thamani uliyokabidhiwa hapo awali 
$ . fn . bootstrapBtn = bootstrapButton             // toa $().bootstrapBtn utendakazi wa bootstrap

Matukio

Bootstrap hutoa matukio maalum kwa vitendo vingi vya kipekee vya programu-jalizi. Kwa ujumla, hizi huja katika umbo lisilo na kikomo na la wakati uliopita - ambapo neno lisilo kikomo (mf. show) huanzishwa mwanzoni mwa tukio, na umbo lake la zamani la kishirikishi (mf. shown) huwa kichochezi wakati kitendo kinapokamilika.

Matukio yote yasiyo na kikomo hutoa utendakazi wa kuzuiaChaguo-msingi. Hii hutoa uwezo wa kusimamisha utekelezaji wa kitendo kabla ya kuanza.

$ ( '#MyModal' ). kwenye ( 'onyesha' , kazi ( e ) {   
    ikiwa (! data ) itarudisha e . preventDefault () // huzuia modal kuonyeshwa   
})

Kuhusu mabadiliko

Kwa athari rahisi za mpito, jumuisha bootstrap-transition.js mara moja pamoja na faili zingine za JS. Ikiwa unatumia compiled (au minified) bootstrap.js , hakuna haja ya kujumuisha hii—tayari ipo.

Tumia kesi

Mifano michache ya programu-jalizi ya mpito:

• Kuteleza au kufifia katika moduli
• Vichupo vinavyofifia
• Arifa zinazofifia
• Paneli za jukwa zinazoteleza

Mifano

Miundo imeratibiwa, lakini rahisi, vidokezo vya mazungumzo yenye utendakazi wa chini unaohitajika na chaguomsingi mahiri.

Mfano tuli

Modali inayotekelezwa yenye kichwa, mwili, na seti ya vitendo katika kijachini.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </kifungo>    
    <h3> Kichwa cha modal </h3>
  </ div>
  <div class = "modal-body" > 
    <p> Mwili mmoja mzuri… </p>
  </ div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn"> Funga </a> _  
    <a href = "#" class = "btn btn-primary" > Hifadhi mabadiliko </a>  
  </ div>
</ div>

Onyesho la moja kwa moja

Geuza modali kupitia JavaScript kwa kubofya kitufe kilicho hapa chini. Itateleza chini na kufifia kutoka juu ya ukurasa.

<!-- Kitufe cha kuanzisha modali -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Zindua modi ya onyesho </a>    
 
<!-- Modal -->
<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" > Modal header </h3> 
  </ div>
  <div class = "modal-body" > 
    <p> Mwili mmoja mzuri… </p>
  </ div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Funga </button>   
    <button class = "btn btn-primary" > Hifadhi mabadiliko </button> 
  </ div>
</ div>

Matumizi

Kupitia sifa za data

Washa modali bila kuandika JavaScript. Weka data-toggle="modal"kwenye kipengele cha kidhibiti, kama kitufe, pamoja na data-target="#foo"au href="#foo"kulenga modi mahususi ya kugeuza.

<button type = "button" data-toggle = "modal" data-target = "#MyModal" > zindua modali </button>   

Kupitia JavaScript

Piga modali na kitambulisho myModalna safu moja ya JavaScript:

$ ( '#MyModal' ). modal ( chaguzi )

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-backdrop="".

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

Mbinu

.modal(chaguo)

Huwasha maudhui yako kama modali. Inakubali chaguo za hiari object.

$ ( '#MyModal' ). mtindo ({
  kibodi : uongo 
})

.modal('geuza')

Hugeuza modali mwenyewe.

$ ( '#MyModal' ). modali ( 'geuza' )

.modal('show')

Hufungua moduli mwenyewe.

$ ( '#MyModal' ). modali ( 'onyesha' )

.modal('ficha')

Huficha modali mwenyewe.

$ ( '#MyModal' ). modal ( 'jificha' )

Matukio

Darasa la modali la Bootstrap linafichua matukio machache ya kuunganisha kwenye utendakazi wa modal.

$ ( '#MyModal' ). juu ya ( 'hidden' , kazi () {   
  // fanya kitu…
})

Mifano

Ongeza menyu kunjuzi kwa karibu chochote ukitumia programu-jalizi hii rahisi, ikijumuisha upau wa uelekezaji, vichupo na vidonge.

Ndani ya upau wa urambazaji

Ndani ya vichupo

Matumizi

Kupitia sifa za data

Ongeza data-toggle="dropdown"kwenye kiungo au kitufe ili kugeuza menyu kunjuzi.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Kianzisha kunjuzi </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</ div>

Ili kuweka URL zisizobadilika, tumia data-targetsifa badala ya href="#".

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

Kupitia JavaScript

Piga kushuka kupitia JavaScript:

$ ( '. dropdown-toggle' ). kunjuzi ()

Chaguo

Hakuna

Mbinu

$().kunjuzi('geuza')

Api ya programu ya kugeuza menyu kwa upau wa uelekezaji au urambazaji wa kichupo.

Mfano katika navbar

Programu-jalizi ya ScrollSpy ni ya kusasisha kiotomatiki malengo ya nav kulingana na nafasi ya kusogeza. Tembeza eneo chini ya upau wa urambazaji na utazame mabadiliko ya darasa amilifu. Vipengee vidogo vya kunjuzi vitaangaziwa pia.

Matumizi

Kupitia sifa za data

Ili kuongeza kwa urahisi tabia ya kusogeza kwenye urambazaji wa upau wako wa juu, ongeza tu data-spy="scroll"kwa kipengele unachotaka kupeleleza (kwa kawaida huu utakuwa mwili) na data-target=".navbar"kuchagua ni nav gani ya kutumia. Utataka kutumia scrollspy na .navsehemu.

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

Kupitia JavaScript

Piga simu scrollspy kupitia JavaScript:

$ ( '#navbar' ). kusogeza ()

Mbinu

.scrollpy('onyesha upya')

Unapotumia scrollspy kwa kushirikiana na kuongeza au kuondoa vitu kutoka kwa DOM, utahitaji kupiga njia ya kuburudisha kama hivyo:

$ ( '[data-spy="scroll"]' ). kila ( kazi () {  
  var $spy = $ ( hii ). scrollspy ( 'refresh' )
});

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-offset="".

Matukio

Vichupo vya mfano

Ongeza utendakazi wa kichupo cha haraka na unaobadilika ili kubadilisha vidirisha vya maudhui ya ndani, hata kupitia menyu kunjuzi.

Matumizi

Washa vichupo vinavyoweza kutekelezeka kupitia JavaScript (kila kichupo kinahitaji kuamilishwa kivyake):

$ ( '#myTab a' ). bonyeza ( kazi ( e ) {  
  e . kuzuiaDefault ();
  $ ( hii ). tab ( 'onyesha' );
})

Unaweza kuwezesha tabo binafsi kwa njia kadhaa:

$ ( '#myTab a[href="#profile"]' ). tab ( 'onyesha' ); // Chagua kichupo kwa jina 
$ ( '#myTab a:first' ). tab ( 'onyesha' ); // Chagua kichupo cha kwanza 
$ ( '#myTab a:last' ). tab ( 'onyesha' ); // Chagua kichupo cha mwisho 
$ ( '#myTab li:eq(2) a' ). tab ( 'onyesha' ); // Chagua kichupo cha tatu (kilichoonyeshwa 0) 

Alama

Unaweza kuwezesha urambazaji wa kichupo au kidonge bila kuandika JavaScript yoyote kwa kubainisha data-toggle="tab"au data-toggle="pill"kwa kipengee. Kuongeza navna nav-tabsmadarasa kwenye kichupo ulkutatumia mtindo wa kichupo cha Bootstrap.

<ul class = "nav-tabs" > 
  <li><a href = "#nyumbani" data-toggle = "tab" > Nyumbani </a></li>  
  <li><a href = "#profile" data-toggle = "tab"> Wasifu </a></li >  
  <li><a href = "#messages" data-toggle = "tab" > Ujumbe </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Mipangilio </a></li>  
</ul>

Mbinu

$().kichupo

Huwasha kipengele cha kichupo na kontena ya maudhui. Kichupo kinapaswa kuwa na nodi ya chombo data-targetau inayolenga kwenye DOM.href

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#nyumbani" > Nyumbani </a></li>  
  <li><a href = "#wasifu" > Wasifu </a></li> 
  <li><a href = "#ujumbe" > Ujumbe </a></li> 
  <li><a href = "#mipangilio" > Mipangilio </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "nyumbani" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</ div>
 
<script>
  $ ( kazi () {  
    $ ( '#myTab a:last' ). tab ( 'onyesha' );
  })
</script>

Matukio

$ ( 'a[data-toggle="tab"]' ). kwenye ( 'imeonyeshwa' , kazi ( e ) {   
  e . lengo // kichupo kilichoamilishwa
  e . kuhusianaTarget // tabo iliyopita
})

Mifano

Imehamasishwa na programu-jalizi bora ya jQuery.tipsy iliyoandikwa na Jason Frame; Vidokezo vya zana ni toleo lililosasishwa, ambalo halitegemei picha, tumia CSS3 kwa uhuishaji, na sifa za data kwa hifadhi ya mada ya ndani.

Kwa sababu za utendakazi, kidokezo cha zana na popover data-apis zimejumuishwa, kumaanisha kwamba lazima uzianzishe wewe mwenyewe .

Elea juu ya viungo vilivyo hapa chini ili kuona vidokezo vya zana:

Maelekezo manne

Vidokezo vya zana katika vikundi vya ingizo

Unapotumia vidokezo vya zana na popover na vikundi vya ingizo vya Bootstrap, itabidi uweke containerchaguo (lililoandikwa hapa chini) ili kuzuia athari zisizohitajika.

Matumizi

Anzisha kidokezo cha zana kupitia JavaScript:

$ ( '#mfano' ). kidokezo cha zana ( chaguo )

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-animation="".

Alama

<a href = "#" data-toggle = "tooltip" title = "kidokezo cha kwanza" > elea juu yangu </a>   

Mbinu

$().kidokezo cha zana(chaguo)

Huambatisha kidhibiti kidokezo kwenye mkusanyiko wa vipengele.

.kidokezo('onyesha')

Hufichua kidokezo cha kipengele.

$ ( '#element' ). kidokezo cha zana ( 'onyesha' )

.kidokezo cha zana('ficha')

Huficha kidokezo cha kipengele.

$ ( '#element' ). kidokezo cha zana ( 'ficha' )

.kidokezo cha zana('geuza')

Hugeuza kidokezo cha kipengee.

$ ( '#element' ). kidokezo cha zana ( 'geuza' )

.tooltip('haribu')

Huficha na kuharibu ncha ya zana ya kipengele.

$ ( '#element' ). ncha ya zana ( 'haribu' )

Mifano

Ongeza viwekeleo vidogo vya maudhui, kama vile vilivyo kwenye iPad, kwa kipengele chochote kwa maelezo ya upili. Elea juu ya kitufe ili kuanzisha popover. Inahitaji Tooltip kujumuishwa.

Pover tuli

Chaguzi nne zinapatikana: juu, kulia, chini, na kushoto iliyokaa.

Hakuna lebo inayoonyeshwa kama popover zinazozalishwa kutoka kwa JavaScript na maudhui ndani ya datasifa.

Onyesho la moja kwa moja

Maelekezo manne

Matumizi

Washa popover kupitia JavaScript:

$ ( '#mfano' ). popover ( chaguzi )

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-animation="".

Alama

Kwa sababu za utendakazi, Kidokezo cha data na Popover data-apis zimejumuishwa. Ikiwa ungependa kuzitumia bainisha chaguo la kiteuzi.

Mbinu

$(). popover(chaguo)

Huanzisha popover kwa mkusanyiko wa vipengele.

.popover('onyesha')

Hufichua pover ya vipengele.

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

.popover('ficha')

Huficha popover ya vipengele.

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

.popover('geuza')

Hugeuza popover ya vipengele.

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

.popover('haribu')

Huficha na kuharibu popover ya kipengele.

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

Arifa za mfano

Ongeza utendakazi wa kukataa kwa ujumbe wote wa tahadhari na programu-jalizi hii.

Matumizi

Washa uondoaji wa arifa kupitia JavaScript:

$ ( ".tahadhari" ). tahadhari ()

Alama

Ongeza tu data-dismiss="alert"kwenye kitufe chako cha kufunga ili kutoa kiotomatiki utendakazi wa karibu wa tahadhari.

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

Mbinu

$().tahadhari()

Hufunga arifa zote kwa utendakazi wa karibu. Ili arifa zako zihuishwe zinapofungwa, hakikisha kuwa .fadena .indarasa tayari zimetumika kwao.

.tahadhari('funga')

Hufunga arifa.

$ ( ".tahadhari" ). tahadhari ( 'funga' )

Matukio

Darasa la tahadhari la Bootstrap linafichua matukio machache ya kuunganisha katika utendaji wa tahadhari.

$ ( '#tahadhari yangu' ). funga ( 'imefungwa' , kazi () {   
  // fanya kitu…
})

Matumizi ya mfano

Fanya zaidi na vifungo. Kitufe cha kudhibiti kinasema au unda vikundi vya vitufe vya vipengee zaidi kama vile upau wa vidhibiti.

Ya serikali

Ongeza data-loading-text="Loading..."ili kutumia hali ya upakiaji kwenye kitufe.

<button type = "button" class = "btn btn-primary" data-loading-text = "Inapakia..." > Hali ya kupakia </button>   

Kugeuza moja

Ongeza data-toggle="button"ili kuwezesha kugeuza kwenye kitufe kimoja.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Kugeuza Moja </button>   

Kisanduku cha kuteua

Ongeza data-toggle="buttons-checkbox"kwa mtindo wa kisanduku cha kuteua kwenye btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Kushoto </button>  
  <button type = "button" class = "btn btn-primary" > Kati </button>  
  <button type = "button" class = "btn btn-primary" > Kulia </button>  
</ div>

Redio

Ongeza data-toggle="buttons-radio"kwa mtindo wa redio kugeuza kwenye btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Kushoto </button>  
  <button type = "button" class = "btn btn-primary" > Kati </button>  
  <button type = "button" class = "btn btn-primary" > Kulia </button>  
</ div>

Matumizi

Washa vitufe kupitia JavaScript:

$ ( '.nav-tabo' ). kitufe ()

Alama

Sifa za data ni muhimu kwa programu-jalizi ya kitufe. Angalia msimbo wa mfano hapa chini kwa aina mbalimbali za markup.

Chaguo

Hakuna

Mbinu

$().kifungo('geuza')

Hugeuza hali ya kusukuma. Hutoa kitufe mwonekano kwamba kimewashwa.

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

$().kifungo('inapakia')

Huweka hali ya vitufe kupakia - huzima kitufe na kubadilisha maandishi hadi kupakia maandishi. Upakiaji wa maandishi unapaswa kufafanuliwa kwenye kipengee cha kitufe kwa kutumia sifa ya data data-loading-text.

<button type = "button" class = "btn" data-loading-text = "kupakia vitu..." > ... </button>    

$().kifungo('weka upya')

Huweka upya hali ya kitufe - hubadilisha maandishi hadi maandishi asili.

$().kifungo(kamba)

Huweka upya hali ya kitufe - hubadilisha maandishi kwa hali yoyote ya maandishi iliyobainishwa na data.

<button type = "button" class = "btn" data-complete-text = "finished!" > ... </ button>    
<script>
  $ ( '.btn' ). kitufe ( 'kamili' )
</script>

Kuhusu

Pata mitindo msingi na usaidizi unaonyumbulika wa vipengee vinavyoweza kukunjwa kama vile accordions na urambazaji.

* Inahitaji programu-jalizi ya Mpito kujumuishwa.

Mfano wa accordion

Kwa kutumia programu-jalizi ya kukunja, tulitengeneza wijeti rahisi ya mtindo wa accordion:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Kipengee #1 cha Kikundi Kinachoweza Kukunjwa
      </a>
    </ div>
    <div id = "collapseOne" class = "accordion-body collapse in" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </ div>
    </ div>
  </ div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Kipengee #2 cha Kikundi Kinachoweza Kukunjwa
      </a>
    </ div>
    <div id = "collapseTwo" class = "accordion-body collapse" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </ div>
    </ div>
  </ div>
</ div>
...

Unaweza pia kutumia programu-jalizi bila alama ya accordion. Tengeneza kitufe kugeuza upanuzi na kuporomoka kwa kipengele kingine.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  rahisi kukunjwa
</kifungo>
 
<div id = "demo" class = "kunjuka" > … </div>  

Matumizi

Kupitia sifa za data

Ongeza tu data-toggle="collapse"na data-targetkipengele ili kukabidhi kiotomatiki udhibiti wa kipengele kinachoweza kukunjwa. Sifa data-targetinakubali kiteuzi cha css cha kutumia kukunja. Hakikisha umeongeza darasa collapsekwenye kipengele kinachoweza kukunjwa. Ikiwa ungependa ifungue chaguomsingi, ongeza darasa la ziada in.

Ili kuongeza usimamizi wa kikundi kama accordion kwenye kidhibiti kinachoweza kukunjwa, ongeza sifa ya data data-parent="#selector". Rejelea onyesho ili kuona hili likiendelea.

Kupitia JavaScript

Washa wewe mwenyewe na:

$ ( ".collapse" ). kuanguka ()

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-parent="".

Mbinu

.kunja(chaguo)

Huwasha maudhui yako kama kipengele kinachoweza kukunjwa. Inakubali chaguo za hiari object.

$ ( '#myCollapsible' ). kuanguka ({
  kugeuza : uongo 
})

.kunja('geuza')

Hugeuza kipengele kinachoweza kukunjwa kuonyeshwa au kufichwa.

.kunja('onyesha')

Inaonyesha kipengele kinachoweza kukunjwa.

.kunja('ficha')

Huficha kipengele kinachoweza kukunjwa.

Matukio

Darasa la kukunja la Bootstrap linafichua matukio machache ya kunasa katika utendakazi wa kukunja.

$ ( '#myCollapsible' ). juu ya ( 'hidden' , kazi () {   
  // fanya kitu…
})

Mfano jukwa

Onyesho la slaidi hapa chini linaonyesha programu-jalizi ya jumla na kijenzi cha kuendesha baiskeli kupitia vipengele kama jukwa.

Lebo ya kijipicha cha kwanza

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.

Lebo ya Kijipicha cha Pili

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" class = "jukwaa slaidi" >  
  <ol class = "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>
  <!-- Vitu vya jukwa -->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </ div>
  <!-- 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>

Matumizi

Kupitia sifa za data

Tumia sifa za data ili kudhibiti kwa urahisi nafasi ya jukwa. data-slideinakubali manenomsingi prevau next, ambayo hubadilisha nafasi ya slaidi kulingana na nafasi yake ya sasa. Vinginevyo, tumia data-slide-tokupitisha faharasa mbichi ya slaidi kwa carousel data-slide-to="2", ambayo inaruka nafasi ya slaidi kwa faharasa fulani inayoanza na0 .

Kupitia JavaScript

Piga jukwa mwenyewe na:

$ ( '.carousel' ). jukwa ()

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScriptz. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-interval="".

Mbinu

.jukwa(chaguo)

Huanzisha jukwa kwa chaguo za hiari objectna kuanza kuendesha baiskeli kupitia vitu.

$ ( '.carousel' ). jukwa ({
  muda : 2000 
})

.jukwa('cycle')

Huzungusha vitu vya jukwa kutoka kushoto kwenda kulia.

.jukwa('pause')

Husimamisha jukwa lisiendeshe baiskeli kupitia vitu.

.jukwa(nambari)

Huzungusha jukwa hadi fremu fulani (0 msingi, sawa na safu).

.jukwa('prev')

Mizunguko ya kipengee kilichotangulia.

.jukwa('linalofuata')

Mizunguko hadi kipengee kinachofuata.

Matukio

Darasa la jukwa la Bootstrap linafichua matukio mawili ya kuunganisha kwenye utendakazi wa jukwa.

Mfano

Programu-jalizi ya msingi, iliyopanuliwa kwa urahisi ya kuunda vichwa vya uchapaji kwa haraka kwa kuingiza maandishi ya aina yoyote.

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

Utataka kuweka autocomplete="off"ili kuzuia menyu chaguo-msingi za kivinjari zisionekane kwenye menyu kunjuzi ya chapa ya Bootstrap.

Matumizi

Kupitia sifa za data

Ongeza sifa za data ili kusajili kipengee chenye utendaji wa chapa kama inavyoonyeshwa kwenye mfano hapo juu.

Kupitia JavaScript

Piga chapa kwa mikono ukitumia:

$ ( '.typeahead' ). chapa mbele ()

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-source="".

Mbinu

.typeahead(chaguo)

Huanzisha ingizo kwa kuandika mbele.

Mfano

Urambazaji ulio upande wa kushoto ni onyesho la moja kwa moja la programu-jalizi ya kiambatisho.

Matumizi

Kupitia sifa za data

Ili kuongeza kwa urahisi tabia ya kubandika kwa kipengele chochote, ongeza tu data-spy="affix"kwenye kipengele unachotaka kupeleleza. Kisha utumie vipunguzio kufafanua wakati wa kugeuza ubandikaji wa kipengele kuwasha na kuzima.

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

Kupitia JavaScript

Piga programu-jalizi ya kiambatisho kupitia JavaScript:

$ ( '#navbar' ). bandika ()

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-offset-top="200".