JavaScript nga Pagsasao
Iyeg ti biag dagiti paset ti Bootstrap babaen ti nasurok a maysa a dosena a kostumbre a plugin ti jQuery. Nalaka laeng nga iraman amin dagitoy, wenno saggaysa.
Iyeg ti biag dagiti paset ti Bootstrap babaen ti nasurok a maysa a dosena a kostumbre a plugin ti jQuery. Nalaka laeng nga iraman amin dagitoy, wenno saggaysa.
Dagiti plugin ket mabalin a mairaman a saggaysa (nga agus-usar kadagiti indibidual a *.js
papeles ti Bootstrap), wenno amin a maminsan (nga agus -usar bootstrap.js
wenno ti napabassit bootstrap.min.js
).
Agpada bootstrap.js
ken bootstrap.min.js
naglaon kadagiti amin a plugin iti maymaysa a file. Maysa laeng ti iraman.
Dadduma a plugin ken dagiti paset ti CSS ket agpannuray kadagiti dadduma a plugin. No iramanmo dagiti plugin a saggaysa, siguraduem a kitaen dagitoy a panagpanpanunot kadagiti dok. Imutektekanyo pay nga amin a plugin ket agpannuray iti jQuery (kayatna a sawen a ti jQuery ket masapul a mairaman sakbay dagiti plugin a papeles). Konsultaen ti mibower.json
tapno makita no ania dagiti bersion ti jQuery a nasuportaran.
Mabalinmo nga usaren amin a plugin ti Bootstrap a puro babaen ti markup API a saan a mangisurat iti maymaysa a linia ti JavaScript. Daytoy ti umuna a klase nga API ti Bootstrap ken rumbeng nga umuna a konsiderasionmo no agus-usar iti plugin.
Kas naibaga, iti dadduma a kasasaad mabalin a matarigagayan nga iddepen daytoy a panagandar. Gapuna, mangipaaykami pay ti abilidad a mangbaldado ti API ti attribute ti datos babaen ti panangikkat kadagiti amin a pasamak iti dokumento a namespaced babaen ti data-api
. Kastoy ti langa daytoy:
Saan laeng a dayta, tapno puntiriaen ti espesipiko a plugin, iraman laeng ti nagan ti plugin a kas maysa nga espasio ti nagan agraman ti espasio ti nagan ti data-api a kas iti daytoy:
Dika agusar kadagiti attribute ti datos manipud kadagiti adu a plugin iti isu met laeng nga elemento. Kas pagarigan, ti maysa a buton ket saan a mabalin nga agpada nga addaan iti tooltip ken ag-toggle iti modal. Tapno maibanag daytoy, agusar iti elemento a mangbalkot.
Patienmi pay a rumbeng a kabaelam nga usaren amin a plugin ti Bootstrap a puro babaen ti JavaScript API. Amin dagiti publiko nga API ket agmaymaysa, makadena a pamay-an, ken mangisubli ti koleksion a nagtignay.
Amin a pamay-an ket rumbeng nga umawat ti maysa nga opsional a banag ti pagpilian, ti maysa a kuerdas a mangpuntiria ti partikular a pamay-an, wenno awan (a mangirugi ti plugin nga addaan iti kasisigud a kababalin):
Tunggal plugin ket mangibutaktak pay ti raw constructor na iti maysa a Constructor
tagikua: $.fn.popover.Constructor
. No kayatmo ti makaala ti partikular a pagarigan ti plugin, alaem a direkta manipud iti maysa nga elemento: $('[rel="popover"]').data('popover')
.
Mabalinmo a baliwan dagiti kasisigud a panagitunos para iti maysa a plugin babaen ti panangbalbaliw ti Constructor.DEFAULTS
banag ti plugin:
No dadduma ket kasapulan nga agusar kadagiti plugin ti Bootstrap kadagiti dadduma a balangkas ti UI. Kadagitoy a kasasaad, dagiti panagdinnungpar ti namespace ket mabalin a sagpaminsan a mapasamak. No mapasamak daytoy, mabalinmo nga awagan .noConflict
ti plugin a kayatmo nga isublin ti pategna.
Ti Bootstrap ket mangipaay kadagiti kostumbre a pasamak para kadagiti kaaduan a naisangayan nga aramid dagiti plugin. Sapasap, dagitoy ket umay iti maysa nga infinitibo ken napalabas a partisipio a porma - a ti infinitibo (ex. show
) ket maitignay iti rugi ti maysa a pasamak, ken ti napalabas a partisipio a pormana (ex. shown
) ket maitignay iti pannakaileppas ti maysa nga aramid.
Manipud idi 3.0.0, amin a pasamak ti Bootstrap ket namespaced.
Amin nga infinitibo a pasamak ket mangipaay preventDefault
ti panagusar. Daytoy ket mangipaay ti abilidad a mangpasardeng ti pannakaipatungpal ti maysa nga aramid sakbay a mangrugi daytoy.
Ti bersion ti tunggal maysa kadagiti plugin ti jQuery ti Bootstrap ket mabalin a mastrek babaen ti VERSION
tagikua ti konstruktor ti plugin. Kas pagarigan, para iti plugin ti tooltip:
Dagiti plugin ti Bootstrap ket saan a matnag nga agsubli a partikular a grasia no ti JavaScript ket nabalbaliwan. No maseknanka iti padas ti agar-aramat iti daytoy a kaso, usarem <noscript>
a mangilawlawag ti kasasaad (ken no kasano nga ipalubos manen ti JavaScript) kadagiti agar-aramatmo, ken/wenno manginayon kadagiti bukodmo a kostumbre a fallback.
Ti Bootstrap ket saan nga opisial a mangsuporta kadagiti maikatlo a partido a biblioteka ti JavaScript a kas ti Prototype wenno jQuery UI. Iti laksid .noConflict
ken dagiti namespaced a pasamak, mabalin nga adda dagiti parikut ti panagtunos a kasapulam nga ilinteg a bukodmo.
Para kadagiti simple nga epekto ti panagbalbaliw, iraman ti transition.js
maminsan a kadua dagiti dadduma a JS a papeles. No us-usarenyo ti naurnong (wenno napabassit) bootstrap.js
, saan a kasapulan nga iraman daytoy—addan dayta.
Ti Transition.js ket maysa a batayan a katulongan para kadagiti transitionEnd
pasamak ken kasta met ti maysa a CSS a panagbalbaliw nga emulator. Daytoy ket us-usaren babaen dagiti sabali a plugin tapno mangsukimat ti suporta ti panagbalbaliw ti CSS ken tapno makatiliw kadagiti agbitin a panagbalbaliw.
Dagiti panagbalbaliw ket mabalin a sangalubongan a mapasardeng babaen ti panagusar ti sumaganad a snippet ti JavaScript, a masapul nga umay kalpasan ti transition.js
(wenno bootstrap.js
wenno bootstrap.min.js
, kas ti kaso) a naikarga:
Dagiti modal ket naurnos, ngem nalaka a maibagay, dagiti dialogo a panagkiddaw nga addaan kadagiti kabassitan a kasapulan a panagusar ken dagiti nasirib a default.
Siguraduenyo a dikay luktan ti modal bayat a makita pay laeng ti sabali. Ti panangiparang ti ad-adu ngem maysa a modal iti maysa a gundaway ket agkasapulan ti kostumbre a kodigo.
Kanayon a padasem nga ikabil ti kodigo ti HTML ti maysa a modal iti kangatuan nga antas a posision iti dokumentom tapno maliklikan dagiti dadduma a paset a mangapektar iti langa ken/wenno panagusar ti modal.
Adda sumagmamano a pakdaar maipapan iti panangusar kadagiti modal kadagiti mobile device. Kitaen dagiti dokumento ti suporta ti browsermi para kadagiti detalye.
Gapu ti no kasano a ti HTML5 ket mangikeddeng ti semantikana, ti autofocus
kabileg ti HTML ket awan ti epektona kadagiti modal ti Bootstrap. Tapno magun-od ti isu met laeng nga epekto, agusarka iti sumagmamano a kostumbre a JavaScript:
Maysa a naiparang a modal nga addaan iti ulo, bagi, ken grupo dagiti tignay iti footer.
I-toggle ti maysa a modal babaen ti JavaScript babaen ti panangi-klik ti buton iti baba. Ag-slide dayta nga agpababa ken agkupas manipud iti ngato ti panid.
Siguraduen nga inayon role="dialog"
ken aria-labelledby="..."
, a mangireperensia iti modal a paulo, iti .modal
, ken role="document"
iti .modal-dialog
mismo.
Mainayon pay, mabalinmo nga ited ti panangiladawan ti modal a dialogom babaen ti aria-describedby
on .modal
.
Ti panangikabil kadagiti video ti YouTube kadagiti modal ket kasapulan ti kanayonan a JavaScript nga awan iti Bootstrap tapno automatiko a maisardeng ti panagtokar ken dadduma pay. Kitaen daytoy a makatulong a Stack Overflow a post para iti ad-adu pay nga impormasion.
Dagiti modal ket addaan kadagiti dua a pagpilian a kadakkel, a magun-od babaen dagiti klase ti mangbalbaliw a maikabil iti maysa a .modal-dialog
.
Para kadagiti modal a basta agparang imbes nga agkupas tapno makita, ikkaten ti .fade
klase manipud iti modal markup-mo.
Tapno magundawayan ti sistema ti grid ti Bootstrap iti uneg ti maysa a modal, basta umok .row
s iti uneg ti .modal-body
ken kalpasanna usaren dagiti gagangay a klase ti sistema ti grid.
Adda kadi bunggoy dagiti buton nga amin ket mangtignay iti isu met laeng a modal, nga addaan laeng iti naiduma bassit a linaon? Usaren event.relatedTarget
ken dagiti HTML data-*
a kababalin (mabalin babaen ti jQuery ) tapno agbaliw ti linaon ti modal depende no ania a buton ti nai-klik. Kitaen dagiti dok ti Modal Events para kadagiti detalye iti relatedTarget
, .
Ti modal a plugin ket mangbalbaliw ti nailemmeng a linaonmo no kasapulan, babaen dagiti attribute ti datos wenno JavaScript. Daytoy ket manginayon pay .modal-open
iti <body>
tapno mangbalbaliw ti kasisigud a kababalin ti panag-scroll ken mangpataud ti a .modal-backdrop
tapno mangipaay ti lugar ti panagpidut para iti panangilaksid kadagiti naipakita a modal no ag-klik iti ruar ti modal.
Aktiboen ti modal a saan nga agsurat iti JavaScript. Itakderan data-toggle="modal"
iti maysa nga elemento ti kontrolador, a kas ti buton, agraman ti maysa data-target="#foo"
wenno href="#foo"
tapno puntiriaen ti espesipiko a modal tapno ag-toggle.
Awagan ti modal nga addaan iti id myModal
nga addaan iti maymaysa a linia ti JavaScript:
Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-
, a kas iti data-backdrop=""
.
Nagan | tipo | default | panangiladawan |
---|---|---|---|
backdrop ti likud | boolean wenno ti kuerdas'static' |
agpayso | Iramanna ti modal-backdrop nga elemento. Saan laeng a dayta, ikeddeng static para iti backdrop a saan a mangiserra ti modal iti panagpidut. |
teklado nga | boolean nga | agpayso | Serraan ti modal no maipidut ti escape key |
ipakita | boolean nga | agpayso | Ipakita ti modal no mairugi. |
nauneg | dalan | saan nga agpayso | Daytoy a pagpilian ket saanen a maus-usar manipud idi v3.3.0 ken naikkaten iti v4. Irekomendarmi ketdi ti panagusar ti plantilia ti sikigan ti kliyente wenno ti maysa a balangkas ti panagtengngel ti datos, wenno ti panagayab ti jQuery.load a mismo. No ti adayo nga URL ket naited, ti linaon ket maikarga iti maysa a daras babaen ti pamay-an ti jQuery |
.modal(options)
Aktiboenna ti linaonmo kas modal. Awaten ti maysa nga opsional a pagpilian object
.
.modal('toggle')
Manual nga i-toggle ti maysa a modal. Agsubli iti tumawag sakbay nga aktual a naipakita wenno nailemmeng ti modal (kayatna a sawen sakbay a mapasamak ti shown.bs.modal
wenno hidden.bs.modal
pasamak).
.modal('show')
Manual a luktan ti maysa a modal. Agsubli iti tumawag sakbay nga aktual a naipakita ti modal (kayatna a sawen sakbay a shown.bs.modal
mapasamak ti pasamak).
.modal('hide')
Manual nga ilemmeng ti maysa a modal. Agsubli iti tumawag sakbay nga aktual a nailemmeng ti modal (kayatna a sawen sakbay a hidden.bs.modal
mapasamak ti pasamak).
.modal('handleUpdate')
Ibaga manen ti posision ti modal tapno kontraen ti maysa nga scrollbar no kas pagarigan ti maysa ket rumbeng nga agparang, a mangaramid koma ti modal a panagluksaw iti kannigid.
Kasapulan laeng no agbaliw ti kangato ti modal bayat a nakalukat dayta.
Ti modal a klase ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti modal a panagusar.
Amin a modal a pasamak ket maipaputok iti modal a mismo (kayatna a sawen iti <div class="modal">
).
Kita ti Pasamak | Panangiladawan |
---|---|
ipakita.bs.modal nga | Daytoy a pasamak ket agputok a dagus no ti show pamay-an ti pagarigan ket maawagan. No gapuanan ti panagpidut, ti nai-klik nga elemento ket magun-od a kas ti relatedTarget tagikua ti pasamak. |
naipakita.bs.modal | Daytoy a pasamak ket mapaputok no ti modal ket naaramiden a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas). No gapuanan ti panagpidut, ti nai-klik nga elemento ket magun-od a kas ti relatedTarget tagikua ti pasamak. |
ilemmeng.bs.modal nga | Daytoy a pasamak ket dagus a mapaputok no ti hide pamay-an ti pagarigan ket naawagan. |
nailemmeng.bs.modal | Daytoy a pasamak ket mapaputok no ti modal ket nalpas a nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas). |
nakargaan.bs.modal | Daytoy a pasamak ket mapaputok no ti modal ket nangikarga ti linaon babaen ti panagusar ti remote pagpilian. |
Inayon dagiti dropdown menu iti dandani aniaman babaen iti daytoy simple a plugin, agraman ti navbar, tab, ken pildoras.
Babaen dagiti kabileg ti datos wenno JavaScript, ti dropdown a plugin ket mangbalbaliw ti nailemmeng a linaon (dagiti dropdown a menu) babaen ti panangi-toggle ti .open
klase iti banag ti listaan dagiti nagannak.
Kadagiti mobile device, ti pananglukat iti dropdown ket mangnayon iti .dropdown-backdrop
kas maysa a tap area para iti panangserra kadagiti dropdown menu no ag-tap iti ruar ti menu, maysa a kasapulan para iti umno a suporta ti iOS. Kaipapanan daytoy a ti panagbalbaliw manipud iti open dropdown menu nga agturong iti sabali a dropdown menu ket kasapulan ti ekstra a panangi-tap iti mobile.
Pakaammo: Ti data-toggle="dropdown"
attribute ket agpannuray para iti panagserra kadagiti dropdown a menu iti maysa a lebel ti aplikasion, isu a nasayaat nga ideya a kanayon nga usaren daytoy.
Inayon data-toggle="dropdown"
iti link wenno buton tapno mai-toggle ti dropdown.
Tapno agtalinaed a saan a nadadael dagiti URL babaen dagiti buton ti silpo, usaren ti data-target
attribute imbes a href="#"
.
Tawagan dagiti dropdown babaen ti JavaScript:
data-toggle="dropdown"
kasapulan pay laengUray no awagam ti dropdownmo babaen ti JavaScript wenno imbes ketdi usarem ti data-api, data-toggle="dropdown"
ket kanayon a kasapulan nga adda iti trigger element ti dropdown.
Awan
$().dropdown('toggle')
I-toggle ti dropdown menu ti naited a navbar wenno tabbed navigation.
Amin a dropdown a pasamak ket maipaputok iti .dropdown-menu
's nagannak nga elemento.
Amin a dropdown a pasamak ket addaan iti relatedTarget
tagikua, a ti pategna ket ti agbalbaliw nga elemento ti angkla.
Kita ti Pasamak | Panangiladawan |
---|---|
ipakita.bs.dropdown | Daytoy a pasamak ket agputok a dagus no ti pamay-an ti show instance ket maawagan. |
naipakita.bs.dropdown | Daytoy a pasamak ket mapaputok no ti dropdown ket naaramiden a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti CSS, tapno makompleto). |
ilemmeng.bs.ag-dropdown | Daytoy a pasamak ket dagus a mapaputok no ti pamay-an ti panaglemmeng ti pagarigan ket naawagan. |
nailemmeng.bs.dropdown | Daytoy a pasamak ket mapaputok no ti dropdown ket nalpas a nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS, tapno makompleto). |
Ti plugin ti ScrollSpy ket para iti automatiko a panangpabaro kadagiti puntiria ti nav a naibatay iti posision ti panag-scroll. I-scroll ti lugar iti baba ti navbar ken buyaen ti aktibo a panagbalbaliw ti klase. Mai-highlight met dagiti dropdown sub items.
Ad leggings keytar, brunch id arte partido dolor labore. Pitchfork yr enim lo-fi sakbay nga nailako da qui. Tumblr farm-to-table bisikleta karbengan aniaman. Anim keffiyeh ni carles nga cardigan. Velit seitan cabina ti retrato ni mcsweeney 3 lobo bulan irure. Cosby suéter lomo jean shorts, williamsburg hoodie minim qui nalabit saanmo a nangngeg dagitoy et cardigan pondo ti panagtalek culpa biodiesel wes anderson estetika. Nihil tattoo nga accusamus, cred ironia biodiesel keffiyeh artisano ullamco consequat.
Veniam marfa bigote nga skateboard, adipisicing fugiat velit pitchfork barbas. Freegan barbas aliqua cupidatat nga vero ni mcsweeney. Cupidatat uppat a loko nisi, ea helvetica nulla carles. Tattooed cosby suéter trak ti taraon, mcsweeney ni mcsweeney nga quis non freegan vinyl. Lo-fi wes anderson +1 nga sartorial. Carles saan nga estetiko nga ehersisio quis gentrify. Brooklyn adipisicing craft nga serbesa bise keytar deserunt.
Occaecat nga komodo nga aliqua delectus. Fap craft serbesa deserunt nga skateboard ea. Lomo bisikleta karbengan adipisicing banh mi, velit ea sunt sumaruno a lebel locavore maymaysa ti nagtaudanna a kape iti magna veniam. Nangato nga biag id vinyl, echo parke consequat quis aliquip banh mi tinidor. Vero VHS nga adipisicing. Consectetur nisi DIY minim nga bag ti mensahero. Cred ex iti, natalged a delectus consectetur fanny pack iphone.
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 mensahero bag marfa aniaman delectus trak ti taraon. Sapiente nga sinte nga id nga assumenda. Locavore sed helvetica cliche irony, thundercats nalabit dimo pay nangngeg ida consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat sakbay a nailakoda, terry richardson proident brunch nesciunt quis cosby suéter pariatur keffiyeh ut helvetica artisano. Cardigan nga craft nga serbesa seitan nga nakasagana velit. VHS chambray laboris nga apagbiit nga veniam. Anim mollit minim commodo ullamco nga mga pusa nga gurruod.
Dagiti silpo ti Navbar ket masapul nga addaan kadagiti masolbar nga id a puntiria. Kas pagarigan, ti a ket <a href="#home">home</a>
masapul a maitunos iti maysa a banag iti DOM a kas ti <div id="home"></div>
.
:visible
a target nga elemento ket saan a naikankanoDagiti puntiria nga elemento a saan a :visible
segun ti jQuery ket mailaksid ken dagiti maitunos a nav a banagda ket saan a pulos a mai-highlight.
Uray ania ti pamay-an ti pannakaipatungpal, ti scrollspy ket agkasapulan ti panagusar ti position: relative;
iti elemento nga espiaem. Iti kaaduan a kaso daytoy ti <body>
. No ag-scrollspying kadagiti elemento malaksid iti <body>
, siguraduen nga addaan iti height
set ken overflow-y: scroll;
naipakat.
Tapno nalaka a manginayon ti kababalin ti scrollspy iti nabigasionmo iti topbar, inayonmo data-spy="scroll"
ti elemento a kayatmo nga espia (kaaduan a gagangay a daytoy ket isu koma ti <body>
). Kalpasanna inayon ti data-target
attribute nga addaan iti ID wenno klase ti nagannak nga elemento ti ania man a .nav
paset ti Bootstrap.
Kalpasan ti pananginayon position: relative;
iti CSS-mo, tawagam ti scrollspy babaen ti JavaScript:
.scrollspy('refresh')
No agus-usar ti scrollspy a maikuyog ti pananginayon wenno panangikkat kadagiti elemento manipud iti DOM, kasapulam nga awagan ti pamay-an ti panagpabaro a kas iti kasta:
Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-
, a kas iti data-offset=""
.
Nagan | tipo | default | panangiladawan |
---|---|---|---|
offset nga | bilang | 10 nga | Pixels nga offset manipud iti ngato no kalkularen ti posision ti scroll. |
Kita ti Pasamak | Panangiladawan |
---|---|
aktiboen ti.bs.scrollspy | Daytoy a pasamak ket agputok tunggal ti baro a banag ket agbalin nga aktibo babaen ti scrollspy. |
Inayon ti napardas, dinamiko a panagusar ti tab iti panagbalbaliw babaen dagiti pane ti lokal a linaon, urayno babaen dagiti dropdown a menu. Saan a masuportaran dagiti naisanglad a tab.
Raw denim dimo la ketdi nangngeg ida jean shorts Austin. Nesciunt tofu stumptown aliqua, retro nga sintet nga maestro nga pagdalus. Bigote cliche tempor, williamsburg carles nga vegan nga helvetica. Reprehenderit ti agkarkarnero retro keffiyeh ti mangtiliw ti tagtagainep synth. Cosby suéter eu banh mi, qui irure terry richardson dati nga pusit. Aliquip lugarat salvia cillum nga iphone. Seitan aliquip quis cardigan nga amerikano nga kawes, karnisero 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.
Daytoy a plugin ket mangpalawa ti tabbed a paset ti nabigasion tapno manginayon kadagiti tabbable a lugar.
Pagbalinen dagiti tabbable a tab babaen ti JavaScript (tunggal tab ket kasapulan a mapaaktibo a saggaysa):
Mabalinmo nga aktiboen dagiti indibidual a tab iti sumagmamano a wagas:
Mabalinmo nga aktiboen ti tab wenno pildoras a nabigasion a dika agsurat iti aniaman a JavaScript babaen ti basta panangidatag data-toggle="tab"
wenno data-toggle="pill"
iti maysa nga elemento. Ti pananginayon kadagiti klase ti nav
ken nav-tabs
iti tab ul
ket mangyaplikar ti estilo ti tab ti Bootstrap , bayat a ti pananginayon kadagiti klase ti nav
ken ket mangyaplikar ti estilo ti pildoras .nav-pills
Tapno agkupas dagiti tab, inayon .fade
iti tunggal .tab-pane
. Ti umuna a tab pane ket masapul pay .in
a mangaramid ti umuna a linaon a makita.
$().tab
Paaktiboenna ti elemento ti tab ken container ti linaon. Ti tab ket rumbeng nga addaan iti maysa data-target
wenno maysa a href
mangpuntiria iti maysa a container node iti DOM. Kadagiti pagarigan iti ngato, dagiti tab ket dagiti <a>
s nga addaan kadagiti data-toggle="tab"
attribute.
.tab('show')
Pilien ti naited a tab ken ipakitana ti nainaig a linaonna. Aniaman a sabali a tab a dati a napili ket agbalin a di napili ken mailemmeng ti nainaig a linaonna. Agsubli iti tumawag sakbay nga aktual a naipakita ti tab pane (kayatna a sawen sakbay a shown.bs.tab
mapasamak ti pasamak).
No mangipakita ti baro a tab, dagiti pasamak ket agputok iti sumaganad nga urnos:
hide.bs.tab
(iti agdama nga aktibo a tab)show.bs.tab
(iti tab a maipakita)hidden.bs.tab
(iti napalabas nga aktibo a tab, isu met laeng ti para iti hide.bs.tab
pasamak)shown.bs.tab
(iti baro nga aktibo a kabarbaro a naipakita a tab, isu met laeng ti para iti show.bs.tab
pasamak)No awan ti tab a dati nga aktibo, kalpasanna ti hide.bs.tab
ken hidden.bs.tab
dagiti pasamak ket saan a mapaputok.
Kita ti Pasamak | Panangiladawan |
---|---|
ipakita.bs.tab | Daytoy a pasamak ket agpuor iti tab show, ngem sakbay a naipakita ti baro a tab. Usaren ti event.target ken event.relatedTarget tapno puntiriaen ti aktibo a tab ken ti napalabas nga aktibo a tab (no adda) a nagsasaruno. |
naipakita.bs.tab | Daytoy a pasamak ket agpuor iti tab show kalpasan a naipakita ti maysa a tab. Usaren ti event.target ken event.relatedTarget tapno puntiriaen ti aktibo a tab ken ti napalabas nga aktibo a tab (no adda) a nagsasaruno. |
ilemmeng.bs.tab | Daytoy a pasamak ket agputok no ti baro a tab ket maipakita (ken iti kasta ti napalabas nga aktibo a tab ket mailemmeng). Usaren ti event.target ken event.relatedTarget tapno puntiriaen ti agdama nga aktibo a tab ken ti baro nga asidegen nga aktibo a tab, agpada. |
nailemmeng.bs.tab | Daytoy a pasamak ket agputok kalpasan ti baro a tab a maipakita (ken iti kasta ti napalabas nga aktibo a tab ket mailemmeng). Usaren ti event.target ken event.relatedTarget tapno puntiriaen ti napalabas nga aktibo a tab ken ti baro nga aktibo a tab, a nagsasaruno. |
Napaltiingan babaen ti nagsayaat a jQuery.tipsy plugin nga insurat ni Jason Frame; Dagiti tip ti ramit ket maysa a napabaro a bersion, a saan nga agpannuray kadagiti ladawan, agus-usar ti CSS3 para kadagiti animasion, ken dagiti data-attribute para iti lokal a pagipempenan ti paulo.
Dagiti Tooltip nga addaan kadagiti zero-length a paulo ket saan a pulos a maiparang.
I-hover dagiti link iti baba tapno makita dagiti toltips:
Tight pants next level keffiyeh dimo la ketdi nangngeg. Photo booth barbas hilaw nga denim nga letterpress vegan nga mensahero nga bag stumptown. Talon-agingga-lamisaan seitan, mcsweeney's fixie sustainable quinoa 8-bit american a kawes addaan iti terry richardson vinyl chambray. Barbas stumptown, cardigans banh mi lomo dagiti gurruod a pusa. Tofu biodiesel williamsburg marfa, uppat a loko mcsweeney ti dalusan ti vegan a chambray. A talaga nga ironic nga artisano aniaman ti keytar , scenester talon-agingga-iti-lamisaan banksy Austin twitter handle freegan cred hilaw denim maymaysa-origin a kape viral.
Uppat a pagpilian ti magun-odan: ngato, kannawan, baba, ken kannigid a naitunos.
Para kadagiti rason ti panagaramid, ti Tooltip ken Popover data-apis ket opt-in, kayatna a sawen a masapul nga irugim a mismo dagitoy .
Ti maysa a wagas a mangirugi kadagiti amin a toltip iti maysa a panid ket ti panangpili kadagitoy babaen ti data-toggle
attribute-da:
Ti plugin ti tooltip ket mangpataud ti linaon ken panagmarka no kasapulan, ken babaen ti kasisigud ket mangikabil kadagiti tooltip kalpasan ti elementoda a mangtignay.
I-trigger ti tooltip babaen ti JavaScript:
Ti kasapulan a marka para iti tooltip ket maysa laeng nga data
attribute ken title
iti elemento ti HTML kayatmo nga addaan iti tooltip. Ti napataud a marka ti maysa a tooltip ket imbes a simple, urayno daytoy ket agkasapulan ti posision (babaen ti kasisigud, naikeddeng iti top
babaen ti plugin).
No dadduma kayatmo ti mangnayon iti tooltip iti hyperlink a mangbalkot iti adu a linia. Ti kasisigud a kababalin ti plugin ti tooltip ket ti panangisentro iti daytoy a paidasig ken bertikal. Inayonmo white-space: nowrap;
kadagiti angkla tapno maliklikan daytoy.
No agus-usar kadagiti toltip kadagiti elemento iti uneg ti a .btn-group
wenno an .input-group
, wenno kadagiti elemento a mainaig iti lamisaan ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), masapul nga ikeddengmo ti pagpilian container: 'body'
(nadokumento iti baba) tapno maliklikan dagiti di matarigagayan nga epekto (kas ti elemento a dumakdakkel a lumawa ken/ wenno mapukaw dagiti nagtimbukel a sulina no mai-trigger ti tooltip).
Para kadagiti agar-aramat nga ag-navigate babaen ti teklado, ken nangruna dagiti agar-aramat kadagiti makatulong a teknolohia, rumbeng laeng nga inayonmo dagiti tooltip kadagiti elemento a maipangpangruna iti teklado a kas dagiti silpo, dagiti kontrol ti porma, wenno ania man nga arbitrario nga elemento nga addaan iti tabindex="0"
attribute.
Tapno mainayon ti tooltip iti a disabled
wenno .disabled
elemento, ikabil ti elemento iti uneg ti a <div>
ken iyaplikar <div>
ketdi ti tooltip iti dayta.
Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-
, a kas iti data-animation=""
.
Nagan | Tipo | Default | Panangiladawan |
---|---|---|---|
animasion nga | boolean nga | agpayso | Iyaplikar ti panagbalbaliw ti panagkupas ti CSS iti tooltip |
pagkargaan | kuerdas nga | saan nga agpayso | saan nga agpayso | Inayon ti tooltip iti espesipiko nga elemento. Kas pagarigan: |
itantan | numero | banag | 0 nga | Ti pannakataktak ti panangipakita ken panangilemmeng ti tooltip (ms) - saan nga agaplikar iti manual a kita ti trigger No naited ti numero, maipakat ti delay agpadpada iti hide/show Ti estruktura ti banag ket: |
html nga | boolean nga | saan nga agpayso | Ikabil ti HTML iti tooltip. No palso, ti text pamay-an ti jQuery ket mausarto a mangikabil ti linaon iti DOM. Usaren ti teksto no madanaganka kadagiti panangraut ti XSS. |
pannakaikabil | kuerdas nga | amad | 'ngato' | Kasano ti mangiposision ti tooltip - ngato | baba | kanigid | kannawan | auto nga. No ti maysa a panagandar ket maus-usar a mangikeddeng ti pannakaikabil, daytoy ket maawagan nga addaan ti tooltip a DOM a nodo a kas ti umuna nga argumentona ken ti mangtignay nga elemento a DOM a nodo a kas ti maikadua. Ti |
agpili nga | kuerdas | saan nga agpayso | No ti maysa a mangpili ket naited, dagiti banag ti tooltip ket maitedto kadagiti naikeddeng a puntiria. Iti praktis, daytoy ket maus-usar tapno mapalubosan ti dinamiko a linaon ti HTML nga addaan kadagiti tooltip a nainayon. Kitaen daytoy ken ti makaisuro a pagarigan . |
plantilia nga | kuerdas | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Base ti HTML nga usaren no mangpartuat ti tooltip. Ti tooltip's
Ti makinruar unay nga elemento ti balkot ket rumbeng nga addaan iti |
titulo | kuerdas nga | amad | '' . | Default a pateg ti paulo no No ti maysa a panagandar ket naited, daytoy ket maawaganto nga addaan ti |
kalbiten | kuerdas | 'hover nga pokus'. | Kasano a mai-trigger ti tooltip - i-klik ti | ag-hover nga | pokus | giya. Mabalin a lumasatka iti adu a trigger; pagsinaen ida babaen ti maysa nga espasio. manual saan a mabalin a maitipon iti aniaman a sabali a trigger. |
viewport | kuerdas nga | banag | amad | { agpili: 'bagi', padding: 0 } . | Pagtalinaedenna ti tooltip iti uneg dagiti beddeng daytoy nga elemento. Kas pagarigan: No ti maysa a panagandar ket naited, daytoy ket maawagan nga addaan ti mangtignay nga elemento a DOM a nodo a kas ti kakaisuna nga argumentona. Ti |
Dagiti pagpilian para kadagiti indibidual a toltip ket mabalin a alternatibo a maikeddeng babaen ti panagusar kadagiti kababalin ti datos, a kas naipalawag iti ngato.
$().tooltip(options)
Ikapet ti tooltip handler iti maysa a koleksion ti elemento.
.tooltip('show')
Ipalgakna ti tooltip ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a naipakita ti tooltip (kayatna a sawen sakbay a shown.bs.tooltip
mapasamak ti pasamak). Daytoy ket maibilang a "manual" a panagtignay ti tooltip. Dagiti Tooltip nga addaan kadagiti zero-length a paulo ket saan a pulos a maiparang.
.tooltip('hide')
Ilemmeng ti tooltip ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a nailemmeng ti tooltip (kayatna a sawen sakbay a hidden.bs.tooltip
mapasamak ti pasamak). Daytoy ket maibilang a "manual" a panagtignay ti tooltip.
.tooltip('toggle')
I-toggle ti tooltip ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a naipakita wenno nailemmeng ti tooltip (kayatna a sawen sakbay a mapasamak ti shown.bs.tooltip
wenno hidden.bs.tooltip
pasamak). Daytoy ket maibilang a "manual" a panagtignay ti tooltip.
.tooltip('destroy')
Ilemmeng ken dadaelenna ti tooltip ti maysa nga elemento. Dagiti tip ti ramit nga agus-usar ti delegasion (a naparsua babaen ti panagusar ti selector
pagpilian ) ket saan a mabalin a saggaysa a madadael kadagiti kaputotan a mangtignay nga elemento.
Kita ti Pasamak | Panangiladawan |
---|---|
ipakita.bs.tooltip | Daytoy a pasamak ket agputok a dagus no ti show pamay-an ti pagarigan ket maawagan. |
naipakita.bs.tooltip | Daytoy a pasamak ket mapaputok no ti tooltip ket naaramiden a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas). |
ilemmeng.bs.tipo ti ramit | Daytoy a pasamak ket dagus a mapaputok no ti hide pamay-an ti pagarigan ket naawagan. |
nailemmeng.bs.tooltip | Daytoy a pasamak ket mapaputok no ti tooltip ket nalpas a nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a makompleto). |
naikabil.bs.tooltip | Daytoy a pasamak ket mapaputok kalpasan ti show.bs.tooltip pasamak no ti plantilia ti tooltip ket nainayon iti DOM. |
Inayon dagiti babassit nga overlay ti linaon, kas kadagidiay adda iti iPad, iti aniaman nga elemento para iti panagbalay iti segundario nga impormasion.
Dagiti popover nga agpada a zero-length ti paulo ken linaonda ket saan a pulos a maiparang.
Dagiti Popovers ket kasapulan ti tooltip plugin a mairaman iti bersionmo ti Bootstrap.
Para kadagiti rason ti panagaramid, ti Tooltip ken Popover data-apis ket opt-in, kayatna a sawen a masapul nga irugim a mismo dagitoy .
Ti maysa a wagas a mangirugi kadagiti amin a popover iti maysa a panid ket isu koma ti panangpili kadagitoy babaen ti data-toggle
attributeda:
No agus-usar kadagiti popover kadagiti elemento iti uneg ti a .btn-group
wenno an .input-group
, wenno kadagiti elemento a mainaig iti lamisaan ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), masapul nga ikeddengmo ti pagpilian container: 'body'
(nadokumento iti baba) tapno maliklikan dagiti di matarigagayan nga epekto (kas ti elemento a dumakdakkel a lumawa ken/ wenno pannakapukaw dagiti nagtimbukel a sulina no mai-trigger ti popover).
Tapno mainayon ti popover iti a disabled
wenno .disabled
elemento, ikabil ti elemento iti uneg ti a <div>
ken iyaplikar ketdi ti popover iti dayta <div>
.
No dadduma kayatmo ti mangnayon iti popover iti hyperlink a mangbalkot iti adu a linia. Ti kasisigud a kababalin ti popover plugin ket ti panangisentro iti daytoy a paidasig ken bertikal. Inayonmo white-space: nowrap;
kadagiti angkla tapno maliklikan daytoy.
Uppat a pagpilian ti magun-odan: ngato, kannawan, baba, ken kannigid a naitunos.
Sed posuere nga consectetur est iti lobortis. Aenean nga eu leo quam. Pellentesque nga arkos ti lacinia quam venenatis vestibulum.
Sed posuere nga consectetur est iti lobortis. Aenean nga eu leo quam. Pellentesque nga arkos ti lacinia quam venenatis vestibulum.
Sed posuere nga consectetur est iti lobortis. Aenean nga eu leo quam. Pellentesque nga arkos ti lacinia quam venenatis vestibulum.
Sed posuere nga consectetur est iti lobortis. Aenean nga eu leo quam. Pellentesque nga arkos ti lacinia quam venenatis vestibulum.
Usaren ti focus
trigger tapno mailaksid dagiti popovers iti sumaganad a panagpidut nga aramiden ti agar-aramat.
Para iti umno a kababalin ti krus-browser ken krus-plataporma, masapul nga usarem ti <a>
etiketa, saan a ti <button>
etiketa, ken masapul met nga iramanmo dagiti role="button"
ken dagiti tabindex
kababalin.
Pagbalinen dagiti popover babaen ti JavaScript:
Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-
, a kas iti data-animation=""
.
Nagan | Tipo | Default | Panangiladawan |
---|---|---|---|
animasion nga | boolean nga | agpayso | Iyaplikar ti CSS fade transition iti popover |
pagkargaan | kuerdas nga | saan nga agpayso | saan nga agpayso | Inayon ti popover iti espesipiko nga elemento. Kas pagarigan: |
linaon | kuerdas nga | amad | '' . | Default a pateg ti linaon no No ti maysa a panagandar ket naited, daytoy ket maawaganto nga addaan ti |
itantan | numero | banag | 0 nga | Ti panangitantan ti panangipakita ken panangilemmeng ti popover (ms) - saan nga agaplikar iti manual a kita ti trigger No naited ti numero, maipakat ti delay agpadpada iti hide/show Ti estruktura ti banag ket: |
html nga | boolean nga | saan nga agpayso | Ikabil ti HTML iti popover. No palso, ti text pamay-an ti jQuery ket mausarto a mangikabil ti linaon iti DOM. Usaren ti teksto no madanaganka kadagiti panangraut ti XSS. |
pannakaikabil | kuerdas nga | amad | 'kusto' | Kasano nga iposision ti popover - top | baba | kanigid | kannawan | auto nga. No ti maysa a panagandar ket maus-usar a mangikeddeng ti pannakaikabil, daytoy ket maawagan nga addaan ti popover DOM a nodo a kas ti umuna nga argumentona ken ti mangtignay nga elemento a DOM a nodo a kas ti maikadua. Ti |
agpili nga | kuerdas | saan nga agpayso | No ti maysa a mangpili ket naited, dagiti banag ti popover ket maitedto kadagiti naikeddeng a puntiria. Iti praktis, daytoy ket maus-usar tapno mapalubosan ti dinamiko a linaon ti HTML nga addaan kadagiti popover a nainayon. Kitaen daytoy ken ti makaisuro a pagarigan . |
plantilia nga | kuerdas | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Base ti HTML nga usaren no mangpartuat ti popover. Ti popover's Ti popover's
Ti makinruar unay nga elemento ti balkot ket rumbeng nga addaan iti |
titulo | kuerdas nga | amad | '' . | Default a pateg ti paulo no No ti maysa a panagandar ket naited, daytoy ket maawaganto nga addaan ti |
kalbiten | kuerdas | 'i-click'. | Kasano a mai-trigger ti popover - i-click ti | ag-hover nga | pokus | giya. Mabalin a lumasatka iti adu a trigger; pagsinaen ida babaen ti maysa nga espasio. manual saan a mabalin a maitipon iti aniaman a sabali a trigger. |
viewport | kuerdas nga | banag | amad | { agpili: 'bagi', padding: 0 } . | Pagtalinaedenna ti popover iti uneg ti beddeng daytoy nga elemento. Kas pagarigan: No ti maysa a panagandar ket naited, daytoy ket maawagan nga addaan ti mangtignay nga elemento a DOM a nodo a kas ti kakaisuna nga argumentona. Ti |
Dagiti pagpilian para kadagiti indibidual a popover ket mabalin nga alternatibo a maikeddeng babaen ti panagusar kadagiti kababalin ti datos, a kas naipalawag iti ngato.
$().popover(options)
Mangrugi kadagiti popovers para iti maysa a koleksion ti elemento.
.popover('show')
Ipalgakna ti popover ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a naipakita ti popover (kayatna a sawen sakbay a shown.bs.popover
mapasamak ti pasamak). Maibilang daytoy a "manual" a panangtignay iti popover. Dagiti popover nga agpada a zero-length ti paulo ken linaonda ket saan a pulos a maiparang.
.popover('hide')
Ilemmengna ti popover ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a nailemmeng ti popover (kayatna a sawen sakbay a hidden.bs.popover
mapasamak ti pasamak). Maibilang daytoy a "manual" a panangtignay iti popover.
.popover('toggle')
I-toggles ti popover ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a naipakita wenno nailemmeng ti popover (kayatna a sawen sakbay a mapasamak ti shown.bs.popover
wenno hidden.bs.popover
pasamak). Maibilang daytoy a "manual" a panangtignay iti popover.
.popover('destroy')
Ilemmeng ken dadaelenna ti popover ti maysa nga elemento. Dagiti popover nga agus-usar ti delegasion (a naparsua babaen ti panagusar ti selector
pagpilian ) ket saan a mabalin a saggaysa a madadael kadagiti kaputotan a mangtignay nga elemento.
Kita ti Pasamak | Panangiladawan |
---|---|
ipakita.bs.popover | Daytoy a pasamak ket agputok a dagus no ti show pamay-an ti pagarigan ket maawagan. |
naipakita.bs.popover | Daytoy a pasamak ket mapaputok no ti popover ket naaramiden a makita ti agar-aramat (urayennanto dagiti panagbalbaliw ti CSS a malpas). |
ilemmeng.bs.popover | Daytoy a pasamak ket dagus a mapaputok no ti hide pamay-an ti pagarigan ket naawagan. |
nailemmeng.bs.napanglaw | Daytoy a pasamak ket mapaputok no ti popover ket nalpas a nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas). |
naikabil.bs.popover | Daytoy a pasamak ket mapaputok kalpasan ti show.bs.popover pasamak no ti plantilia ti popover ket nainayon iti DOM. |
Inayon ti panagusar ti panangilaksid kadagiti amin a mensahe ti alerto babaen daytoy a plugin.
No agus-usar ti .close
buton, masapul nga umuna nga anak ti .alert-dismissible
ken awan ti linaon ti teksto a mabalin nga umay sakbay daytoy iti markup.
Baliwam daytoy ken dayta ken padasem manen. Duis mollis, est non commodo luctus, nisi erat nga porttitor ligula, eget lacinia odio sem nec elit. Ti cras mattis consectetur purus ket agtugaw iti amet fermentum.
Inayon data-dismiss="alert"
laeng iti close button-mo tapno automatiko a mangted iti alerto close functionality. Ti panangserra iti alerto ikkatenna dayta iti DOM.
Tapno dagiti alertom ket agusar ti animasion no agserra, siguraduem nga addaanda iti .fade
ken.in
dagiti klase a naidatag kadakuada.
$().alert()
Mangaramid ti maysa nga alerto a dumngeg para kadagiti pasamak ti panagpidut kadagiti kaputotan nga elemento nga addaan ti data-dismiss="alert"
attribute. (Saan a kasapulan no agus-usar ti auto-initialization ti data-api.)
$().alert('close')
Serraan ti maysa nga alerto babaen ti panangikkat iti dayta manipud iti DOM. No ti .fade
ken .in
dagiti klase ket adda iti elemento, ti alerto ket agkupas sakbay a maikkat daytoy.
Ti plugin ti alerto ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti panagusar ti alerto.
Kita ti Pasamak | Panangiladawan |
---|---|
iserram.bs.alerto | Daytoy a pasamak ket agputok a dagus no ti close pamay-an ti pagarigan ket maawagan. |
naserraan.bs.alerto | Daytoy a pasamak ket mapaputok no ti alerto ket naiserra (urayenna dagiti panagbalbaliw ti CSS a malpas). |
Aramiden ti ad-adu pay babaen kadagiti buton. Ibaga ti buton ti kontrol wenno mangpartuat kadagiti grupo dagiti buton para kadagiti ad-adu a paset a kas dagiti toolbar.
Ti Firefox ket agtultuloy kadagiti estado ti panagtengngel ti porma (pannakabaldado ken pannakasukimat) iti ballasiw dagiti panagkarga ti panid . Ti maysa a pangliklik iti daytoy ket ti panagusar iti autocomplete="off"
. Kitaen ti bug ti Mozilla #654072 .
Inayon data-loading-text="Loading..."
tapno agusar ti kasasaad ti panagkarga iti maysa a buton.
Daytoy a tampok ket saanen a maus-usar manipud idi v3.3.5 ken naikkaten iti v4.
Para iti daytoy a demostrasion, us-usarenmi ti data-loading-text
ken $().button('loading')
, ngem saan laeng a dayta ti estado a mabalinmo nga usaren. Kitaen ti ad-adu pay iti daytoy iti baba iti $().button(string)
dokumentasion .
Inayon data-toggle="button"
tapno mapaandar ti toggling iti maymaysa a buton.
.active
kenaria-pressed="true"
Para kadagiti nasakbay a nabaliwan a buton, masapul nga inayonmo ti .active
klase ken ti aria-pressed="true"
attribute iti button
bagim.
Inayon data-toggle="buttons"
iti .btn-group
naglaon a kahon ti tsek wenno dagiti input ti radio tapno mapalubosan ti panagbalbaliw kadagiti bukodda nga estilo.
.active
Para kadagiti napili a pagpilian, masapul nga inayonmo ti .active
klase iti input's a label
mismo.
No ti nasukimaten a kasasaad ti maysa a buton ti kahon ti tsek ket na-update a saan a mangpaputok ti maysa a click
pasamak iti buton (kas pagarigan babaen <input type="reset">
wenno babaen ti panangisaad ti checked
tagikua ti input), kasapulam nga i-toggle ti .active
klase iti input's a label
mismo.
$().button('toggle')
Toggles ti estado ti iduron. Ikkan ti buton ti langa a na-activate dayta.
$().button('reset')
Isubli ti estado ti buton - isukat ti teksto iti orihinal a teksto. Daytoy a pamay-an ket asynchronous ken agsubli sakbay a ti panag-reset ket aktual a nalpasen.
$().button(string)
Isukat ti teksto iti ania man a datos a naikeddeng a kasasaad ti teksto.
Nalaka a maibagay a plugin nga agus-usar ti sumagmamano a klase para iti nalaka a toggle a kababalin.
Ti collapse ket kasapulan ti transitions plugin a mairaman iti bersionmo ti Bootstrap.
I-klik dagiti buton iti baba tapno maipakita ken ilemmeng ti sabali nga elemento babaen dagiti panagbalbaliw ti klase:
.collapse
ilemmeng ti linaonna.collapsing
ket mayaplikar bayat dagiti panagbalbaliw.collapse.in
ipakitana ti linaonnaMabalinmo nga usaren ti silpo nga addaan iti href
attribute, wenno ti buton nga addaan iti data-target
attribute. Iti agpada a kaso, ti data-toggle="collapse"
ket kasapulan.
Paatiddogen ti default a kababalin ti panagrebba tapno mangpartuat ti akordeon iti paset ti panel.
Posible met nga i-swap out ti .panel-body
s iti .list-group
s.
Siguraduen nga inayon aria-expanded
ti elemento ti panangkontrol. Daytoy a kababalin ket nalawag a mangikeddeng ti agdama a kasasaad ti maibukbok nga elemento kadagiti agbasbasa ti iskrin ken dagiti kapada a makatulong a teknolohia. No ti maibukbok nga elemento ket naserraan babaen ti kasisigud, daytoy ket rumbeng nga addaan iti pateg ti aria-expanded="false"
. No inkeddengmo ti maibukbok nga elemento a malukatan babaen ti default babaen ti panagusar ti in
klase, ikeddengmo aria-expanded="true"
ketdi ti kontrol. Ti plugin ket automatiko a mangbalbaliw iti daytoy a kababalin a naibatay no ti maibukbok nga elemento ket naluktan wenno naserraan wenno saan.
Iti pay maipatinayon, no ti elemento ti panagtengngelmo ket mangpuntiria ti maymaysa a maibukbok nga elemento – kayatna a sawen ti data-target
kabileg ket mangitudtudo iti maysa a id
mangpili – mabalinmo ti manginayon ti kanayonan aria-controls
a kababalin iti elemento ti panagtengngel, a naglaon ti id
ti maibukbok nga elemento. Dagiti moderno a managbasa ti iskrin ken dagiti kapada a makatulong a teknolohia ket agus-usar iti daytoy a kababalin tapno mangipaay kadagiti agar-aramat kadagiti kanayonan a ab-ababa a dalan tapno direkta nga ag-navigate iti maibukbok nga elemento a mismo.
Ti plugin ti pannakarba ket agus-usar kadagiti sumagmamano a klase tapno mangasikaso ti nadagsen a panagipangato:
.collapse
ilemmengna ti linaonna.collapse.in
ipakitana ti linaonna.collapsing
mainayon no mangrugi ti panagbalbaliw, ken maikkat no malpasDagitoy a klase ket mabalin a masarakan iti component-animations.less
.
Basta inayon data-toggle="collapse"
ken a data-target
iti elemento tapno automatiko nga ituding ti kontrol ti maysa a collapsible nga elemento. Ti data-target
attribute ket umawat ti maysa a CSS a mangpili a pangipakat ti collapse iti. Siguraduen nga inayon ti klase collapse
iti collapsible nga elemento. No kayatmo a default a malukatan, inayon ti kanayonan a klase in
.
Tapno manginayon ti kasla akordeon a panagituray ti grupo iti maysa a maibukbok a kontrol, inayon ti kabileg ti datos data-parent="#selector"
. Kitaen ti demo tapno makita daytoy nga agtigtignay.
Pagbalinen a manual babaen ti:
Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-
, a kas iti data-parent=""
.
Nagan | tipo | default | panangiladawan |
---|---|---|---|
nagannak | agpili nga | saan nga agpayso | No ti maysa a mangpili ket naited, kalpasanna amin dagiti maibukbok nga elemento iti baba ti naikeddeng a nagannak ket maiserra no daytoy a maibukbok a banag ket maipakita. (kapada ti tradisional a kababalin ti akordeon - daytoy ket agpannuray iti panel klase) |
ag-toggle nga | boolean nga | agpayso | I-toggles ti collapsible nga elemento iti inbokasion |
.collapse(options)
Paaktiboenna ti linaonmo kas maysa a collapsible nga elemento. Awaten ti maysa nga opsional a pagpilian object
.
.collapse('toggle')
I-toggles ti collapsible nga elemento iti maipakita wenno mailemmeng. Agsubli iti tumawag sakbay a ti maibukbok nga elemento ket aktual a naipakita wenno nailemmeng (kayatna a sawen sakbay a mapasamak ti shown.bs.collapse
wenno hidden.bs.collapse
pasamak).
.collapse('show')
Ipakita ti maysa a collapsible nga elemento. Agsubli iti umaw-awag sakbay a ti maibukbok nga elemento ket aktual a naipakita (kayatna a sawen sakbay a shown.bs.collapse
mapasamak ti pasamak).
.collapse('hide')
Ilemmengna ti maysa a collapsible nga elemento. Agsubli iti tumawag sakbay a ti maibukbok nga elemento ket aktual a nailemmeng (kayatna a sawen sakbay a hidden.bs.collapse
mapasamak ti pasamak).
Ti klase ti panagreggaay ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti panagusar ti panagreggaay.
Kita ti Pasamak | Panangiladawan |
---|---|
ipakita.bs.ag-collapse | Daytoy a pasamak ket agputok a dagus no ti show pamay-an ti pagarigan ket maawagan. |
naipakita.bs.collapse | Daytoy a pasamak ket mapaputok no ti maysa nga elemento ti panagreggaay ket naaramid a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas). |
ilemmeng.bs.ag-collapse | Daytoy a pasamak ket dagus a mapaputok no ti hide pamay-an ket naawagan. |
nailemmeng.bs.ag-collapse | Daytoy a pasamak ket mapaputok no ti maysa nga elemento ti panagreggaay ket nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas). |
Maysa a paset ti slideshow para iti panagbisikleta kadagiti elemento, kas iti carousel. Saan a masuportaran dagiti nested carousel.
Ti paset ti carousel ket sapasap a saan a maitunos kadagiti pagalagadan ti pannakagun-od. No kasapulam ti agtungpal, pangngaasim ta ibilangmo ti dadduma pay a pagpilian iti panangidatag iti linaonmo.
Ti Bootstrap ket eksklusibo nga agus-usar ti CSS3 para kadagiti animasionna, ngem ti Internet Explorer 8 & 9 ket saan a mangsuporta kadagiti kasapulan a tagikua ti CSS. Gapuna, awan dagiti animasion ti panagbalbaliw ti slide no agus-usar kadagitoy a browser. Inggagarami nga inkeddeng a saan nga iraman dagiti jQuery-based a fallback para kadagiti panagbalbaliw.
Masapul .active
a mainayon ti klase iti maysa kadagiti slide. Ta no saan, saanton a makita ti carousel.
Ti .glyphicon .glyphicon-chevron-left
ken .glyphicon .glyphicon-chevron-right
klase ket saan a nasken a kasapulan para kadagiti kontrol. Ti Bootstrap ket mangipaay .icon-prev
ken .icon-next
kas dagiti plain nga alternatibo ti unicode.
Manginayon kadagiti kapsion kadagiti slide-mo a nalaka babaen ti .carousel-caption
elemento iti uneg ti ania man .item
. Ikabil laeng ti dandani ania man nga opsional nga HTML iti uneg sadiay ket automatiko a maitunos ken mapormat.
Dagiti karusel ket kasapulan ti panagusar ti maysa id
iti akinruar unay a pagkargaan (ti .carousel
) para kadagiti kontrol ti karusel tapno umiso ti panagandar. No mangnayon iti adu a carousel, wenno no agsukat iti carousel’s id
, siguraduenyo nga i-update dagiti mainaig a kontrol.
Usaren dagiti data attribute tapno nalaka a makontrol ti posision ti carousel. data-slide
awaten dagiti nasken a balikas prev
wenno next
, a mangbalbaliw ti posision ti slide a relatibo iti agdama a posisionna. Saan laeng a dayta, usaren data-slide-to
a mangipasa iti raw slide index iti carousel data-slide-to="2"
, a mangibalbaliw iti posision ti slide iti partikular nga indeks a mangrugi iti 0
.
Ti data-ride="carousel"
attribute ket naus-usar a mangmarka ti maysa a carousel a kas animating a mangrugi iti panagkarga ti panid. Daytoy ket saan a mabalin nga usaren a maikuyog ti (redundante ken saan a kasapulan) a nalawag a panangrugi ti JavaScript ti isu met laeng a karusel.
Awagan ti carousel a manual babaen ti:
Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-
, a kas iti data-interval=""
.
Nagan | tipo | default | panangiladawan |
---|---|---|---|
aggigiddan nga | bilang | 5000 nga | Ti kaadu ti panawen a maitantan iti nagbaetan ti automatiko a panagbisikleta iti maysa a banag. No ulbod, saan nga automatiko nga agbisikleta ti carousel. |
isardeng biit | kuerdas nga | nawaswas | "ag-hover" . | No naikabil iti "hover" , isardengna ti panagbisikleta ti carousel mouseenter ken ituloyna manen ti panagbisikleta ti carousel iti mouseleave . No naikabil iti null , ti panangi-hover iti rabaw ti carousel dina pasardengen dayta. |
bungonen | boolean nga | agpayso | No ti carousel ket rumbeng nga agtultuloy nga agbisikleta wenno addaan kadagiti natangken a pagsardengan. |
teklado nga | boolean nga | agpayso | No rumbeng nga agtignay ti carousel kadagiti pasamak iti keyboard. |
.carousel(options)
Irugi ti carousel nga addaan kadagiti opsional a pagpilian object
ken mangrugi nga agbisikleta babaen kadagiti banag.
.carousel('cycle')
Agsiklo kadagiti carousel items manipud kannigid agingga iti kannawan.
.carousel('pause')
Pasardengenna ti carousel nga agbisikleta kadagiti banag.
.carousel(number)
Isiklo ti carousel iti partikular a kuadro (0 a naibatay, kapada ti maysa nga array).
.carousel('prev')
Agsiklo iti napalabas a banag.
.carousel('next')
Agsiklo iti sumaganad a banag.
Ti klase ti carousel ti Bootstrap ket mangibutaktak ti dua a pasamak para iti panag-hook iti panagusar ti carousel.
Agpada a dagiti pasamak ket addaan kadagiti sumaganad a kanayonan a tagikua:
direction
: Ti direksion a pag-slide ti carousel (bareng "left"
wenno "right"
).relatedTarget
: Ti elemento ti DOM a mai-slid iti lugarna a kas ti aktibo a banag.Amin a pasamak ti carousel ket maipaputok iti carousel a mismo (kayatna a sawen iti <div class="carousel">
).
Kita ti Pasamak | Panangiladawan |
---|---|
slide.bs.karosel nga | Daytoy a pasamak ket agputok a dagus no ti slide pamay-an ti pagarigan ket naawagan. |
nag-slid.bs.karusel | Daytoy a pasamak ket mapaputok no ti carousel ket nalpasnan ti panagbalbaliw ti slide-na. |
Ti affix plugin ket ag-toggle position: fixed;
ken ag-off, a mangtulad ti epekto a masarakan babaen ti position: sticky;
. Ti subnabigasion iti kannawan ket maysa a live demo ti affix plugin.
Usaren ti affix plugin babaen dagiti attribute ti datos wenno manual babaen ti bukodmo a JavaScript.Iti agpada a kasasaad, masapul nga ipaaymo ti CSS para iti posision ken kalawa ti naikapet a linaonmo.
Pakaammo: Dimo usaren ti plugin ti affix iti elemento a linaon ti relatibo a naiposision nga elemento, a kas ti naguyod wenno naiduron a kolum, gapu ti maysa a Safari a panagiparang a bug .
Ti plugin ti affix ket agbalbaliw iti nagbaetan ti tallo a klase, tunggal maysa ket mangibagi ti partikular nga estado: .affix
, .affix-top
, ken .affix-bottom
. Masapul nga ipaaymo dagiti estilo, malaksid ti position: fixed;
on .affix
, para kadagitoy a klase a mismo (agwaywayas iti daytoy a plugin) tapno mangasikaso kadagiti aktual a posision.
Kastoy ti panagandar ti affix plugin:
.affix-top
tapno mangipakita ti elemento ket adda iti kangatuan-a-kaaduan a posisionna. Iti daytoy a punto awan ti kasapulan a panagposision ti CSS..affix
mangsukat .affix-top
ken mangikeddeng position: fixed;
(nga impaay ti CSS ti Bootstrap)..affix
iti .affix-bottom
. Gapu ta dagiti offset ket opsional, ti panangisaad ti maysa ket kasapulan nga ikeddengmo ti maitutop a CSS. Iti daytoy a kaso, inayon position: absolute;
no kasapulan. Ti plugin ket agus-usar ti data attribute wenno ti pagpilian ti JavaScript tapno mangikeddeng no sadino ti pangikabilan ti elemento manipud sadiay.Suroten dagiti addang iti ngato tapno mangikeddeng ti CSS-mo para iti asinoman kadagiti pagpilian ti panagusar iti baba.
Tapno nalaka a mainayon ti affix behavior iti ania man nga elemento, basta inayon data-spy="affix"
ti elemento a kayatmo nga espia. Usaren dagiti offset tapno mangikeddeng no kaano nga i-toggle ti panagipit ti maysa nga elemento.
Awagan ti affix plugin babaen ti JavaScript:
Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-
, a kas iti data-offset-top="200"
.
Nagan | tipo | default | panangiladawan |
---|---|---|---|
offset nga | numero | trabaho | banag | 10 nga | Pixels nga offset manipud iti iskrin no kalkularen ti posision ti scroll. No maited ti maymaysa a numero, maipakat ti offset agpadpada iti ngato ken baba a direksion. Tapno mangipaay ti naisangsangayan, baba ken ngato nga offset mangipaay laeng ti maysa a banag offset: { top: 10 } wenno offset: { top: 10, bottom: 5 } . Usaren ti function no kasapulam ti dinamiko a kalkularen ti offset. |
gandat | agpili ti | nodo nga | jQuery nga elemento | ti window banag |
Ikeddeng ti target nga elemento ti affix. |
.affix(options)
Paaktiboenna ti linaonmo kas naikapet a linaon. Awaten ti maysa nga opsional a pagpilian object
.
.affix('checkPosition')
Karkuloenna manen ti kasasaad ti affix a naibatay kadagiti dimension, posision, ken posision ti scroll dagiti mainaig nga elemento. Dagiti .affix
, .affix-top
, ken .affix-bottom
dagiti klase ket mainayon wenno maikkat manipud iti naikapet a linaon segun ti baro nga estado. Daytoy a pamay-an ket kasapulan a maawagan no kaanoman a dagiti dimension ti naikapet a linaon wenno ti puntiria nga elemento ket mabaliwan, tapno masigurado ti umno a panagposision ti naikapet a linaon.
Ti affix plugin ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti panagusar ti affix.
Kita ti Pasamak | Panangiladawan |
---|---|
affix.bs.affix | Daytoy a pasamak ket agputok a dagus sakbay a naikapet ti elemento. |
naikapet.bs.affix | Daytoy a pasamak ket mapaputok kalpasan a naikapet ti elemento. |
affix-ngato.bs.affix | Daytoy a pasamak ket agputok a dagus sakbay a ti elemento ket naikapet-ngato. |
naikapet-ngato.bs.affix | Daytoy a pasamak ket mapaputok kalpasan a ti elemento ket naikapet-top. |
affix-baba.bs.affix | Daytoy a pasamak ket agputok a dagus sakbay a ti elemento ket naikapet-baba. |
naikapet-baba.bs.affix | Daytoy a pasamak ket mapaputok kalpasan a ti elemento ket naikapet-baba. |