Endividyèl oswa konpile

Plugins yo ka enkli endividyèlman (menm si kèk gen depandans obligatwa), oswa tout nan yon fwa. Tou de bootstrap.js ak bootstrap.min.js genyen tout grefon nan yon sèl dosye.

Done atribi

Ou ka sèvi ak tout grefon Bootstrap piman atravè API a make san ekri yon sèl liy JavaScript. Sa a se premye API Bootstrap a epi li ta dwe premye konsiderasyon ou lè w ap itilize yon Plugin.

Sa te di, nan kèk sitiyasyon li ka dezirab fèmen fonksyonalite sa a. Se poutèt sa, nou bay tou kapasite pou enfim API atribi done yo lè nou dekonekte tout evènman ki sou non kò a ki gen `'data-api'`. Sa a sanble tankou sa a:

$ ( 'kò' ). koupe ( '.data-api' )

Altènativman, vize yon plugin espesifik, jis enkli non plugin a kòm yon espas non ansanm ak espas non done-api tankou sa a:

$ ( 'kò' ). off ( '.alert.data-api' )

Pwogram API

Nou kwè tou ou ta dwe kapab itilize tout grefon Bootstrap sèlman atravè API JavaScript. Tout API piblik yo se yon sèl, metòd chèn, epi retounen koleksyon an aji sou.

$ ( ".btn.danger" ). bouton ( "activez" ). addClass ( "grès" )

Tout metòd yo ta dwe aksepte yon opsyon opsyon opsyon, yon kòd ki vize yon metòd patikilye, oswa pa gen anyen (ki inisye yon plugin ak konpòtman default):

$ ( "#myModal" ). modal () // inisyalize ak default                       
$ ( "#myModal" ). modal ({ klavye : fo }) // inisyalize san klavye     
$ ( "#myModal" ). modal ( 'montre' ) // inisyalize epi envoke montre imedyatman                

