Ankorankoro anaasɛ wɔaboaboa ano

Wobetumi de plugins aka ho mmiako mmiako (ɛwom sɛ ebinom ahwehwɛ sɛ wɔde wɔn ho to so), anaasɛ ne nyinaa prɛko pɛ. Bootstrap.js ne bootstrap.min.js nyinaa kura plugins nyinaa wɔ fael biako mu.

Data su ahorow

Wubetumi de Bootstrap plugins nyinaa adi dwuma denam markup API no so ara kwa a worenkyerɛw JavaScript line biako mpo. Eyi yɛ Bootstrap API a edi kan no na ɛsɛ sɛ ɛyɛ nea edi kan a wususuw ho bere a wode plugin redi dwuma no.

Ɛno akyi no, wɔ tebea horow bi mu no, ebia ɛbɛyɛ papa sɛ wudum saa dwumadi yi. Enti, yɛsan nso ma tumi a yɛde besiw data attribute API no ano denam nsɛm a esisi nyinaa a wobeyi afi nipadua no din a wɔde `'data-api'` ahyɛ mu no so. Eyi te sɛ eyi:

$ ( 'nipadua' ). off ( '.data-api' ) na ɛwɔ hɔ.

Sɛnea ɛbɛyɛ a, sɛ wopɛ sɛ wode w’ani si plugin pɔtee bi so a, fa plugin no din ka ho kɛkɛ sɛ dinbea ka data-api dinbea no ho te sɛ eyi:

$ ( 'nipadua' ). off ( '.akɔbɔ.data-api' ) .

Dwumadie API

Yɛsan nso gye di sɛ ɛsɛ sɛ wutumi de Bootstrap plugins nyinaa di dwuma denam JavaScript API no so ara kwa. Ɔmanfoɔ API nyinaa yɛ akwan baako, a wɔde nkɔnsɔnkɔnsɔn gu so, na ɛsan de nneɛma a wɔaboaboa ano a wɔayɛ ho adwuma no ba.

$ ( ".btn.asiane" ). bɔtɔn ( "toggle" ). addKlas ( "srade" ) .

Ɛsɛ sɛ akwan nyinaa gye optional options ade, ahama a ɛde n’ani si ɔkwan pɔtee bi so, anaasɛ biribiara (a ɛhyɛ plugin ase a ɛwɔ default suban):

$ ( "#meModal" ). modal () // wɔde default ahorow ahyɛ ase                       
$ ( "#meModal" ). modal ({ keyboard : atoro }) // ahyɛ aseɛ a keyboard biara nni mu     
$ ( "#meModal" ). modal ( 'show' ) // hyɛ ase na ɛfrɛ kyerɛ ntɛm ara                

Plugin biara nso da ne raw constructor adi wɔ `Constructor` agyapade bi so: $.fn.popover.Constructor. Sɛ wopɛ sɛ wonya plugin nhwɛso pɔtee bi a, gye no tẽẽ fi element bi mu: $('[rel=popover]').data('popover').

Ntawntawdi Biara Nni Hɔ

Ɛtɔ da bi a ɛho hia sɛ wode Bootstrap plugins di dwuma ne UI frameworks afoforo. Wɔ saa tebea horow yi mu no, edin-ahunmu nhyiam betumi aba bere ne bere mu. Sɛ eyi ba a, wubetumi afrɛ .noConflictplugin a wopɛ sɛ wosan de bo no ba no.

var bootstrapBɔtɔn = $ . fn . bɔtɔn no . noConflict () // san $.fn.button kɔ botae a wɔadi kan de ama no so 
$ . fn . bootstrapBtn = bootstrapButton             // ma $().bootstrapBtn bootstrap dwumadie no

Nsɛm a esisi

Bootstrap de nsɛm a esisi a wɔahyɛ da ayɛ ma plugin no nneyɛe soronko dodow no ara. Mpɛn pii no, eyinom ba wɔ infinitive ne past participle kwan so - faako a infinitive (ex. show) no kanyan wɔ adeyɛ bi mfiase, na ne past participle kwan (ex. shown) no kanyan bere a adeyɛ bi awie no.

Nsɛm a esisii a enni awiei nyinaa ma preventDefault dwumadie. Eyi ma wotumi gyina adeyɛ bi a wɔyɛ no ano ansa na afi ase.

$ ( '#meModal' ). on ( 'kyerɛ' , dwumadie ( e ) { .   
    sɛ (! data ) san ba e . preventDefault () // gyae modal a wɔde bɛkyerɛ   
}) na .

Ɛfa nsakrae ahorow ho

