Individwali jew miġbura

Il-plugins jistgħu jiġu inklużi individwalment (għalkemm xi wħud għandhom dipendenzi meħtieġa), jew kollha f'daqqa. Kemm bootstrap.js kif ukoll bootstrap.min.js fihom il-plugins kollha f'fajl wieħed.

Attributi tad-dejta

Tista 'tuża l-plugins Bootstrap kollha purament permezz tal-API tal-markup mingħajr ma tikteb linja waħda ta' JavaScript. Din hija l-API tal-ewwel klassi ta' Bootstrap u għandha tkun l-ewwel konsiderazzjoni tiegħek meta tuża plugin.

Cela dit, f'xi sitwazzjonijiet jista 'jkun mixtieq li titfi din il-funzjonalità. Għalhekk, aħna nipprovdu wkoll il-ħila li tiddiżattiva l-API tal-attribut tad-dejta billi torbot l-avvenimenti kollha fuq il-korp namespaced b'''data-api''. Dan jidher bħal dan:

$ ( 'korp' ). off ( '.data-api' )

Inkella, biex timmira plugin speċifiku, inkludi biss l-isem tal-plugin bħala spazju tal-isem flimkien mal-ispazju tal-isem tad-data-api bħal dan:

$ ( 'korp' ). off ( '.alert.data-api' )

API programmatiku

Aħna nemmnu wkoll li għandek tkun tista' tuża l-plugins Bootstrap kollha purament permezz tal-API JavaScript. L-APIs pubbliċi kollha huma metodi singoli, li jistgħu jiġu kkatinati, u jirritornaw il-ġbir li ttieħed azzjoni fuqhom.

$ ( ".btn.danger" ). buttuna ( "toggle" ). addClass ( "xaħam" )

Il-metodi kollha għandhom jaċċettaw oġġett ta' għażliet fakultattivi, string li jimmira metodu partikolari, jew xejn (li jibda plugin b'imġieba default):

$ ( "#Modal tiegħi" ). modal () // inizjalizzat b'inadempjenzi                       
$ ( "#Modal tiegħi" ). modal ({ keyboard : false }) // inizjalizzat bl-ebda tastiera     
$ ( "#Modal tiegħi" ). modal ( 'show' ) // jinizjalizza u jinvoka show immedjatament                

Kull plugin jesponi wkoll il-kostruttur mhux maħdum tiegħu fuq proprjetà "Kostruttur": $.fn.popover.Constructor. Jekk tixtieq tikseb każ partikolari ta' plugin, irkupraha direttament minn element: $('[rel=popover]').data('popover').

Ebda Kunflitt

Xi drabi huwa meħtieġ li tuża plugins Bootstrap ma 'oqfsa UI oħra. F'dawn iċ-ċirkostanzi, ħabtiet tal-ispazji tal-isem jistgħu jseħħu okkażjonalment. Jekk jiġri dan, tista' ċċempel .noConflictfuq il-plugin li tixtieq ireġġa' lura l-valur tiegħu.

var bootstrapButton = $ . fn . buttuna . noConflict () // jirritorna $.fn.button għal valur assenjat qabel 
$ . fn . bootstrapBtn = bootstrapButton             // agħti lil $().bootstrapBtn il-funzjonalità tal-bootstrap

Avvenimenti

Bootstrap jipprovdi avvenimenti personalizzati għall-biċċa l-kbira tal-azzjonijiet uniċi tal-plugin. Ġeneralment, dawn jiġu f'forma ta 'partiċipju infinitiv u passat - fejn l-infinittiv (eż. show) jiġi attivat fil-bidu ta' avveniment, u l-forma ta 'partiċipju passat tiegħu (eż. ) tiġi attivata mat shown-tlestija ta' azzjoni.

L-avvenimenti infinitivi kollha jipprovdu funzjonalità preventDefault. Dan jipprovdi l-abbiltà li twaqqaf l-eżekuzzjoni ta 'azzjoni qabel ma tibda.

$ ( '#Modal tiegħi' ). fuq ( 'juru' , funzjoni ( e ) {   
    jekk (! data ) jirritorna e . preventDefault () // iwaqqaf il-modal milli jintwera   
})

Dwar transizzjonijiet

Għal effetti ta' transizzjoni sempliċi, inkludi bootstrap-transition.js darba flimkien mal-fajls JS l-oħra. Jekk qed tuża l- bootstrap.js ikkumpilat (jew imminifikat) , m'hemmx għalfejn tinkludi dan—diġà qiegħed hemm.

Każijiet ta' użu

Xi ftit eżempji tal-plugin tat-tranżizzjoni:

• Tiżżerżaq jew fading fil-modali
• Fading out tabs
• Fading out allersijiet
• Panewijiet tal-karużell li jiżżerżqu

Eżempji

Il-modali huma ssimplifikati, iżda flessibbli, iqajjem djalogu bil-funzjonalità minima meħtieġa u nuqqasijiet intelliġenti.

Eżempju statiku

Modali mogħtija b'header, korp, u sett ta' azzjonijiet fil-footer.

<div class = "fade tal-ħabi modali" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Header modali </h3>
  </div>
  <div class = "modal-body" > 
    <p> Korp wieħed fin... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Agħlaq </a>  
    <a href = "#" class = "btn btn-primary" > Issejvja l-bidliet </a>  
  </div>
</div>

Demo live

Aqleb modal permezz ta' JavaScript billi tikklikkja l-buttuna hawn taħt. Jiżżerżaq 'l isfel u jisparixxi mill-parti ta' fuq tal-paġna.

<!-- Button biex tiskatta l-modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Tnedija demo modali </a>    
 
<!-- Modali -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "veru" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Intestatura modali </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Korp wieħed fin... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Agħlaq </button>   
    <button class = "btn btn-primary" > Issejvja l-bidliet </button> 
  </div>
</div>

Użu

Via attributi tad-data

Attiva modali mingħajr ma tikteb JavaScript. Issettja data-toggle="modal"fuq element ta 'kontrollur, bħal buttuna, flimkien ma' data-target="#foo"jew href="#foo"biex timmira modal speċifiku biex toggle.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Tnedija modali </button>   

Via JavaScript

Sejħa modal b'id myModalb'linja waħda ta' JavaScript:

$ ( '#Modal tiegħi' ). modali ( għażliet )

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-backdrop="".

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

Metodi

.modal(għażliet)

Jattiva l-kontenut tiegħek bħala modal. Jaċċetta għażliet fakultattivi object.

$ ( '#Modal tiegħi' ). modali ({
  tastiera : falza 
})

.modal('toggle')

Manwalment toggles modali.

$ ( '#Modal tiegħi' ). modali ( 'toggle' )

.modal('show')

Manwalment tiftaħ modali.

$ ( '#Modal tiegħi' ). modali ( 'turi' )

.modal('hide')

Manwalment jaħbi modali.

$ ( '#Modal tiegħi' ). modali ( 'ħbi' )

Avvenimenti

Il-klassi modali ta 'Bootstrap tesponi ftit avvenimenti biex tgħaqqad il-funzjonalità modali.

$ ( '#Modal tiegħi' ). fuq ( 'moħbi' , funzjoni () {   
  // agħmel xi ħaġa...
})

Eżempji

Żid menus dropdown għal kważi kull ħaġa b'dan il-plugin sempliċi, inklużi n-navbar, tabs, u pilloli.

Fi ħdan navbar

Fi ħdan tabs

Użu

Via attributi tad-data

Żid data-toggle="dropdown"ma' link jew buttuna biex taqleb dropdown.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Ħruġ ta' dropdown </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Biex iżżomm l-URLs intatti, uża l- data-targetattribut minflok href="#".

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

Via JavaScript

Ċempel il-dropdowns permezz ta' JavaScript:

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

Għażliet

Xejn

Metodi

$().dropdown('toggle')

Api programmatiku għall-toggling menus għal navbar partikolari jew navigazzjoni bit-tabbed.

Eżempju fin-navbar

Il-plugin ScrollSpy huwa għall-aġġornament awtomatiku tal-miri tan-nav ibbażati fuq il-pożizzjoni tal-iscroll. Skrollja ż-żona taħt in-navbar u ara l-bidla fil-klassi attiva. Is-sub-oġġetti dropdown se jiġu enfasizzati wkoll.

Użu

Via attributi tad-data

Biex iżżid faċilment l-imġieba ta 'scrollspy man-navigazzjoni ta' topbar tiegħek, żid biss data-spy="scroll"mal-element li trid tispy fuq (l-aktar tipikament dan ikun il-korp) u data-target=".navbar"biex tagħżel liema nav tuża. Int trid tuża scrollspy .navb'komponent.

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

Via JavaScript

Ċempel l-iscrollspy permezz ta' JavaScript:

$ ( '#navbar' ). scrollspy ()

Metodi

.scrollspy('aġġornament')

Meta tuża scrollspy flimkien maż-żieda jew it-tneħħija ta 'elementi mid-DOM, ikollok bżonn issejjaħ il-metodu ta' aġġornar hekk:

$ ( '[data-spy="scroll"]' ). kull ( funzjoni () {  
  var $spy = $ ( dan ). scrollspy ( 'aġġornament' )
});

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-offset="".

Avvenimenti

Eżempji tabs

Żid il-funzjonalità ta' tab rapida u dinamika biex tgħaddi minn panewijiet ta' kontenut lokali, anke permezz ta' menus dropdown.

Użu

Ippermetti tabs tabbable permezz ta' JavaScript (kull tab trid tiġi attivata individwalment):

$ ( '#Tab tiegħi a' ). ikklikkja ( funzjoni ( e ) {  
  e . preventDefault ();
  $ ( dan ). tab ( 'juru' );
})

Tista' tattiva tabs individwali b'diversi modi:

$ ( '#myTab a[href="#profil"]' ). tab ( 'juru' ); // Agħżel tab bl-isem 
$ ( '#Tab tiegħi a:l-ewwel' ). tab ( 'juru' ); // Agħżel l-ewwel tab 
$ ( '#Tab tiegħi a:l-aħħar' ). tab ( 'juru' ); // Agħżel l-aħħar tab 
$ ( '#myTab li:eq(2) a' ). tab ( 'juru' ); // Agħżel it-tielet tab (0-indiċi) 

Markup

Tista' tattiva tab jew navigazzjoni ta' pillola mingħajr ma tikteb JavaScript billi sempliċement tispeċifika data-toggle="tab"jew data-toggle="pill"fuq element. Iż-żieda tal- navu nav-tabsklassijiet mat-tab ulse tapplika l-istil tat-tab Bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Messaġġi </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Settings </a></li>  
</ul>

Metodi

$().tab

Jattiva element tab u kontenitur tal-kontenut. Tab għandu jkollha jew a data-targetjew hrefnode ta 'kontenitur fil-mira fid-DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Dar </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Messaġġi </a></li> 
  <li><a href = "#settings" > Settings </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "dar" > ... </div>  
  <div class = "tab-pane" id = "profil" > ... </div>  
  <div class = "tab-pane" id = "messaġġi" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<kitba>
  $ ( funzjoni () {  
    $ ( '#Tab tiegħi a:l-aħħar' ). tab ( 'juru' );
  })
</script>

Avvenimenti

$ ( 'a[data-toggle="tab"]' ). fuq ( 'muri' , funzjoni ( e ) {   
  e . mira // tab attivata
  e . relatedTarget // tab preċedenti
})

Eżempji

Ispirat mill-plugin eċċellenti jQuery.tipsy miktub minn Jason Frame; Tooltips huma verżjoni aġġornata, li ma jiddependux fuq immaġini, jużaw CSS3 għall-animazzjonijiet, u data-attributi għall-ħażna tat-titlu lokali.

Għal raġunijiet ta' prestazzjoni, it-tooltip u l-popover data-apis huma opt in, li jfisser li trid tinizjalizzahom lilek innifsek .

Passa fuq il-links hawn taħt biex tara l-għodda:

Erba' direzzjonijiet

Tooltips fi gruppi ta' input

Meta tuża tooltips u popovers mal-gruppi ta 'input Bootstrap, ikollok tissettja l- containergħażla (dokumentata hawn taħt) biex tevita effetti sekondarji mhux mixtieqa.

Użu

Agħmel it-tooltip permezz ta' JavaScript:

$ ( '#eżempju' ). tooltip ( għażliet )

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-animation="".

Markup

<a href = "#" data-toggle = "tooltip" title = "l-ewwel tooltip" > iddur fuqi </a>   

Metodi

$().tooltip(għażliet)

Jwaħħal tooltip handler ma' kollezzjoni ta' elementi.

.tooltip('show')

Tiżvela tooltip ta' element.

$ ( '#element' ). tooltip ( 'turi' )

.tooltip('hide')

Jaħbi tooltip ta' element.

$ ( '#element' ). tooltip ( 'ħbi' )

.tooltip('toggle')

Jiddawwar l-għodda ta' element.

$ ( '#element' ). tooltip ( 'toggle' )

.tooltip('qerda')

Jaħbi u jeqred it-tooltip ta' element.

$ ( '#element' ). tooltip ( 'eqred' )

Eżempji

Żid overlays żgħar ta 'kontenut, bħal dawk fuq l-iPad, ma' kwalunkwe element għall-akkomodazzjoni ta 'informazzjoni sekondarja. Passa fuq il-buttuna biex tiskatta l-popover. Jeħtieġ li tiġi inkluża Tooltip .

Popover statiku

Erba' għażliet huma disponibbli: fuq, lemin, qiegħ, u xellug allinjat.

L-ebda markup murija peress li popovers huma ġġenerati minn JavaScript u kontenut fi ħdan dataattribut.

Demo live

Erba' direzzjonijiet

Użu

Ippermetti popovers permezz ta' JavaScript:

$ ( '#eżempju' ). popover ( għażliet )

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-animation="".

Markup

Għal raġunijiet ta' prestazzjoni, it-Tooltip u l-Popover data-apis huma opt in. Jekk tixtieq tużahom, speċifika għażla ta' selezzjoni.

Metodi

$().popover(għażliet)

Inizjalizza popovers għal ġabra ta' elementi.

.popover('show')

Tiżvela popover ta 'elementi.

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

.popover('hide')

Jaħbi popover ta' elementi.

$ ( '#element' ). popover ( 'ħbi' )

.popover('toggle')

Tiddawwar popover tal-elementi.

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

.popover('qerda')

Jaħbi u jeqred il-popover ta' element.

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

Eżempji ta' twissijiet

Żid il-funzjonalità tat-tkeċċija mal-messaġġi kollha ta' twissija b'dan il-plugin.

Użu

Ippermetti t-tkeċċija ta' twissija permezz ta' JavaScript:

$ ( ".twissija" ). twissija ()

Markup

Żid biss data-dismiss="alert"mal-buttuna ta 'qrib tiegħek biex awtomatikament tagħti funzjonalità ta' twissija mill-qrib.

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

Metodi

$().alert()

Igeżwer it-twissijiet kollha b'funzjonalità mill-qrib. Biex it-twissijiet tiegħek janimaw meta jingħalqu, kun żgur li għandhom il- klassi .fadeu .indiġà applikati għalihom.

.alert('qrib')

Jagħlaq allert.

$ ( ".twissija" ). allert ( 'qrib' )

Avvenimenti

Il-klassi ta' twissija ta' Bootstrap tesponi ftit avvenimenti biex tgħaqqad il-funzjonalità ta' twissija.

$ ( '#twissija tiegħi' ). bind ( 'magħluq' , funzjoni () {   
  // agħmel xi ħaġa...
})

Eżempju użi

Agħmel aktar bil-buttuni. Ikkontrolla l-istati tal-buttuna jew toħloq gruppi ta 'buttuni għal aktar komponenti bħal toolbars.

Stateful

Żid data-loading-text="Loading..."biex tuża stat tat-tagħbija fuq buttuna.

<button type = "button" class = "btn btn-primary" data-loading-text = "Tagħbija..." > Stat tat-tagħbija </button>   

Toggle wieħed

Żid data-toggle="button"biex tattiva t-toggling fuq buttuna waħda.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Toggle Uniku </button>   

Checkbox

Żid data-toggle="buttons-checkbox"għat-toggling tal-istil tal-kaxxa tal-kontroll fuq btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Xellug </button>  
  <button type = "button" class = "btn btn-primary" > Nofsani </button>  
  <button type = "button" class = "btn btn-primary" > Dritt </button>  
</div>

Radju

Żid data-toggle="buttons-radio"għal toggling stil tar-radju fuq btn-group.

<div class = "btn-group" data-toggle = "buttuni-radju" >  
  <button type = "button" class = "btn btn-primary" > Xellug </button>  
  <button type = "button" class = "btn btn-primary" > Nofsani </button>  
  <button type = "button" class = "btn btn-primary" > Dritt </button>  
</div>

Użu

Ippermetti buttuni permezz ta' JavaScript:

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

Markup

L-attributi tad-dejta huma integrali għall-plugin tal-buttuna. Iċċekkja l-kodiċi eżempju hawn taħt għad-diversi tipi ta 'markup.

Għażliet

Xejn

Metodi

$().button('toggle')

Toggles push state. Jagħti lill-buttuna id-dehra li ġiet attivata.

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

$().button('tagħbija')

Issettja l-istat tal-buttuna għat-tagħbija - tiddiżattiva l-buttuna u tbiddel it-test mat-test tat-tagħbija. It-test tat-tagħbija għandu jiġi definit fuq l-element tal-buttuna bl-użu tal-attribut tad-data data-loading-text.

<button type = "button" class = "btn" data-loading-text = "jitgħabbi l-affarijiet..." > ... </button>    

$().button('reset')

Irrisettja l-istat tal-buttuna - tbiddel it-test mat-test oriġinali.

$().button(string)

Irrisettja l-istat tal-buttuna - tbiddel it-test għal kwalunkwe stat tat-test definit tad-dejta.

<button type = "button" class = "btn" data-complete-text = "lest!" > ... </button>    
<kitba>
  $ ( '.btn' ). buttuna ( 'kompleta' )
</script>

Dwar

Ikseb stili bażi u appoġġ flessibbli għal komponenti kollassabbli bħal accordions u navigazzjoni.

* Jeħtieġ li l-plugin Transitions jiġi inkluż.

Eżempju accordion

Bl-użu tal-plugin tal-kollass, bnejna widget sempliċi stil accordion:

<div class = "accordion" id = "accordion2" >  
  <div class = "grupp-accordion" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "kollass" data-parent = "#accordion2" href = "#collapseOne" >    
        Oġġett tal-Grupp #1 li jista' jiġġarraf
      </a>
    </div>
    <div id = "collapseOne" class = "kollass tal-korp akordeon fi" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "grupp-accordion" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "kollass" data-parent = "#accordion2" href = "#collapseTwo" >    
        Oġġett tal-Grupp #2 li jista' jiġġarraf
      </a>
    </div>
    <div id = "collapseTwo" class = "kollass tal-korp tal-akkordjon" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Tista 'wkoll tuża l-plugin mingħajr il-markup tal-accordion. Agħmel buttuna taqleb l-espansjoni u l-kollass ta 'element ieħor.

<button type = "button" class = "btn btn-danger" data-toggle = "kollass" data-target = "#demo" >    
  sempliċi kollassabbli
</button>
 
<div id = "demo" class = "kollass fi" > … </div>  

Użu

Via attributi tad-data

Żid biss data-toggle="collapse"u a data-targetgħall-element biex awtomatikament tassenja l-kontroll ta 'element kollassabbli. L- data-targetattribut jaċċetta selettur css biex japplika l-kollass għalih. Kun żgur li żżid il-klassi collapsemal-element kollassabbli. Jekk tixtieq li tiftaħ awtomatikament, żid il-klassi addizzjonali in.

Biex iżżid ġestjoni tal-gruppi bħal accordion ma 'kontroll kollassabbli, żid l-attribut tad-data data-parent="#selector". Irreferi għad-demo biex tara dan fl-azzjoni.

Via JavaScript

Ippermetti manwalment ma':

$ ( ". kollass" ). kollass ()

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-parent="".

Metodi

.kollass(għażliet)

Jattiva l-kontenut tiegħek bħala element kollassabbli. Jaċċetta għażliet fakultattivi object.

$ ( '#myCollapsible' ). kollass ({
  toggle : falza 
})

.kollapse('toggle')

Jitbiddel element kollassabbli biex jintwera jew moħbi.

.kollass('turi')

Juri element kollassabbli.

. kollass('ħbi')

Jaħbi element kollassabbli.

Avvenimenti

Il-klassi tal-kollass ta 'Bootstrap tesponi ftit avvenimenti għall-ganċ fil-funzjonalità tal-kollass.

$ ( '#myCollapsible' ). fuq ( 'moħbi' , funzjoni () {   
  // agħmel xi ħaġa...
})

Eżempju tal-karużell

Il-wiri ta' taħt turi plugin ġeneriku u komponent għaċ-ċikliżmu minn elementi bħal karużell.

L-ewwel tikketta Thumbnail

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" class = "slajd tal-karużell" >  
  <ol class = "indikaturi tal-karużell" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "attiva" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Oġġetti tal-karużell -->
  <div class = "carousel-inner" > 
    <div class = "oġġett attiv" > … </div> 
    <div class = "oġġett" > … </div> 
    <div class = "oġġett" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "li jmiss" > › </a>   
</div>

Użu

Via attributi tad-data

Uża l-attributi tad-dejta biex tikkontrolla faċilment il-pożizzjoni tal-karużell. data-slidejaċċetta l-kliem kjavi prevjew next, li jibdel il-pożizzjoni slide relattiva għall-pożizzjoni attwali tagħha. Inkella, uża data-slide-tobiex tgħaddi indiċi ta' slide mhux ipproċessat lill-karużell data-slide-to="2", li jaqbeż il-pożizzjoni tal-islajd għal indiċi partikolari li jibda b' 0.

Via JavaScript

Ċempel il-karużell manwalment bi:

$ ( '.carousel' ). karużell ()

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScriptz. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-interval="".

Metodi

.carousel(għażliet)

Inizjalizza l-karużell b'għażliet fakultattivi objectu jibda jiċċirkola permezz ta 'oġġetti.

$ ( '.carousel' ). karużell ({
  intervall : 2000 
})

.carousel('ċiklu')

Ċikli permezz tal-oġġetti tal-karużell mix-xellug għal-lemin.

.carousel('pawsa')

Jwaqqaf il-karużell milli jiċċirkola permezz ta' oġġetti.

.carousel(numru)

Iċċekkja l-karużell għal qafas partikolari (ibbażat fuq 0, simili għal firxa).

.carousel('prev')

Ċikli għall-oġġett preċedenti.

.carousel('li jmiss')

Ċikli għall-oġġett li jmiss.

Avvenimenti

Il-klassi tal-karużell tal-Bootstrap tesponi żewġ avvenimenti biex tgħaqqad il-funzjonalità tal-karużell.

Eżempju

Plugin bażiku, estiż faċilment għall-ħolqien malajr ta 'typeaheads eleganti bi kwalunkwe input ta' test tal-forma.

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

Int trid tissettja autocomplete="off"biex tipprevjeni l-menus tal-browser default milli jidhru fuq il-dropdown tat-tip Bootstrap.

Użu

Via attributi tad-data

Żid attributi tad-dejta biex tirreġistra element b'funzjonalità typeahead kif muri fl-eżempju ta' hawn fuq.

Via JavaScript

Ċempel lit-typeahead manwalment bi:

$ ( '.typeahead' ). ittajpja ()

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-source="".

Metodi

.typeahead(għażliet)

Inizjalizza input b'typeahead.

Eżempju

Is-subnavigazzjoni fuq ix-xellug hija demo ħaj tal-plugin affix.

Użu

Via attributi tad-data

Biex iżżid faċilment l-imġieba tat-twaħħil ma 'kwalunkwe element, żid biss data-spy="affix"mal-element li trid tispija fuqu. Imbagħad uża offsets biex tiddefinixxi meta toggle l-pinning ta 'element fuq u mitfi.

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

Via JavaScript

Ċempel il-plugin tal-affiss permezz ta' JavaScript:

$ ( '#navbar' ). waħħal ()

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-offset-top="200".