Javascript a wɔde yɛ Bootstrap no

Fa Bootstrap no afã horow no ba nkwa mu —seesei de jQuery plugins 12 a wɔahyɛ da ayɛ.

Modal ahorow a wɔde di dwuma

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.

Nneɛma a wɔde gu fam

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.

Nwoma mmobɔwee

Fa scrollspy di dwuma na fa link ahorow a ɛwɔ wo navbar no mu no foforo ankasa de kyerɛ link a ɛreyɛ adwuma mprempren a egyina scroll gyinabea so.

Tab ahorow a wotumi sesa

Fa saa plugin yi ma tabs ne pills nyɛ mfaso kɛse denam ma a wobɛma wɔn kwan ma wɔadannan wɔn ho wɔ tabbable panes a ɛwɔ mpɔtam hɔ nsɛm mu no so.

Nnwinnade Ho Afotu

Fa foforo a wɔfa wɔ jQuery Tipsy plugin no ho, Tooltips mfa wɔn ho nto mfonini so —wɔde CSS3 di dwuma ma animations ne data-attributes ma local title storage.

Popovers * .

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 Tooltips ka ho

Nkrasɛm a wɔde bɔ kɔkɔ

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

Nsɛmma nhoma no

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

Gu

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

Carousel a wɔde yɛ nneɛma

Yɛ merry-go-round a ɛfa nsɛm biara a wopɛ sɛ wode nkitahodi slideshow a ɛfa nsɛm ho ma.

Typeahead a ɛwɔ anim

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

Nsakrae ahorow * .

Sɛ wopɛ nsakrae nsunsuanso a ɛnyɛ den a, fa bootstrap-transition.js ka ho pɛnkoro na ama woatumi atwetwe wɔ modals mu anaasɛ fade out alerts.

* Ɛhia ma animation wɔ plugins mu

Ti a ɛwɔ soro! Javascript plugins nyinaa hwehwɛ sɛ wonya jQuery no foforo.

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

Twe fael no kɔ

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.

Fi ase demo modal

Wɔde bootstrap-modal di dwuma

Frɛ modal no fa javascript so:

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

Nneɛma a wubetumi apaw

Din korɔ mfiaseɛ nkyerɛmu
akyi mfonini boolean ho asɛm nokorɛ Nea ɛka ho ne modal-backdrop element bi. Sɛnea ɛbɛyɛ a, kyerɛ staticma akyigyina a ɛnto modal no mu wɔ klik so.
keyboard so nsɛm boolean ho asɛm nokorɛ Ɛto modal no mu bere a wɔabɔ escape key no
da no adi boolean ho asɛm nokorɛ Kyerɛ modal no bere a wɔahyɛ ase no.

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.

  1. <a adesuakuw = "btn" data-toggle = "modal" href = "#meModal" > Fi ase Modal </a>
  1. <div adesuakuw = "modal hide" id = "meModal" >
  2. <div adesuakuw = "modal-atiri" >
  3. <bɔtn type = "bɔtn" adesuakuw = "to" data-dismiss = "modal" > × </button>
  4. <h3> Modal asɛmti </h3>
  5. </div> no
  6. <div adesuakuw = "modal-nipadua" >
  7. <p> Nipadua pa biako... </p>
  8. </div> no
  9. <div adesuakuw = "modal-nan ase" >
  10. <a href = "#" adesuakuw = "btn" data-a wɔpow = "modal" > To mu </a>
  11. <a href = "#" class = "btn btn-primary" > Sie nsakraeɛ </a>
  12. </div> no
  13. </div> no
Ti a ɛwɔ soro! Sɛ wopɛ sɛ wo modal no yɛ animate kɔ mu na ɛfiri mu a, fa .fadeclass bi ka .modalelement no ho kɛkɛ (hwɛ demo no na wobɛhunu yei wɔ adeyɛ mu) na fa bootstrap-transition.js ka ho.

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.

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

.modal('dannan') .

Nsaano toggles a modal.

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

.modal('kyerɛ') .

Nsaano bue modal bi.

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

.modal('de sie') .

Nsaano de sie modal bi.

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