Sɛ wopɛ nsakrae nsunsuanso a ɛnyɛ den a, fa bootstrap-transition.js ka JS fael afoforo no ho pɛnkoro. Sɛ wode bootstrap.js a wɔaboaboa ano (anaasɛ wɔayɛ no ketewaa) no redi dwuma a , ɛho nhia sɛ wode eyi bɛka ho—ɛwɔ hɔ dedaw.

Fa nsɛm a wɔakyerɛw di dwuma

Nsakraeɛ plugin no ho nhwɛsoɔ kakra:

• Sliding anaasɛ fading wɔ modals mu
• Fading a ɛwɔ tabs no mu
• Fading out kɔkɔbɔ ahorow
• Carousel panes a wɔde twetwe nneɛma

Nhwɛso ahorow

Modals no yɛ streamlined, nanso ɛyɛ mmerɛw, nkɔmmɔbɔ nsɛm a ɛkyerɛ a ɛwɔ dwumadie a ɛsua koraa a wɔhwehwɛ ne smart defaults.

Static nhwɛso

Modal a wɔakyerɛ ase a ɛwɔ atiri, nipadua, ne nneyɛe ahorow a wɔahyehyɛ wɔ ase hɔ.

<div adesuakuw = "modal hide fade" > 
  <div adesuakuw = "modal-atiri" > 
    <button type = "button" class = "to" data-dismiss = "modal" aria-hidden = "nokware" > &mmere; </button> no ho    
    <h3> Modal asɛmti </h3>
  </div> no
  <div adesuakuw = "modal-nipadua" > 
    <p> Nipadua pa biako... </p>
  </div> no
  <div adesuakuw = "modal-nan ase" > 
    <a href = "#" adesuakuw = "btn" > To mu </a>  
    <a href = "#" class = "btn btn-primary" > Sie nsakraeɛ </a>  
  </div> no
</div> no

Live demo a ɛwɔ hɔ

Toggle a modal via JavaScript denam button a ɛwɔ ase ha no a wobɛma so. Ɛbɛtwetwe akɔ fam na ɛbɛyera afi kratafa no atifi.

<!-- Button a ɛbɛkanyan modal -->
<a href = "#myModal" dwumadie = "bɔtn" adesuakuw = "btn" data-toggle = "modal" > Fi ase demo modal </a>    
 
<!-- Modal --> a ɛyɛ nwonwa
<div id = "meModal" adesuakuw = "modal hide fade" tabindex = "-1" dwuma = "nkɔmmɔbɔ" aria-labelledby = "meModalLabel" aria-hidden = "nokware" >      
  <div adesuakuw = "modal-atiri" > 
    <button type = "button" class = "to" data-dismiss = "modal" aria-hidden = "nokware" > × </button>    
    <h3 id = "myModalLabel" > Modal asɛmti </h3> 
  </div> no
  <div adesuakuw = "modal-nipadua" > 
    <p> Nipadua pa biako... </p>
  </div> no
  <div adesuakuw = "modal-nan ase" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "nokware" > Ka </button> mu   
    <button class = "btn btn-primary" > Sie nsakraeɛ </button> 
  </div> no
</div> no

Sɛnea wɔde di dwuma

Via data su ahorow so

Fa modal bi yɛ adwuma a wonkyerɛw JavaScript. Fa data-toggle="modal"si controller element bi so, te sɛ button, ne a data-target="#foo"anaasɛ href="#foo"sɛ wode besi modal pɔtee bi so sɛ wobɛdannan.

<button type = "button" data-toggle = "modal" data-botae = "#myModal" > Fi ase modal </button>   

Ɛdenam JavaScript so

Frɛ modal a ɛwɔ id myModala ɛwɔ JavaScript line biako:

$ ( '#meModal' ). modal ( nneɛma a wobetumi apaw ) .

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-backdrop="".

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

Akwan a wɔfa so yɛ

.modal(nneɛma a wobetumi apaw) .

Ɛma wo nsɛm no yɛ adwuma sɛ modal. Gye akwan a wubetumi apaw bi tom object.

$ ( '#meModal' ). ɔkwan a wɔfa so yɛ ade ({
  keyboard : atoro 
}) na .

.modal('dannan') .

Nsaano toggles a modal.

$ ( '#meModal' ). modal ( 'nsakrae' ) .

.modal('kyerɛ') .

Nsaano bue modal bi.

$ ( '#meModal' ). modal ( 'kyerɛ' ) .

.modal('de sie') .

Nsaano de sie modal bi.

$ ( '#meModal' ). modal ( 'de sie' ) .

Nsɛm a esisi

