Fa Bootstrap no afã horow no ba nkwa mu —seesei de jQuery plugins 12 a wɔahyɛ da ayɛ.
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.
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.
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.
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.
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.
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
Kɔkɔbɔ plugin no yɛ adesuakuw ketewaa bi a wɔde dwumadi a ɛbɛn ka kɔkɔbɔ ahorow ho.
Fa bɔton yɛ pii. Control button states anaa yɛ buttons akuo ma components pii te sɛ toolbars.
Nya base styles ne mmoa a ɛyɛ mmerɛw ma collapsible components te sɛ accordions ne navigation.
Yɛ merry-go-round a ɛfa nsɛm biara a wopɛ sɛ wode nkitahodi slideshow a ɛfa nsɛm ho ma.
Mfitiaseɛ, ɛnyɛ den sɛ wɔbɛtrɛw mu plugin a ɛma ntɛm yɛ elegant typeaheads a ɛwɔ form text input biara.
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
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ɔAse hɔ no yɛ statically rendered modal.
Nipadua pa biako...
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 modalFrɛ modal no fa javascript so:
- $ ( '#meModal' ). modal ( nneɛma a wobetumi 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ɛ static ma 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. |
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 hide" id = "meModal" >
- <div adesuakuw = "modal-atiri" >
- <bɔtn type = "bɔtn" adesuakuw = "to" data-dismiss = "modal" > × </button>
- <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" data-a wɔpow = "modal" > To mu </a>
- <a href = "#" class = "btn btn-primary" > Sie nsakraeɛ </a>
- </div> no
- </div> no
.fade
class bi ka
.modal
element no ho kɛkɛ (hwɛ demo no na wobɛhunu yei wɔ adeyɛ mu) na fa bootstrap-transition.js ka ho.
Ɛ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 .
Nsaano toggles a modal.
- $ ( '#meModal' ). modal ( 'nsakrae' ) .
Nsaano bue modal bi.
- $ ( '#meModal' ). modal ( 'kyerɛ' ) .
Nsaano de sie modal bi.
- $ ( '#meModal' ). modal ( 'de sie' ) .
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 show wɔ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). |
tɛ | Wɔtow saa adeyɛ yi ntɛm ara bere a hide wɔ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). |
- $ ( '#meModal' ). on ( 'ahintaw' , adwuma () { .
- // yɛ biribi...
- }) na .
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.
Twe fael no kɔKlik dropdown nav links a ɛwɔ navbar ne pills a ɛwɔ aseɛ ha no so na sɔ dropdowns hwɛ.
Frɛ dropdowns no fa javascript so:
- $ ( '.asɛm a ɛwɔ ase-toggle' ). a ɛwɔ ase hɔ () .
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.
data-target="#fat"
anaa
href="#fat"
.
- <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>
Sɛ wopɛ sɛ URL ahorow no kɔ so tra hɔ a, fa data-target
su no di dwuma sen sɛ wode bedi dwuma href="#"
.
- <ul adesuakuw = "nav nav-pills" >
- <li adesuakuw = "a ɛwɔ ase" >
- <a class = "afiri-a-ɛkɔ soro" data-toggle = "a-ɛkɔ-akɔ fam" data-botae = "#" href = "ɔkwan/kɔ/kratafa.html" >
- Dropdown a ɛwɔ hɔ
- <b adesuakuw = "caret" ></b>
- </a>
- <ul class = "nsɛm a ɛwɔ ase hɔ" >
- ...
- </ul>
- </li>
- </ul>
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.
Twe fael no kɔ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ɛ!
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.
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.
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.
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.
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ɔ.
Frɛ scrollspy no fa javascript so:
- $ ( '#navbar' ). nhoma mmobɔwee () .
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>
<a href="#home">home</a>
ɛsɛ sɛ a ne biribi a ɛwɔ dom no mu te sɛ
<div id="home"></div>
.
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' ) .
- });
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. |
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ɔ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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Ma tabbable 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) .
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 nav
ne nav-tabs
adesua ahorow no ka tab ul
no 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>
Ɛma tab element ne nsɛm a ɛwɔ mu no yɛ adwuma. Ɛsɛ sɛ tab nya a data-target
anaasɛ href
targeting 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>
Dwumadie | Nkyerɛmu |
---|---|
da no adi | Saa adeyɛ yi tow wɔ tab show so, nanso ansa na wɔakyerɛ tab foforo no. Fa event.target ne di dwuma event.relatedTarget fa 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.target ne di dwuma event.relatedTarget fa w’ani si active tab ne active tab a atwam no so (sɛ ɛwɔ hɔ a) sɛnea ɛte biara. |
- $ ( 'a [data-toggle="tab"]' ). on ( 'wɔakyerɛ' , adwuma ( e ) { .
- e . target // tab a wɔayɛ no adwuma
- e . relatedTarget // tab a atwam no
- }) na .
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ɔ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 wɔ 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.
Trigger adwinnade no ho nsɛm denam javascript so:
- $ ( '#nhwɛso' ). adwinnade ho nsɛm ( akwan horow ) .
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: |
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>
Fa adwinnade a wɔde di dwuma no bata element ahorow a wɔaboaboa ano ho.
Ɛda element bi adwinnade ho nsɛm adi.
- $ ( '#adeɛ' ). adwinnade ho nsɛm ( 'kyerɛ' ) .
Fa element bi adwinnade ho nsɛm sie.
- $ ( '#adeɛ' ). adwinnade ho nsɛm ( 'hide' ) .
Toggles element bi adwinnade ho nsɛm.
- $ ( '#adeɛ' ). adwinnade ho nsɛm ( 'toggle' ) .
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ɔFa wo nsa hyɛ bɔtn no so na ama popover no ayɛ kɛse.
Ma popovers nyɛ adwuma denam javascript so:
- $ ( '#nhwɛso' ). popover ( nneɛma a wobetumi 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: |
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ɛ.
Fi ase popovers ma element ahorow a wɔaboaboa ano.
Ɛda elements popover bi adi.
- $ ( '#adeɛ' ). popover ( 'kyerɛ' ) .
Ɔde elements popover bi siei.
- $ ( '#adeɛ' ). popover ( 'de sie' ) .
Toggles an elements popover bi a ɛwɔ hɔ.
- $ ( '#adeɛ' ). popover ( 'nsakrae' ) .
Kɔkɔbɔ plugin no yɛ adesuakuw ketewaa bi a wɔde dwumadi a ɛbɛn ka kɔkɔbɔ ahorow ho.
TweAlerts plugin no yɛ adwuma wɔ alert messages a wɔde ba daa so, na esiw messages kwan.
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.
Ma kɔkɔbɔ bi a wɔpow no nyɛ adwuma denam javascript so:
- $ ( ".kɔbɔ" ). kɔkɔbɔ () .
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>
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ɔ .fade
ne .in
adesuakuw no a wɔde adi dwuma dedaw wɔ wɔn ho.
Ɛto kɔkɔbɔ bi mu.
- $ ( ".kɔbɔ" ). kɔkɔbɔ ( 'to mu' ) .
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 close wɔ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). |
- $ ( '#me-kɔbɔ' ). bind ( 'wɔato mu' , adwuma () { .
- // yɛ biribi...
- }) na .
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.
Yɛde collapse plugin no dii dwuma no, yɛyɛɛ accordion style widget a ɛnyɛ den:
Fa javascript so ma ɛnyɛ adwuma:
- $ ( ".abɔso" ). ahwe ase () .
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 |
Kɛkɛ add data-toggle="collapse"
ne a data-target
to element na automatically de control of a collapsible element. Attribute no data-target
gye css selector a wɔde collapse no bedi dwuma wɔ so. Hwɛ hu sɛ wode adesuakuw no bɛka collapse
element 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>
data-parent="#selector"
. Hwɛ demo no na woahu eyi wɔ adeyɛ mu.
Ɛ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 .
Toggles a collapsible element ma wɔakyerɛ anaa wɔde asie.
Kyerɛ element bi a ɛtumi hwe ase.
Ɛde element bi a wotumi bubu mu sie.
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 show wɔ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). |
tɛ | Wɔtow saa adeyɛ yi ntɛm ara bere a hide wɔ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). |
- $ ( '#me a wotumi de tow so' ). on ( 'ahintaw' , adwuma () { .
- // yɛ biribi...
- }) na .
Hwɛ slideshow a ɛwɔ ase ha no.
Frɛ fa javascript so:
- $ ( '.afiri a wɔde yɛ kar' ). carousel a wɔde yɛ nneɛma () .
Din | korɔ | mfiaseɛ | nkyerɛmu |
---|---|---|---|
ntamgyinafo | nɔma | 5000 na ɛwɔ hɔ | Bere dodow a ɛsɛ sɛ wɔtwentwɛn so wɔ ade bi a wɔde sakre tu kwan ankasa ntam. Sɛ ɛyɛ atoro a, carousel renkyinkyin ne ho. |
home so | ahoma | "hover" no. | Pauses cycling a carousel no wɔ mouseenter so na ɔsan fi ase cycling a carousel no wɔ mouseleave so. |
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 slide" >
- <!-- 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
Initializes carousel ne optional options object
na ofi ase sakre fa nneɛma mu.
- $ ( '.afiri a wɔde yɛ kar' ). carousel a wɔde yɛ nneɛma ({ .
- ntamgyinafo : 2000
- }) na .
Kyinkyin fa carousel nneɛma no mu fi benkum kɔ nifa.
Siw carousel no kwan sɛ ɛnsɛ sɛ ɔde sakre fa nneɛma mu.
Cycles carousel no kɔ frame pɔtee bi so (0 a egyina so, a ɛte sɛ array).
Kyinkyin kɔ ade a atwam no so.
Kyinkyin kɔ ade a edi hɔ no so.
Bootstrap carousel adesuakuw no da nsɛm abien a esisi ma hooking kɔ carousel dwumadi mu adi.
Dwumadie | Nkyerɛmu |
---|---|
pia fa so | Saa adeyɛ yi tow ntɛm ara bere a slide wɔfrɛ instance kwan no. |
hwirew mu | Wɔtow saa adeyɛ yi bere a carousel no awie ne slide nsakrae no. |
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ɔFi ase kyerɛw wɔ ase hɔ no mu na kyerɛ nea efii mu bae wɔ typeahead no mu.
Frɛ typeahead no fa javascript so:
- $ ( '.kyerɛw anim' ). typeahead () .
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 item wɔde bɛsɔ asɛmmisa no ahwɛ. Fa this.query . Sane boolean true sɛ 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 items na ɔ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 item na ɔwɔ typeahead nhwɛso no scope. Ɛsɛ sɛ ɛsan de html ba. |
Fa data su ahorow ka ho na fa kyerɛw element bi a ɛwɔ typeahead dwumadie.
- <input type = "nkyerɛwee" data-ma = "typeahead" >
Ɛhyɛ input bi ase denam typeahead so.