Dwumadie Nkyerɛmu
da no adi Saa adeyɛ yi tow ntɛm ara bere a showwɔfrɛ instance kwan no.
a wɔakyerɛ Wɔtow saa adeyɛ yi bere a wɔayɛ modal no ahu nea ɔde di dwuma no (bɛtwɛn ma css nsakrae ahorow no awie).
Wɔtow saa adeyɛ yi ntɛm ara bere a hidewɔafrɛ instance kwan no.
asuma Wɔtow saa adeyɛ yi bere a modal no awie sɛ wɔde asie afi ɔdefo no hɔ (bɛtwɛn ma css nsakrae ahorow no awie).
  1. $ ( '#meModal' ). on ( 'ahintaw' , adwuma () { .
  2. // yɛ biribi...
  3. }) na .

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

Twe fael no kɔ

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

@kɛseɛ

Ad leggings keytar, brunch id adwini apontow dolor adwumayɛfo. Pitchfork yr enim lo-fi ansa na wɔretɔn qui. Tumblr afuw-kɔ-pon sakre hokwan ahorow biara. Anim keffiyeh carles a ɔyɛ ɔkwasea. Velit seitan mcsweeney mfonini dan 3 ɔkraman ɔsram irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui ebia wontee wɔn ho asɛm et cardigan ahotoso sikakorabea culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred aseresɛm biodiesel keffiyeh nsaanodwumayɛfo ullamco consequat.

@mdo na ɔkyerɛwee

Veniam marfa abɔgyesɛ skateboard, adipisicing fugiat velit pitchfork abɔgyesɛ. Freegan abɔgyesɛ aliqua cupidat mcsweeney no vero. Cupidatat anan loko nisi, ea helvetica nulla carles. Tattooed cosby sweater aduan lɔre, mcsweeney no quis a ɛnyɛ freegan vinyl. Lo-fi wes anderson +1 a wɔde hyɛ ntade mu. Carles non aesthetic apɔw-mu-teɛteɛ quis gentrify. Brooklyn adipisicing nsaanodwuma beer abadiakyiri keytar deserunt.

baako

Occaecat commodo a wɔde yɛ aduan a ɛyɛ dɛ. Fap nsaanodwuma beer deserunt skateboard ea. Lomo sakre hokwan adipisicing banh mi, velit ea sunt next level locavore biako-mfiase kɔfe wɔ magna veniam. Nkwa a ɛkorɔn id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est a wɔde yɛ aduan. Consectetur nisi DIY minim ɔbɔfo bag. Cred ex wɔ, delectus consectetur fanny pack iphone a ɛbɛkɔ so atra hɔ daa.

mmienu

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa ɔbɔfo bag marfa nea ɛte biara delectus aduan lɔre. Sapiente synth id a ɛkyerɛ sɛ obi yɛ ade. Locavore sed helvetica cliche irony, aprannaa a ebia wontee wɔn ho asɛm consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat ansa na wɔretɔn awie, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica adwumfo. Cardigan nsaanodwuma beer seitan a wɔasiesie velit. VHS chambray adwuma no yɛ bere tiaa mu veniam. Anim mollit minim commodo ullamco aprannaa a ɛrebɔ.


Sɛ wode bootstrap-scrollspy.js di dwuma a

Frɛ scrollspy no fa javascript so:

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

  1. <nipadua data-spy = "nkyerɛwee" > ... </nipadua>
Ti a ɛwɔ soro! Ɛsɛ sɛ Navbar link ahorow no nya id botae ahorow a wobetumi asiesie. Sɛ nhwɛso no, <a href="#home">home</a>ɛsɛ sɛ a ne biribi a ɛwɔ dom no mu te sɛ <div id="home"></div>.

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:

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

Nneɛma a wubetumi apaw

Din korɔ mfiaseɛ nkyerɛmu
offset a wɔde hyɛ mu nɔma 10. 10 Pixels to offset fi soro bere a worebu gyinabea a scroll no.

Nsɛm a esisi

Dwumadie Nkyerɛmu
yɛ adwuma Saa adeyɛ yi tow bere biara a ade foforo bi bɛyɛ adwuma denam nhoma mmobɔwee no so.

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.