Bootstrap no modal adesuakuw no da nsɛm kakraa bi a esisii adi ma hooking kɔ modal dwumadi mu.

$ ( '#meModal' ). on ( 'ahintaw' , adwuma () { .   
  // yɛ biribi...
}) na .

Nhwɛso ahorow

Fa dropdown menus ka ɛkame ayɛ sɛ biribiara ho denam saa plugin a ɛnyɛ den yi so, a navbar, tabs, ne pills ka ho.

Wɔ navbar bi mu

Wɔ tabs mu

Sɛnea wɔde di dwuma

Via data su ahorow so

Fa ka data-toggle="dropdown"link anaa button bi ho na dannan dropdown bi.

<div class = "a ɛwɔ ase hɔ" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Nneɛma a wɔde gu fam a ɛkanyan </a>   
  <ul class = "dropdown-menu" dwumadie = "menu" aria-a wɔde ahyɛnsodeɛ = "dLabel" >   
    ...
  </ul>
</div> no

Sɛ wopɛ sɛ URL ahorow no kɔ so tra hɔ a, fa data-targetsu no di dwuma sen sɛ wode bedi dwuma href="#".

<div class = "a ɛwɔ ase hɔ" > 
  <a class = "afiri-a-ɛkɔ soro" id = "dLabel" dwumadie = "button" data-toggle = "afiri ase" data-botaeɛ = "#" href = "/kratafa.html" >      
    Dropdown a ɛwɔ hɔ
    <b adesuakuw = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" dwumadie = "menu" aria-a wɔde ahyɛnsodeɛ = "dLabel" >   
    ...
  </ul>
</div> no

Ɛdenam JavaScript so

Frɛ nsɛm a ɛwɔ ase hɔ no denam JavaScript so:

$ ( '.asɛm a ɛwɔ ase-toggle' ). a ɛwɔ ase hɔ () .

Nneɛma a wubetumi apaw

Ɛnyɛ ebiara

Akwan a wɔfa so yɛ

$().dropdown('dannan') .

Programmatic api a wɔde toggling menus ma navbar anaa tabbed navigation a wɔde ama.

Nhwɛso wɔ navbar mu

ScrollSpy plugin no yɛ ma nav botae ahorow a egyina scroll gyinabea so no yɛ foforo ankasa. Twe beae a ɛwɔ navbar no ase no na hwɛ adesuakuw a ɛreyɛ adwuma no nsakrae. Wɔbɛtwe adwene asi nneɛma a ɛwɔ dropdown sub no so nso.

Sɛnea wɔde di dwuma

Via data su ahorow so

Sɛnea ɛbɛyɛ a ɛbɛyɛ mmerɛw sɛ wode scrollspy suban bɛka wo topbar navigation ho no, fa ka data-spy="scroll"element a wopɛ sɛ wohwɛ so no ho kɛkɛ (mpɛn pii no eyi bɛyɛ nipadua no) na data-target=".navbar"woapaw nav a wode bedi dwuma. Wobɛpɛ sɛ wode scrollspy a ɛwɔ .navcomponent bi di dwuma.

<nipadua data-spy = "nkyerɛw" data-botae = ".navbar" > ... </nipadua>  

Ɛdenam JavaScript so

Frɛ nhoma mmobɔwee no denam JavaScript so:

$ ( '#navbar' ). nhoma mmobɔwee () .

Akwan a wɔfa so yɛ

.scrollspy('yɛ foforo') .

Sɛ wode scrollspy di dwuma de ka nneɛma a wode bɛka ho anaa woayi afi DOM no mu ho a, ɛho behia sɛ wofrɛ refresh kwan no te sɛ saa:

$ ( '[data-spy="nkyerɛwee"]' ). biara ( adwuma () { .  
  var $spy = $ ( eyi ). scrollspy ( 'yɛ foforo' ) .
});

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-offset="".

Nsɛm a esisi

Nhwɛso tab ahorow

Fa tab dwumadie a ɛyɛ ntɛm a ɛyɛ nnam ka ho ma nsakraeɛ fa panes a ɛwɔ mpɔtam hɔ nsɛm mu, mpo denam dropdown menus so.

Sɛnea wɔde di dwuma

Ma tabable tabs no nyɛ adwuma denam JavaScript so (ɛsɛ sɛ wode tab biara yɛ adwuma mmiako mmiako):

$ ( '# meTab a' ). klik ( adwuma ( e ) { .  
  e . siw Default ano ();
  $ ( eyi ). tab ( 'kyerɛ' );
}) na .

