Ɛfa modals ho

A streamlined, nanso ɛyɛ mmerɛw, fa atetesɛm javascript modal plugin a ɛwɔ adwumayɛ a ɛsua koraa a wɔhwehwɛ ne smart defaults nkutoo.

Static nhwɛso

Ase hɔ no yɛ statically rendered modal.

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.

Wɔde bootstrap-modal di dwuma

Frɛ modal no fa javascript so:

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

Nneɛma a wubetumi apaw

Markup a wɔde hyɛ agyirae

Wubetumi ayɛ modals adwuma wɔ wo krataafa no so mmerɛw a enhia sɛ wokyerɛw javascript line biako. Kɛkɛ fa data-toggle="modal"hyɛ controller element bi a ɛwɔ data-target="#foo"anaa href="#foo"a ɛne modal element id hyia so, na sɛ wobɔ a, ɛbɛhyɛ wo modal no ase.

Afei nso, sɛ wode options bɛka wo modal instance no ho a, fa ka ho kɛkɛ sɛ data attributes foforo wɔ control element anaa modal markup no ankasa so.

<a adesuakuw = "btn" data-toggle = "modal" href = "#meModal" > Fi ase Modal </a>    

<div adesuakuw = "modal" id = "meModal" >  
  <div adesuakuw = "modal-atiri" > 
    <a adesuakuw = "to" data-dismiss = "modal" > × </a>  
    <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

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 .

Ɛfa nneɛma a wɔde gu fam ho

Fa dropdown menus ka ɛkame ayɛ sɛ biribiara a ɛwɔ Bootstrap mu no ho denam saa plugin a ɛnyɛ den yi so. Bootstrap no wɔ dropdown menu mmoa a edi mũ wɔ navbar, tabs, ne pills no mu.

Nhwɛso ahorow

Klik dropdown nav links a ɛwɔ navbar ne pills a ɛwɔ aseɛ ha no so na sɔ dropdowns hwɛ.

• Link a wɔde di dwuma daa
• Dropdown a ɛwɔ hɔ
  • Action
  • Another action
  • Something else here
  • Separated link
• Nneɛma a wɔde gu fam 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Nneɛma a wɔde gu fam 3
  • Action
  • Another action
  • Something else here
  • Separated link

Sɛ wode bootstrap-dropdown.js di dwuma a

Frɛ dropdowns no fa javascript so:

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

Markup a wɔde hyɛ agyirae

Sɛ wopɛ sɛ wode dropdown dwumadie ka element biara ho ntɛmntɛm a, fa ka ho kɛkɛ data-toggle="dropdown"na bootstrap dropdown biara a ɛfata no bɛyɛ adwuma ankasa.

<ul adesuakuw = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Nkitahodi a ɛkɔ so daa </a></li>  
  <li adesuakuw = "a ɛkɔ fam" id = "menu1" >  
    <a class = "asɛm a ɛwɔ ase" data-toggle = "a ɛkɔ fam" href = "#menu1" >   
      Dropdown a ɛwɔ hɔ
      <b adesuakuw = "caret" ></b> 
    </a>
    <ul class = "nsɛm a ɛwɔ ase hɔ" > 
      <li><a href = "#" > Adeyɛ </a></li> 
      <li><a href = "#" > Adeyɛ foforo </a></li> 
      <li><a href = "#" > Biribi foforo wɔ ha </a></li> 
      <li adesuakuw = "nkyekyɛmu" ></li> 
      <li><a href = "#" > Nkitahodi a wɔatew mu </a></li> 
    </ul>
  </li>
  ...
</ul>

Akwan a wɔfa so yɛ

$().a ɛwɔ ase hɔ() .

Programatic api a ɛma menus yɛ adwuma ma navbar anaa tabbed navigation a wɔde ama.

ScrollSpy plugin no yɛ ma nav botae ahorow a egyina scroll gyinabea so no yɛ foforo ankasa.

Nhwɛso navbar a ɛwɔ scrollspy

Twe beae a ɛwɔ ase hɔ no na hwɛ navigation update no. Wɔbɛtwe adwene asi nneɛma a ɛwɔ dropdown sub no so nso. Sɔ hwɛ!

Sɛ wode bootstrap-scrollspy.js di dwuma a

Frɛ scrollspy no fa javascript so:

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

Markup a wɔde hyɛ agyirae

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).

<nipadua data-spy = "nkyerɛwee" > ... </nipadua>  

Nneɛma a wubetumi apaw

Saa plugin yi de tab ne pill dwumadie a ɛyɛ ntɛm, ɛyɛ nnam ka ho ma nsakraeɛ fa mpɔtam hɔ nsɛm mu.

Nhwɛso tab ahorow

Klik tab ahorow a ɛwɔ ase hɔ no so na dannan pane ahorow a ahintaw no ntam, mpo denam dropdown menu ahorow so.

• Fie
• Ho asɛm
• Dropdown a ɛwɔ hɔ
  • @fat
  • @mdo

Sɛ wode bootstrap-tab.js di dwuma a

Ma tabbable tabs no nyɛ adwuma denam javascript so:

$ ( '#meTab' ). tab ( 'kyerɛ' ) .

Markup a wɔde hyɛ agyirae

Wubetumi ayɛ tab anaa pill navigation adwuma a worenkyerɛw javascript biara denam element bi a wobɛkyerɛ kɛkɛ data-toggle="tab"anaasɛ wobɛda so.data-toggle="pill"

<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 `data-target` anaa `href` a ɛde n'ani si container node so wɔ dom no mu.

<ul adesuakuw = "nav nav-tabs" > 
  <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 () { .  
    $ ( '.tabs 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 .

Ɛfa Nnwinnade Ho Nsɛm Ho

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.

Nhwɛso a wɔde di dwuma wɔ Tooltips ho

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

Sɛ wode bootstrap-tooltip.js di dwuma a

Trigger adwinnade no ho nsɛm denam javascript so:

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

Nneɛma a wubetumi apaw

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ɛ.

<a href = "#" rel = "adwinnade asɛm" 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' ) .

Ɛfa popovers ho

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.

* Ɛhwehwɛ sɛ wɔde Tooltip ka ho

Nhwɛso hover popover

Fa wo nsa hyɛ bɔtn no so na ama popover no ayɛ kɛse.

Sɛ wode bootstrap-popover.js di dwuma a

Ma popovers nyɛ adwuma denam javascript so:

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

Nneɛma a wubetumi apaw

Markup a wɔde hyɛ agyirae

Esiane adwumayɛ nti, Tooltip ne Popover data-apis no yɛ opt in. Sɛ wopɛ sɛ wode di dwuma a, kyerɛ a the selector option 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' ) .

Ɛfa kɔkɔbɔ ahorow ho

Kɔkɔbɔ plugin no yɛ adesuakuw ketewaa bi a wɔde dwumadi a ɛbɛn ka kɔkɔbɔ ahorow ho.

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

Alerts plugin no yɛ adwuma wɔ alert messages a wɔde ba daa so, na esiw messages kwan.

Sɛ wode bootstrap-alert.js di dwuma a

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 .

Fa ho

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

Nhwɛso a wɔde di dwuma

Fa buttons plugin no di dwuma ma tebea ne toggles.

Sɛ wode bootstrap-button.js di dwuma a

Ma button ahorow no nyɛ adwuma denam javascript so:

$ ( '.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.

<!-- Fa data-toggle="button" ka ho na ama toggling ayɛ adwuma wɔ button biako so -->
<button class = "btn" data-toggle = "bɔtɔn" > Nsakraeɛ baako </button>  
 
<!-- Fa data-toggle="buttons-checkbox" ka ho ma checkbox style toggling wɔ btn-group -->
<div adesuakuw = "btn-kuw" data-toggle = "bɔtn-nhwehwɛmu adaka" >  
  <button class = "btn" > Benkum so </bɔtn> 
  <button class = "btn" > Mfinimfini </button> 
  <button class = "btn" > Nifa so </button> 
</div> no
 
<!-- Fa data-toggle="buttons-radio" ka ho ma radio kwan so nsakrae wɔ btn-kuo --> so
<div adesuakuw = "btn-kuw" data-toggle = "bɔtn-radio" >  
  <button class = "btn" > Benkum so </bɔtn> 
  <button class = "btn" > Mfinimfini </button> 
  <button class = "btn" > Nifa so </button> 
</div> no

Akwan a wɔfa so yɛ

$ ().button ('dannan') .

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

<bɔtn 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 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 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.

Nhwɛso a ɛfa accordion ho

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

Sɛ wode bootstrap-collapse.js di dwuma a

Fa javascript so ma ɛnyɛ adwuma:

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

Nneɛma a wubetumi apaw

Markup a wɔde hyɛ agyirae

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.

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

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 .

Fa ho

A generic plugin ma sakre fa elements mu. Anigyede a wɔde di agoru.

Nhwɛso a wɔde yɛ carousel

Hwɛ slideshow a ɛwɔ ase ha no.

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ɛ

Sɛ wode bootstrap-carousel.js di dwuma a

Frɛ fa javascript so:

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

Nneɛma a wubetumi apaw

Markup a wɔde hyɛ agyirae

Data attributes na wɔde di dwuma ma conrols a atwam ne nea edi hɔ no. Hwɛ nhwɛso agyiraehyɛde a ɛwɔ ase ha no.

<div id = "meKarousel" adesuakuw = "carousel" >  
  <!-- 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

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.

Fa ho

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

Nhwɛsoɔ

Fi ase kyerɛw wɔ ase hɔ no mu na kyerɛ nea efii mu bae wɔ typeahead no mu.

Sɛ wode bootstrap-typeahead.js di dwuma a

Frɛ typeahead no fa javascript so:

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

Nneɛma a wubetumi apaw

Markup a wɔde hyɛ agyirae

Fa data su ahorow ka ho na fa kyerɛw element bi a ɛwɔ typeahead dwumadie.

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

Akwan a wɔfa so yɛ

.typeahead(nneɛma a wobetumi apaw) .

Ɛhyɛ input bi ase denam typeahead so.