Chak Plugin tou ekspoze konstrukteur anvan tout koreksyon li yo sou yon pwopriyete `Constructeur': $.fn.popover.Constructor. Si ou ta renmen jwenn yon egzanp plugin patikilye, rekipere li dirèkteman nan yon eleman: $('[rel=popover]').data('popover').

Pa gen konfli

Pafwa li nesesè pou itilize grefon Bootstrap ak lòt kad UI. Nan sikonstans sa yo, kolizyon espas non ka detanzantan rive. Si sa rive, ou ka rele .noConflictsou Plugin ou vle retounen valè a.

var bootstrapButton = $ . fn . bouton . noConflict () // retounen $.fn.button nan valè ki te deja asiyen 
$ . fn . bootstrapBtn = bootstrapButton             // bay $().bootstrapBtn fonksyon bootstrap la

Evènman

Bootstrap bay evènman koutim pou pifò aksyon inik plugin yo. Anjeneral, sa yo vini nan yon fòm enfinitif ak patisipan sot pase yo - kote infinitif la (egzanp show) deklanche nan kòmansman an nan yon evènman, ak fòm patisipasyon sot pase li yo (egzanp shown) se deklanche sou fini an nan yon aksyon.

Tout evènman infinitif bay fonksyon preventDefault. Sa a bay kapasite pou sispann ekzekisyon yon aksyon anvan li kòmanse.

$ ( '#myModal' ). on ( 'montre' , fonksyon ( e ) {   
    si (! done ) retounen e . preventDefault () // sispann modal yo montre   
})

Konsènan tranzisyon yo

Pou efè tranzisyon senp, enkli bootstrap-transition.js yon fwa ansanm ak lòt dosye JS yo. Si w ap itilize bootstrap.js konpile (oswa minified) , pa gen okenn nesesite pou mete sa a—li deja la.

Sèvi ak ka yo

Kèk egzanp plugin tranzisyon an:

• Glisman oswa manyak nan modal
• Fading soti onglets
• Fading soti alèt yo
• Glisman panno Carousel

Egzanp yo

Modèl yo rasyonalize, men fleksib, envit dyalòg ak fonksyonalite minimòm ki nesesè yo ak default entelijan.

Egzanp estatik

Yon modal rann ak header, kò, ak seri aksyon nan pye a.

<div class = "modal kache fennen" > 
  <div class = "modal-header" > 
    <button type = "bouton" class = "fèmen" data-dismiss = "modal" aria-hidden = "vre" > × </boutton>    
    <h3> Tèt modal </h3>
  </div>
  <div class = "modal-body" > 
    <p> Yon bèl kò... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Fèmen </a>  
    <a href = "#" class = "btn btn-primary" > Sove chanjman yo </a>  
  </div>
</div>

Live Demo

Aktive yon modal atravè JavaScript lè w klike sou bouton ki anba a. Li pral glise desann ak fennen soti nan tèt paj la.

<!-- Bouton pou deklanche modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Lanse demo modal </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal kache fade" tabindex = "-1" rol = "dyalòg" aria-labelledby = "myModalLabel" aria-hidden = "vre" >      
  <div class = "modal-header" > 
    <button tip = "bouton" class = "fèmen" data-dismiss = "modal" aria-hidden = "vre" > × </button>    
    <h3 id = "myModalLabel" > Tèt modal </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Yon bèl kò... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Fèmen </button>   
    <button class = "btn btn-primary" > Sove chanjman yo </button> 
  </div>
</div>

Itilizasyon

Via atribi done yo

Aktive yon modal san w pa ekri JavaScript. Mete data-toggle="modal"sou yon eleman kontwolè, tankou yon bouton, ansanm ak yon data-target="#foo"oswa href="#foo"pou vize yon modal espesifik pou activer.

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

Via JavaScript

Rele yon modal ak id myModalak yon sèl liy JavaScript:

$ ( '#myModal' ). modal ( opsyon )

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-backdrop="".

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

Metòd

.modal(opsyon)

Aktive kontni ou kòm yon modal. Aksepte yon opsyon opsyonèl object.

$ ( '#myModal' ). modal ({
  klavye : fo 
})

.modal('toggle')

Manyèlman aktive yon modal.

$ ( '#myModal' ). modal ( 'toggle' )

.modal('montre')

Manyèlman ouvè yon modal.

$ ( '#myModal' ). modal ( 'montre' )

.modal('kache')

Manyèlman kache yon modal.

$ ( '#myModal' ). modal ( 'kache' )

Evènman

Klas modal Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite modal.

$ ( '#myModal' ). on ( 'kache' , fonksyon () {   
  // fè yon bagay…
})

Egzanp yo

Ajoute meni deroulan nan prèske nenpòt bagay ak senp plugin sa a, ki gen ladan navbar la, onglè, ak grenn.

Nan yon navbar

Nan onglè

Itilizasyon

Via atribi done yo

Ajoute data-toggle="dropdown"nan yon lyen oswa bouton pou aktive yon deroulan.

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

Pou kenbe URL yo entak, sèvi ak data-targetatribi a olye pou yo href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" rol = "bouton" 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

Rele dropdowns yo atravè JavaScript:

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

Opsyon

Okenn

Metòd

$().dropdown('toggle')

Yon API pwogramasyon pou chanje meni pou yon ba nav oswa navigasyon onglet.

Egzanp nan navbar

Plugin ScrollSpy a se pou mete ajou otomatikman sib navigasyon ki baze sou pozisyon woulo liv la. Scroll zòn ki anba a navbar epi gade chanjman nan klas aktif. Sou atik yo deroule yo pral make tou.

Itilizasyon

Via atribi done yo

Pou fasilman ajoute konpòtman scrollspy nan navigasyon topbar ou a, jis ajoute data-spy="scroll"nan eleman ou vle al rekonèt sou (pi tipikman sa a ta dwe kò a) epi data-target=".navbar"chwazi ki navigasyon yo itilize. Ou pral vle sèvi ak scrollspy ak yon .naveleman.

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

Via JavaScript

Rele scrollspy via JavaScript:

$ ( '#navbar' ). scrollspy ()

Metòd

.scrollspy('refresh')

Lè w ap itilize scrollspy ansanm ak ajoute oswa retire eleman nan DOM, w ap bezwen rele metòd rafrechisman an konsa:

$ ( '[data-spy="scroll"]' ). chak ( fonksyon () {  
  var $espyon = $ ( sa a ). scrollspy ( 'refresh' )
});

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-offset="".

Evènman

Onglet egzanp

Ajoute fonksyonalite rapid, dinamik tab pou tranzisyon atravè fenèt kontni lokal yo, menm atravè meni dewoulan.

Itilizasyon

Pèmèt onglè tabulab yo atravè JavaScript (yo bezwen chak tab aktive endividyèlman):

$ ( '#myTab a' ). klike sou ( fonksyon ( e ) {  
  e . preventDefault ();
  $ ( sa a ). tab ( 'montre' );
})

Ou ka aktive onglè endividyèl yo nan plizyè fason:

$ ( '#myTab a[href="#profile"]' ). tab ( 'montre' ); // Chwazi tab pa non 
$ ( '#myTab a:first' ). tab ( 'montre' ); // Chwazi premye tab 
$ ( '#myTab a:last' ). tab ( 'montre' ); // Chwazi dènye tab 
$ ( '#myTab li:eq(2) a' ). tab ( 'montre' ); // Chwazi twazyèm tab (0-endèks) 

Marke

Ou ka aktive yon tab oswa navigasyon grenn san yo pa ekri okenn JavaScript pa senpleman espesifye data-toggle="tab"oswa data-toggle="pill"sou yon eleman. Ajoute navak nav-tabsklas yo nan tab la ulpral aplike manier tab Bootstrap la.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Kay </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profile </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Mesaj </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Anviwònman </a></li>  
</ul>

Metòd

$().tab

Aktive yon eleman tab ak yon veso kontni. Tab ta dwe gen swa yon data-targetoswa yon hrefvize yon ne veso nan DOM la.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Kay </a></li>  
  <li><a href = "#profile" > Profile </a></li> 
  <li><a href = "#messages" > Mesaj </a></li> 
  <li><a href = "#settings" > Anviwònman </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "kay" > ... </div>  
  <div class = "tab-pane" id = "pwofil" > ... </div>  
  <div class = "tab-pane" id = "mesaj" > ... </div>  
  <div class = "tab-pane" id = "anviwònman" > ... </div>  
</div>
 
<script>
  $ ( fonksyon () {  
    $ ( '#myTab a:last' ). tab ( 'montre' );
  })
</script>

Evènman

$ ( 'a[data-toggle="tab"]' ). on ( 'montre' , fonksyon ( e ) {   
  e . sib // aktive tab
  e . relatedTarget // tab anvan
})

Egzanp yo

Enspire pa ekselan plugin jQuery.tipsy ekri pa Jason Frame; Ti konsèy yo se yon vèsyon mete ajou, ki pa konte sou imaj, sèvi ak CSS3 pou animasyon, ak done-atribi pou estokaj tit lokal yo.

Pou rezon pèfòmans, konsèy zouti a ak popover done-apis yo patisipe, sa vle di ou dwe inisyalize yo tèt ou .

Pase sou lyen ki anba yo pou wè konsèy sou zouti:

Kat direksyon

Konsèy zouti nan gwoup opinyon

Lè w ap itilize konsèy ak popovers ak gwoup opinyon Bootstrap yo, ou pral oblije mete containeropsyon (ki dokimante anba a) pou evite efè segondè vle.

Itilizasyon

Deklanche konsèy zouti a atravè JavaScript:

$ ( '#egzanp' ). ti konsèy ( opsyon )

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-animation="".

Marke

<a href = "#" data-toggle = "tooltip" title = "premye tooltip" > pase sou mwen </a>   

Metòd

$().tooltip(opsyon)

Tache yon moun ki okipe enfòmasyon sou yon koleksyon eleman.

.tooltip('montre')

Revele konsèy zouti yon eleman.

$ ( '#eleman' ). ti konsèy ( 'montre' )

.tooltip('kache')

Kache konsèy yon eleman.

$ ( '#eleman' ). ti konsèy ( 'kache' )

.tooltip('toggle')

Aktivite konsèy zouti yon eleman.

$ ( '#eleman' ). konsèy zouti ( 'bale' )

.tooltip('detwi')

Kache epi detwi ti konsèy yon eleman.

$ ( '#eleman' ). konsèy zouti ( 'detwi' )

Egzanp yo

Ajoute ti kouvri kontni, tankou sa yo sou iPad a, nan nenpòt eleman pou lojman segondè enfòmasyon. Pase sou bouton an pou deklanche popover a. Egzije Tooltip yo dwe enkli.

Popover estatik

Gen kat opsyon ki disponib: anwo, adwat, anba, ak aliye agoch.

Pa gen okenn maketing ki parèt kòm popover yo pwodwi nan JavaScript ak kontni nan yon dataatribi.

Live Demo

Kat direksyon

Itilizasyon

Pèmèt popovers via JavaScript:

$ ( '#egzanp' ). popover ( opsyon )

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-animation="".

Marke

Pou rezon pèfòmans, Tooltip ak Popover done-apis yo patisipe nan. Si ou ta renmen itilize yo jis presize yon opsyon seleksyon.

Metòd

$().popover(opsyon)

Inisyalize popovers pou yon koleksyon eleman.

.popover('montre')

Revele yon popover eleman.

$ ( '#eleman' ). popover ( 'montre' )

.popover('kache')

Kache yon popover eleman.

$ ( '#eleman' ). popover ( 'kache' )

.popover('toggle')

Baskile yon popover eleman.

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

.popover('detwi')

Kache epi detwi popover yon eleman.

$ ( '#eleman' ). popover ( 'detwi' )

Egzanp alèt

Ajoute fonksyonalite ranvwaye nan tout mesaj alèt ak plugin sa a.

Itilizasyon

Pèmèt ranvwa yon alèt via JavaScript:

$ ( ".alèt" ). alèt ()

Marke

Jis ajoute data-dismiss="alert"nan bouton fèmen ou a otomatikman bay yon fonksyonalite fèmen alèt.

<a class = "close" data-dismiss = "alèt" href = "#" > × </a>   

Metòd

$().alèt()

Anvlope tout alèt ak fonksyonalite fèmen. Pou gen alèt ou yo anime lè yo fèmen, asire w ke yo gen .fadeak .inklas la deja aplike nan yo.

.alèt('fèmen')

Fèmen yon alèt.

$ ( ".alèt" ). alèt ( 'fèmen' )

Evènman

Klas alèt Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite alèt.

$ ( '#alèt mwen an' ). bind ( 'fèmen' , fonksyon () {   
  // fè yon bagay…
})

Egzanp itilizasyon

Fè plis ak bouton. Kontwole eta bouton oswa kreye gwoup bouton pou plis konpozan tankou ba zouti.

Stateful

Ajoute data-loading-text="Loading..."pou itilize yon eta chaje sou yon bouton.

<button type = "button" class = "btn btn-primary" data-loading-text = "Chaje..." > Eta a chaje </button>   

Single baskile

Ajoute data-toggle="button"pou aktive baskile sou yon sèl bouton.

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

Case

Ajoute data-toggle="buttons-checkbox"pou chanje style kaz sou btn-group.

<div class = "btn-group" data-toggle = "bouton-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Goch </button>  
  <button type = "button" class = "btn btn-primary" > Mwayen </button>  
  <button type = "button" class = "btn btn-primary" > Dwa </button>  
</div>

Radyo

Ajoute data-toggle="buttons-radio"pou chanje style radyo sou btn-group.

<div class = "btn-group" data-toggle = "bouton-radio" >  
  <button type = "button" class = "btn btn-primary" > Goch </button>  
  <button type = "button" class = "btn btn-primary" > Mwayen </button>  
  <button type = "button" class = "btn btn-primary" > Dwa </button>  
</div>

Itilizasyon

Aktive bouton via JavaScript:

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

Marke

Done atribi yo se entegral nan plugin bouton an. Tcheke kòd egzanp ki anba a pou divès kalite maketing yo.

Opsyon

Okenn

Metòd

$().bouton('toggle')

Baskile pouse eta a. Bay bouton an aparans ke li te aktive.

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

$().bouton('chaje')

Mete eta bouton an chaj - enfim bouton ak echanj tèks nan tèks chaje. Tèks chaje yo ta dwe defini sou eleman bouton an lè l sèvi avèk atribi done yo data-loading-text.

<button type = "button" class = "btn" data-loading-text = "chaje bagay..." > ... </button>    

$().bouton('reset')

Reyajiste eta bouton - chanje tèks nan tèks orijinal la.

$().bouton(string)

Reyajiste eta bouton - echanj tèks nan nenpòt eta done defini tèks.

<button type = "bouton" class = "btn" done-complete-text = "fini!" > ... </boutton>    
<script>
  $ ( '.btn' ). bouton ( 'konplè' )
</script>

Konsènan

Jwenn estil de baz ak sipò fleksib pou konpozan rabat tankou akòdeyon ak navigasyon.

* Egzije Plugin Tranzisyon yo dwe enkli.

Egzanp akòdeyon

Sèvi ak plugin efondreman an, nou bati yon senp widget style akòdeyon:

<div class = "akòdeyon" id = "akòdeyon2" >  
  <div class = "akòdeyon-group" > 
    <div class = "akòdeyon-tèt" > 
      <a class = "accordion-toggle" data-toggle = "effondreman" data-parent = "#accordion2" href = "#collapseOne" >    
        Atik gwoup ki plizye #1
      </a>
    </div>
    <div id = "collapseOne" class = "kò akòdeyon tonbe nan" >  
      <div class = "akòdeyon-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "akòdeyon-group" > 
    <div class = "akòdeyon-tèt" > 
      <a class = "accordion-toggle" data-toggle = "effondreman" data-parent = "#accordion2" href = "#collapseTwo" >    
        Atik #2 Gwoup Repliable
      </a>
    </div>
    <div id = "collapseTwo" class = "akòdeyon kò kraze" >  
      <div class = "akòdeyon-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Ou kapab tou itilize plugin a san mak akòdeyon an. Fè yon bouton aktive agrandi ak tonbe nan yon lòt eleman.

<button type = "bouton" class = "btn btn-danger" data-toggle = "effondreman " data-target = "#demo" >    
  senp pliable
</boutton>
 
<div id = "demo" klas = "effondreman nan" > … </div>  

Itilizasyon

Via atribi done yo

Jis ajoute data-toggle="collapse"ak yon data-targeteleman pou otomatikman bay kontwòl yon eleman ki rabat. Atribi a data-targetaksepte yon seleksyon CSS pou aplike efondreman an. Asire ou ke ou ajoute klas collapsela nan eleman ki rabat. Si ou ta renmen li louvri defo, ajoute klas adisyonèl la in.

Pou ajoute jesyon gwoup ki sanble ak akòdeyon nan yon kontwòl ki kapab retire, ajoute atribi done yo data-parent="#selector". Al gade nan Demo a pou wè sa a an aksyon.

Via JavaScript

Pèmèt manyèlman ak:

$ ( ".effondreman" ). tonbe ()

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-parent="".

Metòd

.effondreman (opsyon)

Aktive kontni ou kòm yon eleman plim. Aksepte yon opsyon opsyonèl object.

$ ( '#myCollapsible' ). tonbe ({
  toggle : fo 
})

.effondre ('bale')

Baskile yon eleman ki rabat pou montre oswa kache.

.collapse('montre')

Montre yon eleman rabat.

.effondre ('kache')

Kache yon eleman ki rabat.

Evènman

Klas efondreman Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite efondreman.

$ ( '#myCollapsible' ). on ( 'kache' , fonksyon () {   
  // fè yon bagay…
})

Egzanp Carousel

Slideshow ki anba a montre yon plugin jenerik ak eleman pou monte bisiklèt nan eleman tankou yon Carousel.

Premye etikèt miniature

Cras justo odio, dapibus ac facilitis 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 = "glise Carousel" >  
  <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>
  <!-- Atik Carousel -->
  <div class = "carousel-inner" > 
    <div class = "atik aktif" > … </div> 
    <div class = "atik" > … </div> 
    <div class = "atik" > … </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>

Itilizasyon

Via atribi done yo

Sèvi ak atribi done yo fasil kontwole pozisyon nan Carousel la. data-slideaksepte mo kle yo prevoswa next, ki chanje pozisyon glise an parapò ak pozisyon aktyèl li a. Altènativman, sèvi ak data-slide-toyo pase yon endèks glise anvan tout koreksyon nan Carousel la data-slide-to="2", ki so nan pozisyon an glise nan yon endèks patikilye kòmanse ak 0.

Via JavaScript

Rele Carousel manyèlman ak:

$ ( '.carousel' ). Carousel ()

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScriptz. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-interval="".

Metòd

.carousel(opsyon)

Inisyalize Carousel la ak yon opsyon opsyonèl objectepi kòmanse monte bisiklèt nan atik yo.

$ ( '.carousel' ). Carousel ({
  entèval : 2000 
})

.carousel('sik')

Fè sik nan atik yo Carousel de goch a dwat.

.carousel('poz')

Sispann Carousel la soti nan monte bisiklèt nan atik yo.

.carousel(nimewo)

Cycles Carousel la nan yon ankadreman patikilye (0 ki baze sou, menm jan ak yon etalaj).

.carousel('prev')

Cycles pou atik anvan an.

.carousel('pwochen')

Cycles pou atik kap vini an.

Evènman

Klas Carousel Bootstrap la ekspoze de evènman pou branche nan fonksyonalite Carousel.

Egzanp

Yon plugin debaz, fasil pwolonje pou kreye byen vit tipaheads elegant ak nenpòt ki antre tèks fòm.

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

Ou pral vle mete autocomplete="off"pou anpeche meni navigatè default parèt sou deroule Bootstrap typeahead la.

Itilizasyon

Via atribi done yo

Ajoute atribi done pou anrejistre yon eleman ak fonctionnalités typeahead jan yo montre nan egzanp ki anwo a.

Via JavaScript

Rele typeahead manyèlman ak:

$ ( '.typeahead' ). tape devan ()

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-source="".

Metòd

.typeahead(opsyon)

Inisyalize yon opinyon ak yon typeahead.

Egzanp

Subnavigation sou bò gòch la se yon demonstrasyon ap viv nan plugin afiks la.

Itilizasyon

Via atribi done yo

Pou fasilman ajoute konpòtman apoze nan nenpòt eleman, jis ajoute data-spy="affix"nan eleman ou vle al rekonèt sou. Lè sa a, sèvi ak desantre yo defini lè yo aktive pinning nan yon eleman sou yo ak koupe.

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

Via JavaScript

Rele plugin afiks la atravè JavaScript:

$ ( '#navbar' ). apoze ()

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-offset-top="200".