Wubetumi ayɛ tab ankorankoro adwuma wɔ akwan horow pii so:

$ ( '# meTab a[href="#nsɛmpa"]' ). tab ( 'kyerɛ' ); // Paw tab no denam din so 
$ ( '# meTab a:nea edi kan' ). tab ( 'kyerɛ' ); // Paw tab a edi kan 
$ ( '# meTab a:a etwa to' ). tab ( 'kyerɛ' ); // Paw tab a etwa to 
$ ( '# meTab li: eq (2) a' ). tab ( 'kyerɛ' ); // Paw tab a ɛto so abiɛsa (0-indexed) . 

Markup a wɔde hyɛ agyirae

Wubetumi ama tab anaa pill navigation ayɛ adwuma a worenkyerɛw JavaScript biara denam element bi a wobɛkyerɛ ara kwa data-toggle="tab"anaasɛ wobɛka so. data-toggle="pill"Sɛ wode navne nav-tabsadesua ahorow no ka tab ulno ho a, ɛbɛma Bootstrap tab no styling no adi dwuma.

<ul adesuakuw = "nav nav-tabs" > 
  <li><a href = "#fie" data-toggle = "tab" > Fie </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Nsɛm a ɛfa ho </a></li>  
  <li><a href = "#nkrasɛm" data-toggle = "tab" > Nkrasɛm </a></li>  
  <li><a href = "#nhyehyɛe" data-toggle = "tab" > Nsiesiei </a></li>  
</ul>

Akwan a wɔfa so yɛ

$().tab no ho nsɛm

Ɛma tab element ne nsɛm a ɛwɔ mu no yɛ adwuma. Ɛsɛ sɛ tab nya a data-targetanaasɛ hreftargeting a container node wɔ DOM no mu.

<ul adesuakuw = "nav nav-tabs" id = "meTab" >  
  <li adesuakuw = "yɛ adwuma" ><a href = "#fie" > Fie </a></li>  
  <li><a href = "#profile" > Nsɛm a ɛfa ho </a></li> 
  <li><a href = "#nkrasɛm" > Nkrasɛm </a></li> 
  <li><a href = "#nhyehyɛe" > Nsiesiei </a></li> 
</ul>
 
<div adesuakuw = "tab-nsɛm" > 
  <div adesuakuw = "tab-pane a ɛyɛ adwuma" id = "fie" > ... </div>  
  <div adesuakuw = "tab-pane" id = "fael" > ... </div>  
  <div adesuakuw = "tab-pane" id = "nkrasɛm" > ... </div>  
  <div adesuakuw = "tab-pane" id = "nhyehyɛe" > ... </div>  
</div> no
 
<nkyerɛwee>
  $ ( dwumadie () { .  
    $ ( '# meTab a:a etwa to' ). tab ( 'kyerɛ' );
  }) na .
</script>

Nsɛm a esisi

$ ( 'a [data-toggle="tab"]' ). on ( 'wɔakyerɛ' , adwuma ( e ) { .   
  e . target // tab a wɔayɛ no adwuma
  e . relatedTarget // tab a atwam no
}) na .

Nhwɛso ahorow

Wɔde jQuery.tipsy plugin a eye kyɛn so a Jason Frame kyerɛwee no na ɛkanyan no; Nnwinnade ho nsɛm yɛ nkyerɛase a wɔayɛ no foforo, a ɛnyɛ mfonini so, ɛde CSS3 di dwuma ma animations, ne data-attributes ma local title storage.

Esiane adwumayɛ nti, adwinnade no ne popover data-apis no yɛ opt in, a ɛkyerɛ sɛ ɛsɛ sɛ w’ankasa wohyɛ ase .

Fa wo nsa hyɛ link ahorow a ɛwɔ ase ha no so na wubehu nnwinnade ho nyansahyɛ ahorow:

Akwankyerɛ anan

Nnwinnade ho afotu wɔ nsɛm a wɔde hyɛ mu akuw mu

Sɛ wode nnwinnadeɛ ne popovers redi dwuma ne Bootstrap input akuo no a, ɛbɛhia sɛ wo hyehyɛ container(wɔakyerɛw wɔ aseɛ ha) option no na woakwati nsunsuansoɔ bɔne a wompɛ.

Sɛnea wɔde di dwuma

Fa JavaScript so na ɛkanyan adwinnade no:

$ ( '#nhwɛso' ). adwinnade ho nsɛm ( akwan horow ) .

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-animation="".

Markup a wɔde hyɛ agyirae

<a href = "#" data-toggle = "adwinnade ho nkyerɛkyerɛmu" title = "adwinnade a edi kan" > fa wo ho to me so </a>   