Twe fael no kɔ

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.

Raw denim ebia wontee wɔn ho asɛm jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth owura ahotew. Mustache cliche bere tiaa mu, williamsburg carles vegan helvetica. Reprehenderit namkumfoɔ retro keffiyeh daeɛ kyerefoɔ synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Ɔde ne nsa kyerɛɛ ne so, na ɔde ne nsa kyerɛɛ ne so bio. Aliquip placeat salvia a ɔyɛ ɔbarima a ɔpɛ sɛ ɔyɛ biribi. Seitan aliquip quis cardigan american ntade, namtɔnfo voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Sɛ wode bootstrap-tab.js di dwuma a

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

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

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

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

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"Sɛ wode navne nav-tabsadesua ahorow no ka tab ulno ho a, ɛbɛma bootstrap tab no styling no adi dwuma.

  1. <ul adesuakuw = "nav nav-tabs" >
  2. <li><a href = "#fie" data-toggle = "tab" > Fie </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Nsɛm a ɛfa ho </a></li>
  4. <li><a href = "#nkrasɛm" data-toggle = "tab" > Nkrasɛm </a></li>
  5. <li><a href = "#nhyehyɛe" data-toggle = "tab" > Nsiesiei </a></li>
  6. </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.

  1. <ul adesuakuw = "nav nav-tabs" id = "meTab" >
  2. <li adesuakuw = "yɛ adwuma" ><a href = "#fie" > Fie </a></li>
  3. <li><a href = "#profile" > Nsɛm a ɛfa ho </a></li>
  4. <li><a href = "#nkrasɛm" > Nkrasɛm </a></li>
  5. <li><a href = "#nhyehyɛe" > Nsiesiei </a></li>
  6. </ul>
  7.  
  8. <div adesuakuw = "tab-nsɛm" >
  9. <div adesuakuw = "tab-pane a ɛyɛ adwuma" id = "fie" > ... </div>
  10. <div adesuakuw = "tab-pane" id = "fael" > ... </div>
  11. <div adesuakuw = "tab-pane" id = "nkrasɛm" > ... </div>
  12. <div adesuakuw = "tab-pane" id = "nhyehyɛe" > ... </div>
  13. </div> no
  14.  
  15. <nkyerɛwee>
  16. $ ( dwumadie () { .
  17. $ ( '# meTab a:a etwa to' ). tab ( 'kyerɛ' );
  18. }) na .
  19. </script>

Nsɛm a esisi

Dwumadie Nkyerɛmu
da no adi Saa adeyɛ yi tow wɔ tab show so, nanso ansa na wɔakyerɛ tab foforo no. Fa event.targetne di dwuma event.relatedTargetfa w’ani si active tab ne active tab a atwam no so (sɛ ɛwɔ hɔ a) sɛnea ɛte biara.
a wɔakyerɛ Saa adeyɛ yi tow wɔ tab show so bere a wɔakyerɛ tab bi akyi. Fa event.targetne di dwuma event.relatedTargetfa w’ani si active tab ne active tab a atwam no so (sɛ ɛwɔ hɔ a) sɛnea ɛte biara.
  1. $ ( 'a [data-toggle="tab"]' ). on ( 'wɔakyerɛ' , adwuma ( e ) { .
  2. e . target // tab a wɔayɛ no adwuma
  3. e . relatedTarget // tab a atwam no
  4. }) 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.

Twe fael no kɔ

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:

Tight pants next level keffiyeh ebia wontee wɔn ho asɛm. Mfonini dan abɔgyesɛ raw denim letterpress vegan ɔbɔfo bag stumptown. Farm-to-table seitan, mcsweeney fixie sustainable quinoa 8-bit american ntade terry richardson vinyl chambray. Abɔgyesɛ stumptown, cardigans banh mi lomo aprannaa. Tofu biodiesel williamsburg marfa, anan loko mcsweeney no tew vegan chambray ho. A really ironic artisan whatever keytar , scenester afuw-kɔ-pon banksy Austin twitter di freegan cred raw denim biako-mfiase kɔfe viral.


Sɛ wode bootstrap-tooltip.js di dwuma a