Akwan a wɔfa so yɛ

$().adwinnade ho nsɛm(a wobɛpaw) .

Fa adwinnade a wɔde di dwuma no bata element ahorow a wɔaboaboa ano ho.

.adwinnade ho nsɛm('kyerɛ') .

Ɛda element bi adwinnade ho nsɛm adi.

$ ( '#adeɛ' ). adwinnade ho nsɛm ( 'kyerɛ' ) .

.adwinnade ho nsɛm('hide') .

Fa element bi adwinnade ho nsɛm sie.

$ ( '#adeɛ' ). adwinnade ho nsɛm ( 'hide' ) .

.adwinnade ho nsɛm('toggle') .

Toggles element bi adwinnade ho nsɛm.

$ ( '#adeɛ' ). adwinnade ho nsɛm ( 'toggle' ) .

.tooltip('sɛe') .

Hide na ɛsɛe element bi adwinnade tip.

$ ( '#adeɛ' ). adwinnade ho nsɛm ( 'sɛe' ) .

Nhwɛso ahorow

Fa nsɛm nketenkete a wɔde akata so, te sɛ nea ɛwɔ iPad no so, ka element biara a wode bɛfa nsɛm a ɛto so abien no ho. Fa wo nsa hyɛ bɔtn no so na ama popover no ayɛ kɛse. Ɛhwehwɛ sɛ wɔde Tooltip ka ho.

Popover a ɛyɛ gyinabea

Nneɛma anan wɔ hɔ a wubetumi apaw: atifi, nifa, ase, ne benkum a wɔahyehyɛ no pɛpɛɛpɛ.

Wɔnnyɛ markup biara a wɔakyerɛ sɛ popovers fi JavaScript ne nsɛm a ɛwɔ dataattribute bi mu.

Live demo a ɛwɔ hɔ

Akwankyerɛ anan

Sɛnea wɔde di dwuma

Ma popovers nyɛ adwuma denam JavaScript so:

$ ( '#nhwɛso' ). popover ( nneɛma a wobetumi apaw ) .

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-animation="".

Markup a wɔde hyɛ agyirae

Esiane adwumayɛ nti, Tooltip ne Popover data-apis no wɔ opt in. Sɛ wopɛ sɛ wode di dwuma a, kyerɛ selector option bi kɛkɛ.

Akwan a wɔfa so yɛ

$().popover(nneɛma a wobetumi apaw) .

Fi ase popovers ma element ahorow a wɔaboaboa ano.

.popover('kyerɛ') .

Ɛda elements popover bi adi.

$ ( '#adeɛ' ). popover ( 'kyerɛ' ) .

.popover('de sie') .

Ɔde elements popover bi siei.

$ ( '#adeɛ' ). popover ( 'de sie' ) .

.popover('dannan') .

Toggles an elements popover bi a ɛwɔ hɔ.

$ ( '#adeɛ' ). popover ( 'nsakrae' ) .

.popover('sɛe ade') .

Hide na ɛsɛe element bi popover.

$ ( '#adeɛ' ). popover ( 'sɛe ade' ) .

Nhwɛso a ɛfa kɔkɔbɔ ahorow ho

Fa dismiss dwumadie ka kɔkɔbɔ nkra nyinaa ho denam saa plugin yi so.

Sɛnea wɔde di dwuma

Ma kɔkɔbɔ bi a wɔpow no nyɛ adwuma denam JavaScript so:

$ ( ".kɔbɔ" ). kɔkɔbɔ () .

Markup a wɔde hyɛ agyirae

Fa ka data-dismiss="alert"wo close button no ho kɛkɛ na ama woanya alert close functionality no ara kwa.

<a class = "to" data-dismiss = "kɔbɔ" href = "#" > &mmere; </a>   

Akwan a wɔfa so yɛ

$().ahyɛnsode() .

Wraps kɔkɔbɔ nyinaa ne adwumayɛ a ɛbɛn. Sɛ wopɛ sɛ wo kɔkɔbɔ ahorow no animate bere a wɔato mu no a, hwɛ hu sɛ wɔwɔ .fadene .inadesuakuw no a wɔde adi dwuma dedaw wɔ wɔn ho.

.alert('to mu') .

Ɛto kɔkɔbɔ bi mu.

$ ( ".kɔbɔ" ). kɔkɔbɔ ( 'to mu' ) .

Nsɛm a esisi

Bootstrap no kɔkɔbɔ adesuakuw no da nsɛm kakraa bi a esisi adi ma hooking kɔ kɔkɔbɔ dwumadi mu.

$ ( '#me-kɔbɔ' ). bind ( 'wɔato mu' , adwuma () { .   
  // yɛ biribi...
}) na .

Nhwɛso a wɔde di dwuma

Fa bɔton yɛ pii. Control button states anaa yɛ buttons akuo ma components pii te sɛ toolbars.

Ɔman no mu nsɛm

Fa ka data-loading-text="Loading..."ho na wode loading tebea adi dwuma wɔ button bi so.

<button type = "button" class = "btn btn-primary" data-loading-text = "Wɔrehyɛ mu..." > Wɔrehyɛ tebea </button>   

Toggle biako pɛ

Fa ka data-toggle="button"ho na ama toggling a ɛwɔ button biako so no ayɛ adwuma.

<button type = "button" class = "btn btn-primary" data-toggle = "bɔtn" > Nsakrae biako </bɔtn>   

Hwɛ adaka no mu

Fa ka ho data-toggle="buttons-checkbox"ma checkbox style toggling wɔ btn-group so.

<div adesuakuw = "btn-kuw" data-toggle = "bɔtn-nhwehwɛmu adaka" >  
  <bɔtn type = "bɔtn" adesuakuw = "btn btn-primary" > Benkum </button>  
  <button type = "button" adesuakuw = "btn btn-primary" > Mfinimfini </button>  
  <bɔtn type = "bɔtn" adesuakuw = "btn btn-primary" > Nifa </button>  
</div> no

Radio so

Fa ka ho data-toggle="buttons-radio"ma radio kwan so toggling wɔ btn-group so.

<div adesuakuw = "btn-kuw" data-toggle = "bɔtn-radio" >  
  <bɔtn type = "bɔtn" adesuakuw = "btn btn-primary" > Benkum </button>  
  <button type = "button" adesuakuw = "btn btn-primary" > Mfinimfini </button>  
  <bɔtn type = "bɔtn" adesuakuw = "btn btn-primary" > Nifa </button>  
</div> no

Sɛnea wɔde di dwuma

Fa JavaScript so ma bɔtɔn ahorow no nyɛ adwuma:

$ ( '.nav-tabs' ). bɔtɔn () .

Markup a wɔde hyɛ agyirae

Data su ahorow no yɛ ade titiriw wɔ button plugin no mu. Hwɛ nhwɛsoɔ koodu a ɛwɔ aseɛ ha yi ma markup ahodoɔ no.

Nneɛma a wubetumi apaw

Ɛnyɛ ebiara

Akwan a wɔfa so yɛ

$ ().button ('dannan') .

Toggles push tebea no. Ɛma button no te sɛ nea wɔayɛ no adwuma.

<bɔtn type = "bɔtɔn" adesuakuw = "btn" data-toggle = "bɔtɔn" > ... </bɔtn>    

$().button('asɛm a wɔde gu mu') .

Set button state to loading - ɛmma button no nyɛ adwuma na ɛsesa nsɛm kɔ loading text so. Ɛsɛ sɛ wɔkyerɛkyerɛ nsɛm a wɔde rehyɛ mu no mu wɔ bɔtn element no so denam data su data-loading-textno so .

<button type = "button" class = "btn" data-loading-text = "nneɛma a wɔde rehyɛ mu..." > ... </button>    

$ ().button ('san de si hɔ') .

Sesa button tebea - sesa nsɛm kɔ mfitiase nkyerɛwee so.

$().bɔtn(ahama) .

Resets button state - sesa nsɛm kɔ data biara a wɔakyerɛkyerɛ text tebea mu.

<button type = "button" class = "btn" data-awie-nsɛm = "wɔawie!" > ... </bɔtn> no    
<nkyerɛwee>
  $ ( '.btn' ) a ɛwɔ hɔ no. button ( 'awie' ) .
</script>

Fa ho

Nya base styles ne mmoa a ɛyɛ mmerɛw ma collapsible components te sɛ accordions ne navigation.

* Ɛhwehwɛ sɛ wɔde Transitions plugin no ka ho.

Nhwɛso a ɛfa accordion ho

Yɛde collapse plugin no dii dwuma no, yɛyɛɛ accordion style widget a ɛnyɛ den:

<div adesuakuw = "akordeon" id = "akordion2" >  
  <div adesuakuw = "accordion-kuw" > 
    <div adesuakuw = "accordion-asɛmti" > 
      <a class = "accordion-toggle" data-toggle = "abɔso" data-ɔwofo = "#accordion2" href = "#collapseOne" >    
        Kuw Ade #1 a Wobetumi Abobɔw
      </a>
    </div> no
    <div id = "collapseOne" class = "accordion-nipadua a ɛhwe ase wɔ" >  
      <div adesuakuw = "accordion-mfinimfini" > 
        Anim pariatur nsɛm a wɔka kyerɛ...
      </div> no
    </div> no
  </div> no
  <div adesuakuw = "accordion-kuw" > 
    <div adesuakuw = "accordion-asɛmti" > 
      <a class = "accordion-toggle" data-toggle = "abɔso" data-ɔwofo = "#accordion2" href = "#collapseAbien" >    
        Kuw Ade #2 a Wobetumi Abobɔw
      </a>
    </div> no
    <div id = "collapseTwo" class = "accordion-nipadua a ɛhwe ase" >  
      <div adesuakuw = "accordion-mfinimfini" > 
        Anim pariatur nsɛm a wɔka kyerɛ...
      </div> no
    </div> no
  </div> no
</div> no
...

Wubetumi nso de plugin no adi dwuma a enni accordion markup no. Yɛ button bi toggle element foforo a ɛretrɛw ne nea ɛrebubu.

<button type = "button" adesuakuw = "btn btn-asiane" data-toggle = "abɔ " data-botae = "#demo" >    
  a ɛnyɛ den a wotumi bubu
</button> no ho
 
<div id = "demo" adesuakuw = "ahwe ase wɔ" > ... </div>  

Sɛnea wɔde di dwuma

Via data su ahorow so

Kɛkɛ add data-toggle="collapse"ne a data-targetto element na automatically de control of a collapsible element. Attribute no data-targetgye css selector a wɔde collapse no bedi dwuma wɔ so. Hwɛ hu sɛ wode adesuakuw no bɛka collapseelement a wotumi bu no ho. Sɛ wopɛ sɛ ɛbue default a, fa adesua foforo no ka ho in.

Sɛ wode kuw nhyehyɛe a ɛte sɛ accordion bɛka control a wotumi bubu mu ho a, fa data su no ka ho data-parent="#selector". Hwɛ demo no na woahu eyi wɔ adeyɛ mu.

Ɛdenam JavaScript so

Fa nsa yɛ adwuma denam:

$ ( ".abɔso" ). ahwe ase () .

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-parent="".

Akwan a wɔfa so yɛ

.collapse(nneɛma a wobetumi apaw) .

Ɛma wo nsɛm no yɛ adwuma sɛ ade a wotumi bu mu. Gye akwan a wubetumi apaw bi tom object.

$ ( '#me a wotumi de tow so' ). ahwe ase ({
  toggle : atoro 
}) na .

.collapse('dannan') .

Toggles a collapsible element ma wɔakyerɛ anaa wɔde asie.

.collapse('kyerɛ') .

Kyerɛ element bi a ɛtumi hwe ase.

.collapse('de sie') .

Ɛde element bi a wotumi bubu mu sie.

Nsɛm a esisi

Bootstrap no collapse adesua no da nsɛm kakraa bi a esisi ma hooking kɔ collapse dwumadi mu adi.

$ ( '#me a wotumi de tow so' ). on ( 'ahintaw' , adwuma () { .   
  // yɛ biribi...
}) na .

Nhwɛso a wɔde yɛ carousel

Slideshow a ɛwɔ aseɛ ha yi kyerɛ generic plugin ne component a wɔde sakre fa elements te sɛ carousel mu.

Nea edi kan Thumbnail label

Cras justo odio, dapibus a ɛyɛ mmerɛw wɔ, egestas eget quam. Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus. Nullam id dolor id nibh ultricies kar a wɔde di dwuma wɔ ɔkwan a ɛfata so.

Nea ɛto so abien Thumbnail label

Cras justo odio, dapibus a ɛyɛ mmerɛw wɔ, egestas eget quam. Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus. Nullam id dolor id nibh ultricies kar a wɔde di dwuma wɔ ɔkwan a ɛfata so.

Nea ɛto so abiɛsa Thumbnail label

Cras justo odio, dapibus a ɛyɛ mmerɛw wɔ, egestas eget quam. Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus. Nullam id dolor id nibh ultricies kar a wɔde di dwuma wɔ ɔkwan a ɛfata so.

‹ . › Nsɛm a wɔka kyerɛ