Trigger adwinnade no ho nsɛm denam javascript so:

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

Nneɛma a wubetumi apaw

Din korɔ mfiaseɛ nkyerɛmu
animation a wɔde yɛ nneɛma boolean ho asɛm nokorɛ fa css fade nsakrae bi di dwuma wɔ adwinnade no ho
a wɔde bɛto hɔ ahama|adwumayɛ 'soro' sɛnea wɔde adwinnade no si hɔ - soro | ase hɔ | benkum so | nifa
nea ɔpaw ade ahoma ɛnyɛ ampa Sɛ wɔde selector bi ma a, wɔde tooltip nneɛma bɛhyɛ botae ahorow a wɔakyerɛ no nsa.
atiti asɛm ahama | dwumadie '' . default title value sɛ `title` tag no nni hɔ a
nkanyan ahoma 'hover'. sɛnea wɔde adwinnade tip no hyɛ ase - hover | adwene a wɔde si biribi so | akwankyerɛ
ka akyi nɔma | adeɛ 0 na ɛwɔ hɔ

delay kyerɛ na wɔde tooltip (ms) no sie - no mfa manual trigger type ho

Sɛ wɔde nɔma bi ma a, wɔde delay di dwuma wɔ hide/show abien no nyinaa mu

Adeɛ nhyehyɛɛ ne:delay: { show: 500, hide: 100 }

Ti a ɛwɔ soro! Wobetumi akyerɛ akwan foforo a wɔbɛfa so akyerɛ ankorankoro adwinnade ho nkyerɛkyerɛmu denam data su ahorow a wɔde bedi dwuma so.

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

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

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

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

Fa element bi adwinnade ho nsɛm sie.

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

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

Toggles element bi adwinnade ho nsɛm.

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

Twe fael no kɔ

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:

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

Nneɛma a wubetumi apaw

Din korɔ mfiaseɛ nkyerɛmu
animation a wɔde yɛ nneɛma boolean ho asɛm nokorɛ fa css fade nsakrae bi di dwuma wɔ adwinnade no ho
a wɔde bɛto hɔ ahama|adwumayɛ 'nifa' sɛnea wɔde popover no si hɔ - soro | ase hɔ | benkum so | nifa
nea ɔpaw ade ahoma ɛnyɛ ampa sɛ wɔde selector bi ma a, wɔde tooltip nneɛma bɛhyɛ botae ahorow a wɔakyerɛ no nsa
nkanyan ahoma 'hover'. sɛnea wɔde adwinnade tip no hyɛ ase - hover | adwene a wɔde si biribi so | akwankyerɛ
atiti asɛm ahama | dwumadie '' . default title value sɛ `title` attribute no nni hɔ a
emu nsɛm ahama | dwumadie '' . default content value sɛ `data-content` su no nni hɔ a
ka akyi nɔma | adeɛ 0 na ɛwɔ hɔ

delay kyerɛ na wɔde sie popover (ms) - no mfa manual trigger type ho

Sɛ wɔde nɔma bi ma a, wɔde delay di dwuma wɔ hide/show abien no nyinaa mu

Adeɛ nhyehyɛɛ ne:delay: { show: 500, hide: 100 }

Ti a ɛwɔ soro! Wobetumi akyerɛ akwan foforo a wɔbɛfa so akyerɛ ankorankoro popovers denam data su ahorow a wɔde bedi dwuma so.

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.

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

.popover('de sie') .

Ɔde elements popover bi siei.

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

.popover('dannan') .

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

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

Twe

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.

Guacamole kronkron! Best check yo self, wo nnyɛ fɛ dodo.

Oh snap! Woanya mfomso bi!

Sesa eyi ne eyi na san bɔ mmɔden bio. Duis mollis, est a ɛnyɛ commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus no tena ase sɛ ɛyɛ aduru a wɔde yɛ aduan.

Yɛ saa adeyɛ yi Anaasɛ yɛ eyi


Sɛ wode bootstrap-alert.js di dwuma a

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

  1. $ ( ".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.

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

  1. $ ( ".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.

Dwumadie Nkyerɛmu
to mu Saa adeyɛ yi tow ntɛm ara bere a closewɔfrɛ instance kwan no.
wɔato mu Wɔtow saa adeyɛ yi bere a wɔato kɔkɔbɔ no mu (bɛtwɛn ma css nsakrae ahorow no awie).
  1. $ ( '#me-kɔbɔ' ). bind ( 'wɔato mu' , adwuma () { .
  2. // yɛ biribi...
  3. }) na .

Fa ho

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

Twe fael no kɔ

Nhwɛso a wɔde di dwuma

Fa buttons plugin no di dwuma ma tebea ne toggles.

Ɔman no mu nsɛm
Toggle biako pɛ
Hwɛ adaka no mu
Radio so

Sɛ wode bootstrap-button.js di dwuma a

Ma button ahorow no nyɛ adwuma denam javascript so:

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

  1. <!-- Fa data-toggle="button" ka ho na ama toggling ayɛ adwuma wɔ button biako so -->
  2. <button class = "btn" data-toggle = "bɔtɔn" > Nsakraeɛ baako </button>
  3.  
  4. <!-- Fa data-toggle="buttons-checkbox" ka ho ma checkbox style toggling wɔ btn-group -->
  5. <div adesuakuw = "btn-kuw" data-toggle = "bɔtn-nhwehwɛmu adaka" >
  6. <button class = "btn" > Benkum so </bɔtn>
  7. <button class = "btn" > Mfinimfini </button>
  8. <button class = "btn" > Nifa so </button>
  9. </div> no
  10.  
  11. <!-- Fa data-toggle="buttons-radio" ka ho ma radio kwan so nsakrae wɔ btn-kuo --> so
  12. <div adesuakuw = "btn-kuw" data-toggle = "bɔtn-radio" >
  13. <button class = "btn" > Benkum so </bɔtn>
  14. <button class = "btn" > Mfinimfini </button>
  15. <button class = "btn" > Nifa so </button>
  16. </div> no

Akwan a wɔfa so yɛ

$ ().button ('dannan') .

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

Ti a ɛwɔ soro! Wubetumi ama auto toggling a ɛwɔ button bi mu no ayɛ adwuma denam data-toggleattribute no a wode bedi dwuma no so.
  1. <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 .

  1. <button class = "btn" data-loading-text = "nneɛma a wɔde rehyɛ mu..." > ... </button>
Ti a ɛwɔ soro! Firefox kɔ so ma tebea a wɔagyae mu no kɔ so wɔ krataafa a wɔde ahyɛ mu no nyinaa mu . Ade a wobetumi asiesie eyi ne sɛ wode autocomplete="off".

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

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

Fa ho

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

Twe fael no kɔ

* Ɛ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:

Anim pariatur cliche reprehenderit, enim eiusmod nkwa a ɛkorɔn accusamus terry richardson ad squid. 3 ɔkraman ɔsram officia aute, a ɛnyɛ cupidat skateboard dolor brunch. Aduan lɔre quinoa nesciunt adwumayɛfo eiusmod. Brunch 3 ɔkraman ɔsram tempor, sunt aliqua de anomaa bi to so squid biako-mfitiase kɔfe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, nsaanodwuma beer adwuma wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur namkumfoɔ vice lomo. Leggings occaecat nsaanodwuma beer afuw-kɔ-pon, raw denim aesthetic synth nesciunt ebia wontee wɔn ho asɛm accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod nkwa a ɛkorɔn accusamus terry richardson ad squid. 3 ɔkraman ɔsram officia aute, a ɛnyɛ cupidat skateboard dolor brunch. Aduan lɔre quinoa nesciunt adwumayɛfo eiusmod. Brunch 3 ɔkraman ɔsram tempor, sunt aliqua de anomaa bi to so squid biako-mfitiase kɔfe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, nsaanodwuma beer adwuma wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur namkumfoɔ vice lomo. Leggings occaecat nsaanodwuma beer afuw-kɔ-pon, raw denim aesthetic synth nesciunt ebia wontee wɔn ho asɛm accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod nkwa a ɛkorɔn accusamus terry richardson ad squid. 3 ɔkraman ɔsram officia aute, a ɛnyɛ cupidat skateboard dolor brunch. Aduan lɔre quinoa nesciunt adwumayɛfo eiusmod. Brunch 3 ɔkraman ɔsram tempor, sunt aliqua de anomaa bi to so squid biako-mfitiase kɔfe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, nsaanodwuma beer adwuma wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur namkumfoɔ vice lomo. Leggings occaecat nsaanodwuma beer afuw-kɔ-pon, raw denim aesthetic synth nesciunt ebia wontee wɔn ho asɛm accusamus labore sustainable VHS.

Sɛ wode bootstrap-collapse.js di dwuma a

Fa javascript so ma ɛnyɛ adwuma:

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

Nneɛma a wubetumi apaw

Din korɔ mfiaseɛ nkyerɛmu
ɔwofo nea ɔpaw ade ɛnyɛ ampa Sɛ selector a, ɛnde elements a wotumi paapae mu nyinaa wɔ ɔwofo a wɔakyerɛ no ase no bɛto mu bere a wɔakyerɛ saa ade a wotumi boaboa ano yi. (ɛte sɛ atetesɛm mu accordion suban) .
toggle no boolean ho asɛm nokorɛ Toggles element a ɛyɛ collapsible wɔ invocation so

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.

  1. <button class = "btn btn-asiane" data-toggle = "abubu" data-botae = "#demo" >
  2. a ɛnyɛ den a wotumi bubu
  3. </button> no ho
  4.  
  5. <div id = "demo" adesuakuw = "ahwe ase wɔ" > ... </div>
Ti a ɛwɔ soro! 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.

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.

  1. $ ( '#me a wotumi de tow so' ). ahwe ase ({
  2. toggle : atoro
  3. }) 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.

Dwumadie Nkyerɛmu
da no adi Saa adeyɛ yi tow ntɛm ara bere a showwɔfrɛ instance kwan no.
a wɔakyerɛ Wɔtow saa adeyɛ yi bere a wɔayɛ collapse element bi a ɔde di dwuma no ahu (bɛtwɛn ma css nsakrae ahorow no awie).
Wɔtow saa adeyɛ yi ntɛm ara bere a hidewɔafrɛ ɔkwan no awie no.
asuma Wɔtow saa adeyɛ yi bere a wɔde collapse element bi asie nea ɔde di dwuma no (bɛtwɛn ma css nsakrae ahorow no awie).
  1. $ ( '#me a wotumi de tow so' ). on ( 'ahintaw' , adwuma () { .
  2. // yɛ biribi...
  3. }) na .

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.

Twe fael no kɔ

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:

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

Nneɛma a wubetumi apaw

Din korɔ mfiaseɛ nkyerɛmu
farebae array a ɛwɔ hɔ [ ] . Data fibea a ɛsɛ sɛ wobisabisa ho asɛm tia.
nneɛma nɔma 8 Nneɛma dodow a ɛsen biara a ɛsɛ sɛ wɔda no adi wɔ dropdown no mu.
matcher dwumadie case a ɛnyɛ den Ɔkwan a wɔfa so hu sɛ ebia asɛmmisa bi ne ade bi hyia anaa. Gye akyinnyegye biako tom, nea itemwɔde bɛsɔ asɛmmisa no ahwɛ. Fa this.query. Sane boolean truesɛ asɛmmisa no yɛ match a.
sorter dwumadie pɛpɛɛpɛ a ɛne ne ho hyia,
nkyerɛwde akɛse a ɛyɛ mmerɛw, nkyerɛwde akɛse
a ɛnyɛ den
Ɔkwan a wɔfa so hyehyɛ autocomplete aba no. Gye akyinnyegye biako tom itemsna ɔwɔ typeahead nhwɛso no scope. Fa mprempren asɛmmisa no kyerɛ this.query.
nea ɛtwe adwene si so dwumadie si default matches nyinaa so dua Ɔkwan a wɔfa so si autocomplete aba no so dua. Gye akyinnyegye biako tom itemna ɔwɔ typeahead nhwɛso no scope. Ɛsɛ sɛ ɛsan de html ba.

Markup a wɔde hyɛ agyirae

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

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