<div id = "meKarousel" adesuakuw = "carousel slide" >  
  <ol adesuakuw = "carousel-nkyerɛkyerɛmu" > 
    <li data-target = "#myCarousel" data-slide-to = "0" adesuakuw = "yɛ adwuma" ></li>   
    <li data-botaeɛ = "#myCarousel" data-slide-kɔ = "1" ></li>  
    <li data-botaeɛ = "#myCarousel" data-slide-kɔ = "2" ></li>  
  </ol>
  <!-- Carousel nneɛma -->
  <div adesuakuw = "carousel-mu" > 
    <div class = "adeɛ a ɛyɛ adwuma" > ... </div> 
    <div adesuakuw = "ade" > ... </div> 
    <div adesuakuw = "ade" > ... </div> 
  </div> no
  <!-- Carousel nav --> na ɛwɔ hɔ
  <a class = "carousel-control benkum" href = "#meCarousel" data-slide = "a edi kan" > ‹ </a>   
  <a class = "carousel-control right" href = "#meCarousel" data-slide = "nea edi hɔ" > › </a>   
</div> no

Sɛnea wɔde di dwuma

Via data su ahorow so

Fa data attributes di dwuma na ama ɛnyɛ den sɛ wobɛhwɛ carousel no gyinabea so. data-slidegye nsɛmfua titiriw prevanaa next, a ɛsakra slide gyinabea no toto ne mprempren gyinabea ho. Sɛnea ɛbɛyɛ a, fa di dwuma data-slide-tode fa raw slide index kɔ carousel data-slide-to="2", a jump's slide gyinabea no kɔ index pɔtee bi a efi ase wɔ 0.

Ɛdenam JavaScript so

Frɛ carousel denam nsa so de:

$ ( '.afiri a wɔde yɛ kar' ). carousel a wɔde yɛ nneɛma () .

Nneɛma a wubetumi apaw

Wobetumi afa data su anaa JavaScriptz so apaw nneɛma. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-interval="".

Akwan a wɔfa so yɛ

.carousel(nneɛma a wobetumi apaw) .

Initializes carousel ne optional options objectna ofi ase sakre fa nneɛma mu.

$ ( '.afiri a wɔde yɛ kar' ). carousel a wɔde yɛ nneɛma ({ .
  ntamgyinafo : 2000 
}) na .

.carousel('kyinhyia') .

Kyinkyin fa carousel nneɛma no mu fi benkum kɔ nifa.

.carousel('gyinae kakra') .

Siw carousel no kwan sɛ ɛnsɛ sɛ ɔde sakre fa nneɛma mu.

.carousel(nɔma) .

Cycles carousel no kɔ frame pɔtee bi so (0 a egyina so, a ɛte sɛ array).

.carousel('a edi kan') .

Kyinkyin kɔ ade a atwam no so.

.carousel('a edi hɔ') .

Kyinkyin kɔ ade a edi hɔ no so.

Nsɛm a esisi

Bootstrap carousel adesuakuw no da nsɛm abien a esisi ma hooking kɔ carousel dwumadi mu adi.

Nhwɛsoɔ

Mfitiaseɛ, ɛnyɛ den sɛ wɔbɛtrɛw mu plugin a ɛma ntɛm yɛ elegant typeaheads a ɛwɔ form text input biara.

<input type = "nkyerɛwee" data-ma = "typeahead" >  

Wobɛpɛ sɛ wo hyehyɛ autocomplete="off"sɛnea ɛbɛyɛ a browser menu ahorow a wɔahyɛ da ayɛ no renpue wɔ Bootstrap typeahead dropdown no so.

Sɛnea wɔde di dwuma

Via data su ahorow so

Fa data attributes ka ho na fa kyerɛw element bi a ɛwɔ typeahead dwumadie sɛdeɛ wɔakyerɛ wɔ nhwɛsoɔ a ɛwɔ atifi hɔ no mu.

Ɛdenam JavaScript so

Frɛ typeahead no de nsa fa:

$ ( '.kyerɛw anim' ). typeahead () .

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-source="".

Akwan a wɔfa so yɛ

.typeahead(nneɛma a wobetumi apaw) .

Ɛhyɛ input bi ase denam typeahead so.

Nhwɛsoɔ

Subnavigation a ɛwɔ benkum so no yɛ live demo a ɛfa affix plugin no ho.

Sɛnea wɔde di dwuma

Via data su ahorow so

Sɛnea ɛbɛyɛ a ɛbɛyɛ mmerɛw sɛ wode affix suban bɛka element biara ho no, fa ka data-spy="affix"element a wopɛ sɛ wohwɛ so no ho kɛkɛ. Afei fa offsets di dwuma de kyerɛ bere a ɛsɛ sɛ wodannan element bi pinning on ne off.

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

Ɛdenam JavaScript so

Frɛ affix plugin no fa JavaScript so:

$ ( '#navbar' ). affix () no .

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-offset-top="200".