JavaScript
Agħti l-ħajja lill-komponenti ta' Bootstrap b'aktar minn tużżana plugins jQuery personalizzati. Inkludihom kollha faċilment, jew wieħed wieħed.
Agħti l-ħajja lill-komponenti ta' Bootstrap b'aktar minn tużżana plugins jQuery personalizzati. Inkludihom kollha faċilment, jew wieħed wieħed.
Il-plugins jistgħu jiġu inklużi individwalment (bl-użu tal- *.js
fajls individwali ta 'Bootstrap), jew kollha f'daqqa (bl-użu bootstrap.js
jew il-minifikat bootstrap.min.js
).
It- tnejn bootstrap.js
u bootstrap.min.js
fihom il-plugins kollha f'fajl wieħed. Inkludi wieħed biss.
Xi plugins u komponenti CSS jiddependu fuq plugins oħra. Jekk tinkludi plugins individwalment, kun żgur li tiċċekkja għal dawn id-dipendenzi fid-doks. Innota wkoll li l-plugins kollha jiddependu fuq jQuery (dan ifisser li jQuery għandu jiġi inkluż qabel il-fajls tal-plugin). Ikkonsulta tagħnabower.json
biex tara liema verżjonijiet ta 'jQuery huma appoġġjati.
Tista 'tuża l-plugins Bootstrap kollha purament permezz tal-API tal-markup mingħajr ma tikteb linja waħda ta' JavaScript. Din hija l-API tal-ewwel klassi ta' Bootstrap u għandha tkun l-ewwel konsiderazzjoni tiegħek meta tuża plugin.
Cela dit, f'xi sitwazzjonijiet jista 'jkun mixtieq li titfi din il-funzjonalità. Għalhekk, aħna nipprovdu wkoll il-ħila li tiddiżattiva l-API tal-attribut tad-dejta billi torbot l-avvenimenti kollha fuq id-dokument namespaced bi data-api
. Dan jidher bħal dan:
Inkella, biex timmira plugin speċifiku, inkludi biss l-isem tal-plugin bħala spazju tal-isem flimkien mal-ispazju tal-isem tad-data-api bħal dan:
Tużax attributi tad-dejta minn plugins multipli fuq l-istess element. Pereżempju, buttuna ma tistax kemm ikollha tooltip kif ukoll toggle modal. Biex twettaq dan, uża element tat-tgeżwir.
Aħna nemmnu wkoll li għandek tkun tista' tuża l-plugins Bootstrap kollha purament permezz tal-API JavaScript. L-APIs pubbliċi kollha huma metodi singoli, li jistgħu jiġu kkatinati, u jirritornaw il-ġbir li ttieħed azzjoni fuqhom.
Il-metodi kollha għandhom jaċċettaw oġġett ta' għażliet fakultattivi, string li jimmira metodu partikolari, jew xejn (li jibda plugin b'imġieba default):
Kull plugin jesponi wkoll il-kostruttur mhux maħdum tiegħu fuq Constructor
proprjetà: $.fn.popover.Constructor
. Jekk tixtieq tikseb każ partikolari ta' plugin, irkupraha direttament minn element: $('[rel="popover"]').data('popover')
.
Tista' tibdel is-settings default għal plugin billi timmodifika l- Constructor.DEFAULTS
oġġett tal-plugin:
Xi drabi huwa meħtieġ li tuża plugins Bootstrap ma 'oqfsa UI oħra. F'dawn iċ-ċirkostanzi, ħabtiet tal-ispazji tal-isem jistgħu jseħħu okkażjonalment. Jekk jiġri dan, tista' ċċempel .noConflict
fuq il-plugin li tixtieq ireġġa' lura l-valur tiegħu.
Bootstrap jipprovdi avvenimenti personalizzati għall-biċċa l-kbira tal-azzjonijiet uniċi tal-plugins. Ġeneralment, dawn jiġu f'forma ta 'partiċipju infinitiv u passat - fejn l-infinittiv (eż. show
) jiġi attivat fil-bidu ta' avveniment, u l-forma ta 'partiċipju passat tiegħu (eż. shown
) tiġi attivata mat-tlestija ta' azzjoni.
Minn 3.0.0, l-avvenimenti kollha Bootstrap huma namespaced.
L-avvenimenti infiniti kollha jipprovdu preventDefault
funzjonalità. Dan jipprovdi l-abbiltà li twaqqaf l-eżekuzzjoni ta 'azzjoni qabel ma tibda.
Il-verżjoni ta' kull plugin jQuery ta' Bootstrap tista' tiġi aċċessata permezz tal- VERSION
proprjetà tal-kostruttur tal-plugin. Per eżempju, għall-plugin tooltip:
Il-plugins tal-Bootstrap ma jaqgħux lura partikolarment b'mod grazzjuż meta JavaScript huwa diżattivat. Jekk jimpurtak mill-esperjenza tal-utent f'dan il-każ, uża <noscript>
biex tispjega s-sitwazzjoni (u kif terġa 'tippermetti l-JavaScript) lill-utenti tiegħek, u/jew żid il-fallbacks tad-dwana tiegħek.
Bootstrap ma jappoġġjax uffiċjalment libreriji JavaScript ta' partijiet terzi bħal Prototype jew jQuery UI. Minkejja .noConflict
l-avvenimenti u namespaced, jista 'jkun hemm problemi ta' kompatibilità li għandek bżonn tirranġa waħdek.
Għal effetti ta 'tranżizzjoni sempliċi, inkludi transition.js
darba flimkien mal-fajls JS l-oħra. Jekk qed tuża l-ikkumpilat (jew imminifikat) bootstrap.js
, m'hemmx għalfejn tinkludi dan—diġà qiegħed hemm.
Transition.js huwa helper bażiku għall- transitionEnd
avvenimenti kif ukoll emulatur ta 'transizzjoni CSS. Jintuża mill-plugins l-oħra biex jiċċekkja l-appoġġ tat-tranżizzjoni CSS u biex jaqbad transizzjonijiet imdendlin.
It-tranżizzjonijiet jistgħu jiġu diżattivati globalment billi tuża s-snippet JavaScript li ġej, li għandu jiġi wara li transition.js
(jew bootstrap.js
, bootstrap.min.js
skont il-każ) ikun tagħbija:
Il-modali huma ssimplifikati, iżda flessibbli, iqajjem djalogu bil-funzjonalità minima meħtieġa u nuqqasijiet intelliġenti.
Kun żgur li ma tiftaħx modali waqt li ieħor ikun għadu viżibbli. Li tintwera aktar minn modal wieħed kull darba teħtieġ kodiċi tad-dwana.
Dejjem ipprova poġġi l-kodiċi HTML tal-modal f'pożizzjoni tal-ogħla livell fid-dokument tiegħek biex tevita komponenti oħra li jaffettwaw id-dehra u/jew il-funzjonalità tal-modal.
Hemm xi twissijiet dwar l-użu tal-modali fuq apparat mobbli. Ara d-dokumenti tal-appoġġ tal-browser tagħna għad-dettalji.
Minħabba kif HTML5 jiddefinixxi s-semantika tiegħu, l- autofocus
attribut HTML m'għandu l-ebda effett fil-modali Bootstrap. Biex tikseb l-istess effett, uża xi JavaScript personalizzat:
Modali mogħtija b'header, korp, u sett ta' azzjonijiet fil-footer.
Aqleb modal permezz ta' JavaScript billi tikklikkja l-buttuna hawn taħt. Jiżżerżaq 'l isfel u jisparixxi mill-parti ta' fuq tal-paġna.
Kun żgur li żżid role="dialog"
u aria-labelledby="..."
, b'referenza għat-titlu modali, għal .modal
, u role="document"
għall- .modal-dialog
innfisha.
Barra minn hekk, tista' tagħti deskrizzjoni tad-djalogu modali tiegħek aria-describedby
b'on .modal
.
L-inkorporazzjoni ta' vidjows ta' YouTube f'modals teħtieġ JavaScript addizzjonali mhux f'Bootstrap biex twaqqaf awtomatikament id-daqq u aktar. Ara din il-post utli ta' Stack Overflow għal aktar informazzjoni.
Il-modali għandhom żewġ daqsijiet fakultattivi, disponibbli permezz ta' klassijiet ta' modifikatur biex jitqiegħdu fuq .modal-dialog
.
Għal modals li sempliċiment jidhru aktar milli fade biex tarahom, neħħi l- .fade
klassi mill-markup modali tiegħek.
Biex tieħu vantaġġ mis-sistema tal-grilja Bootstrap fi ħdan modali, bejta .row
s fi ħdan il- .modal-body
u mbagħad uża l-klassijiet tas-sistema tal-grilja normali.
Għandek mazz ta 'buttuni li kollha jqanqlu l-istess modal, biss b'kontenut kemmxejn differenti? Uża event.relatedTarget
u attributi HTMLdata-*
(possibilment permezz ta' jQuery ) biex tvarja l-kontenut tal-modal skont liema buttuna ġiet ikklikkjata. Ara d-dokumenti tal-Avvenimenti Modali għad-dettalji dwar relatedTarget
,
Il-plugin modali jibdel il-kontenut moħbi tiegħek fuq talba, permezz ta' attributi tad-dejta jew JavaScript. Iżid ukoll .modal-open
mal- <body>
imġieba ta' scrolling predefinita biex tissostitwixxi u tiġġenera .modal-backdrop
biex tipprovdi żona tal-ikklikkja biex tiċħad il-modali murija meta tikklikkja barra l-modal.
Attiva modali mingħajr ma tikteb JavaScript. Issettja data-toggle="modal"
fuq element ta 'kontrollur, bħal buttuna, flimkien ma' data-target="#foo"
jew href="#foo"
biex timmira modal speċifiku biex toggle.
Sejħa modal b'id myModal
b'linja waħda ta' JavaScript:
L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-
, bħal f' data-backdrop=""
.
Isem | tip | default | deskrizzjoni |
---|---|---|---|
sfond | boolean jew is-sekwenza'static' |
veru | Jinkludi element ta' sfond modali. Inkella, speċifika static għal sfond li ma jagħlaqx il-modal mal-ikklikkja. |
tastiera | boolean | veru | Jagħlaq il-modal meta tingħafas iċ-ċavetta tal-ħarba |
juru | boolean | veru | Juri l-modal meta inizjalizzat. |
remot | mogħdija | falza | Din l-għażla hija deprecata mill-v3.3.0 u tneħħiet fil-v4. Nirrakkomandaw minflok tuża templating min-naħa tal-klijent jew qafas ta' rabta tad-dejta, jew issejjaħ jQuery.load lilek innifsek. Jekk jiġi pprovdut URL remot, il- kontenut jitgħabba darba permezz tal-metodu jQuery |
.modal(options)
Jattiva l-kontenut tiegħek bħala modal. Jaċċetta għażliet fakultattivi object
.
.modal('toggle')
Manwalment toggles modali. Jirritorna lil min iċempel qabel ma l-modal ikun fil-fatt intwera jew moħbi (jiġifieri qabel ma jseħħ l-avveniment shown.bs.modal
jew ).hidden.bs.modal
.modal('show')
Manwalment tiftaħ modali. Jirritorna lil min iċempel qabel ma l-modal ikun fil-fatt intwera (jiġifieri qabel ma shown.bs.modal
jseħħ l-avveniment).
.modal('hide')
Manwalment jaħbi modali. Jirritorna lil min iċempel qabel ma l-modal fil-fatt ġie moħbi (jiġifieri qabel ma hidden.bs.modal
jseħħ l-avveniment).
.modal('handleUpdate')
Jaġġusta mill-ġdid il-pożizzjonament tal-modal biex jikkumbatti scrollbar f'każ li wieħed għandu jidher, li jagħmel il-modal jaqbeż lejn ix-xellug.
Huwa meħtieġ biss meta l-għoli tal-modal jinbidel waqt li jkun miftuħ.
Il-klassi modali ta 'Bootstrap tesponi ftit avvenimenti biex tgħaqqad il-funzjonalità modali.
L-avvenimenti modali kollha jiġu sparati lejn il-modal innifsu (jiġifieri fil- <div class="modal">
).
Tip ta' Avveniment | Deskrizzjoni |
---|---|
juru.bs.modal | Dan l-avveniment jispara immedjatament meta show jissejjaħ il-metodu tal-istanza. Jekk ikkawżat minn klikk, l-element ikklikkjat huwa disponibbli bħala l- relatedTarget proprjetà tal-avveniment. |
muri.bs.modal | Dan l-avveniment jiġi sparat meta l-modal ikun sar viżibbli għall-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew). Jekk ikkawżat minn klikk, l-element ikklikkjat huwa disponibbli bħala l- relatedTarget proprjetà tal-avveniment. |
hide.bs.modal | Dan l-avveniment jiġi sparat immedjatament meta l- hide metodu tal-istanza jkun ġie msejjaħ. |
moħbija.bs.modali | Dan l-avveniment jiġi sparat meta l-modal ikun spiċċa moħbi mill-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew). |
loaded.bs.modal | Dan l-avveniment jiġi sparat meta l-modal tagħbija kontenut bl-użu tal- remote għażla. |
Żid menus dropdown għal kważi kull ħaġa b'dan il-plugin sempliċi, inklużi n-navbar, tabs, u pilloli.
Permezz ta 'attributi tad-dejta jew JavaScript, il-plugin dropdown jibdel kontenut moħbi (menus dropdown) billi taqleb il- .open
klassi fuq l-oġġett tal-lista prinċipali.
Fuq apparat mobbli, il-ftuħ ta 'dropdown iżid .dropdown-backdrop
bħala żona tal-vit għall-għeluq tal-menus dropdown meta ttektek barra l-menu, rekwiżit għal appoġġ xieraq tal-iOS. Dan ifisser li l-bidla minn menu dropdown miftuħ għal menu dropdown differenti teħtieġ vit żejda fuq il-mowbajl.
Nota: L- data-toggle="dropdown"
attribut huwa bbażat fuqu għall-għeluq tal-menus dropdown f'livell ta 'applikazzjoni, għalhekk hija idea tajba li dejjem tużah.
Żid data-toggle="dropdown"
ma' link jew buttuna biex taqleb dropdown.
Biex iżżomm l-URLs intatti mal-buttuni tal-link, uża l- data-target
attribut minflok href="#"
.
Ċempel il-dropdowns permezz ta' JavaScript:
data-toggle="dropdown"
għadu meħtieġIrrispettivament minn jekk inti sejħa dropdown tiegħek permezz JavaScript jew minflok tuża d-data-api, data-toggle="dropdown"
huwa dejjem meħtieġ li tkun preżenti fuq l-element grillu dropdown.
Xejn
$().dropdown('toggle')
Jaqbel mal-menu dropdown ta' navbar partikolari jew ta' navigazzjoni bit-tabbed.
L-avvenimenti kollha dropdown jiġu sparati fuq l .dropdown-menu
-element ġenitur ta '.
L-avvenimenti kollha dropdown għandhom relatedTarget
proprjetà, li l-valur tagħha huwa l-element tal-ankra li toggling.
Tip ta' Avveniment | Deskrizzjoni |
---|---|
show.bs.dropdown | Dan l-avveniment jispara immedjatament meta jissejjaħ il-metodu tal-ispettaklu. |
murija.bs.dropdown | Dan l-avveniment jiġi sparat meta l-dropdown tkun saret viżibbli għall-utent (se tistenna għal transizzjonijiet CSS, biex jitlestew). |
hide.bs.dropdown | Dan l-avveniment jiġi sparat immedjatament meta l-metodu tal-istanza taħbi jkun ġie msejjaħ. |
hidden.bs.dropdown | Dan l-avveniment jiġi sparat meta l-dropdown ikun lest jiġi moħbi mill-utent (se jistenna għal transizzjonijiet CSS, biex jitlestew). |
Il-plugin ScrollSpy huwa għall-aġġornament awtomatiku tal-miri tan-nav ibbażati fuq il-pożizzjoni tal-iscroll. Skrollja ż-żona taħt in-navbar u ara l-bidla fil-klassi attiva. Is-sub-oġġetti dropdown se jiġu enfasizzati wkoll.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi qabel ma jinbiegħu qui. Tumblr drittijiet tar-roti minn farm-to-mejda tkun xi tkun. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 lupu qamar irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui inti probabilment ma smajtx minnhom et cardigan trust fund culpa bijodiżil wes anderson estetika. Nihil tattooed accusamus, cred ironija bijodiżil keffiyeh artiġjanali ullamco consequat.
Veniam marfa moustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Trakk ta 'l-ikel tas-sweeter cosby tatujat, vinil tal-mcsweeney's quis non freegan. Lo-fi wes anderson +1 sartorial. Carles mhux eżerċizzju estetiku quis gentrify. Brooklyn adipisicing craft birra viċi keytar deserunt.
Occaecat commodo aliqua delectus. Fap craft birra deserunt skateboard ea. Lomo drittijiet tar-roti adipisicing banh mi, velit ea sunt livell li jmiss locavore kafè ta 'oriġini waħda fil-magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS huwa adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable 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 messenger bag marfa kwalunkwe delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche ironija, thundercats inti probabilment ma smajtx minnhom consequat hoodie gluten free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Ir-rabtiet tan-Navbar għandu jkollhom miri id risolvibbli. Per eżempju, <a href="#home">home</a>
għandu jikkorrispondi għal xi ħaġa fid-DOM bħal <div id="home"></div>
.
:visible
fil-mira injoratiElementi fil-mira li mhumiex :visible
skont jQuery se jiġu injorati u l-oġġetti tan-nav korrispondenti tagħhom qatt ma jiġu enfasizzati.
Ma jimpurtax mill-metodu ta 'implimentazzjoni, scrollspy teħtieġ l-użu ta' position: relative;
fuq l-element li qed spying fuq. F'ħafna każijiet dan huwa l- <body>
. Meta scrollspying fuq elementi minbarra l- <body>
, kun żgur li jkollok height
sett u overflow-y: scroll;
applikati.
Biex iżżid faċilment l-imġieba scrollspy man-navigazzjoni topbar tiegħek, żid data-spy="scroll"
mal-element li trid tispija fuqu (l-aktar tipikament dan ikun il- <body>
). Imbagħad żid l- data-target
attribut bl-ID jew il-klassi tal-element ġenitur ta 'kwalunkwe .nav
komponent Bootstrap.
Wara li żżid position: relative;
fis-CSS tiegħek, ċempel l-iscrollspy permezz ta' JavaScript:
.scrollspy('refresh')
Meta tuża scrollspy flimkien maż-żieda jew it-tneħħija ta 'elementi mid-DOM, ikollok bżonn issejjaħ il-metodu ta' aġġornar hekk:
L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-
, bħal f' data-offset=""
.
Isem | tip | default | deskrizzjoni |
---|---|---|---|
offset | numru | 10 | Pixels biex jikkumpensaw minn fuq meta tikkalkula l-pożizzjoni tal-iscroll. |
Tip ta' Avveniment | Deskrizzjoni |
---|---|
attivate.bs.scrollspy | Dan l-avveniment jispara kull meta oġġett ġdid jiġi attivat mill-iscrollspy. |
Żid il-funzjonalità ta' tab rapida u dinamika biex tgħaddi minn panewijiet ta' kontenut lokali, anke permezz ta' menus dropdown. Tabs imnaqqxa mhumiex appoġġjati.
Denim mhux maħdum x'aktarx ma smajtx bihom jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master jitnaddaf. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex klamari. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher 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.
Dan il-plugin jestendi l -komponent tan-navigazzjoni tabbed biex iżżid żoni tabbable.
Ippermetti tabs tabbable permezz ta' JavaScript (kull tab trid tiġi attivata individwalment):
Tista' tattiva tabs individwali b'diversi modi:
Tista' tattiva tab jew navigazzjoni ta' pillola mingħajr ma tikteb JavaScript billi sempliċement tispeċifika data-toggle="tab"
jew data-toggle="pill"
fuq element. Iż-żieda tal- klassijiet nav
u mat-tab se tapplika l- grafika tat-tab Bootstrap , filwaqt li żżid il- klassijiet u se tapplika l -grafika tal-pilloli .nav-tabs
ul
nav
nav-pills
Biex tagħmel it-tabs fade, żid .fade
ma 'kull .tab-pane
. L-ewwel pannell tat-tab irid ikollu wkoll .in
jagħmel il-kontenut inizjali viżibbli.
$().tab
Jattiva element tab u kontenitur tal-kontenut. Tab għandu jkollu jew a data-target
jew href
node ta 'kontenitur fil-mira fid-DOM. Fl-eżempji ta 'hawn fuq, it-tabs huma l- <a>
i data-toggle="tab"
b'attributi.
.tab('show')
Jagħżel it-tab mogħtija u juri l-kontenut assoċjat tagħha. Kwalunkwe tab oħra li kienet magħżula qabel ma ssirx magħżula u l-kontenut assoċjat tagħha huwa moħbi. Jirritorna lil min iċempel qabel ma l-panew tat-tab fil-fatt intwera (jiġifieri qabel ma shown.bs.tab
jseħħ l-avveniment).
Meta turi tab ġdida, l-avvenimenti jisparaw fl-ordni li ġejja:
hide.bs.tab
(fuq it-tab attiva kurrenti)show.bs.tab
(fuq it-tab li trid tintwera)hidden.bs.tab
(fuq it-tab attiva preċedenti, l-istess bħal għall- hide.bs.tab
avveniment)shown.bs.tab
(fuq it-tab li għadha kif intwera, l-istess bħal dik tal- show.bs.tab
avveniment)Jekk l-ebda tab ma kienet diġà attiva, allura l- hide.bs.tab
u hidden.bs.tab
avvenimenti mhux se jiġu sparati.
Tip ta' Avveniment | Deskrizzjoni |
---|---|
juru.bs.tab | Dan l-avveniment jispara fuq tab show, iżda qabel ma tkun intweriet it-tab il-ġdida. Uża event.target u event.relatedTarget biex timmira t-tab attiva u t-tab attiva preċedenti (jekk disponibbli) rispettivament. |
muri.bs.tab | Dan l-avveniment jispara fuq tab show wara li tkun intweriet tab. Uża event.target u event.relatedTarget biex timmira t-tab attiva u t-tab attiva preċedenti (jekk disponibbli) rispettivament. |
hide.bs.tab | Dan l-avveniment jispara meta trid tintwera tab ġdida (u għalhekk it-tab attiva preċedenti trid tinħeba). Uża event.target u event.relatedTarget biex timmira t-tab attiva attwali u t-tab il-ġdida li dalwaqt tkun attiva, rispettivament. |
moħbija.bs.tab | Dan l-avveniment jispara wara li tintwera tab ġdida (u għalhekk it-tab attiva preċedenti hija moħbija). Uża event.target u event.relatedTarget biex timmira t-tab attiva preċedenti u t-tab attiva l-ġdida, rispettivament. |
Ispirat mill-plugin eċċellenti jQuery.tipsy miktub minn Jason Frame; Tooltips huma verżjoni aġġornata, li ma jiddependux fuq immaġini, jużaw CSS3 għall-animazzjonijiet, u data-attributi għall-ħażna tat-titlu lokali.
Tooltips b'titli ta' tul żero qatt ma jintwerew.
Passa fuq il-links hawn taħt biex tara l-għodda:
Qliezet stretti livell li jmiss keffiyeh inti probabilment ma smajthom. Photo booth beard raw denim letterpress vegan messaġġier borża stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american ilbies għandhom terri richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A verament ironiku artiġjan kwalunkwe keytar , scenester farm-to-table banksy Austin twitter manku freegan cred raw denim kafè ta 'oriġini waħda virali.
Erba' għażliet huma disponibbli: fuq, lemin, qiegħ, u xellug allinjat.
Għal raġunijiet ta' prestazzjoni, il-Tooltip u Popover data-apis huma opt-in, li jfisser li trid tinizjalizzahom lilek innifsek .
Mod wieħed biex jiġu inizjalizzati l-għodda kollha fuq paġna jkun li tagħżelhom skont l- data-toggle
attribut tagħhom:
Il-plugin tooltip jiġġenera kontenut u markup fuq talba, u awtomatikament iqiegħed tooltips wara l-element grillu tagħhom.
Agħmel it-tooltip permezz ta' JavaScript:
Il-markup meħtieġ għal tooltip huwa biss data
attribut u title
fuq l-element HTML tixtieq li jkollok tooltip. Il-markup iġġenerat ta' tooltip huwa pjuttost sempliċi, għalkemm jeħtieġ pożizzjoni (b'mod awtomatiku, issettjat top
mill-plugin).
Xi drabi trid iżżid tooltip ma' hyperlink li jgħaqqad linji multipli. L-imġiba awtomatika tal-plugin tooltip hija li tiċċentrah orizzontalment u vertikalment. Żid white-space: nowrap;
mal-ankri tiegħek biex tevita dan.
Meta tuża tooltips fuq elementi fi ħdan a .btn-group
jew an .input-group
, jew fuq elementi relatati mat-tabella ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), ikollok tispeċifika l-għażla container: 'body'
(dokumentata hawn taħt) biex tevita effetti sekondarji mhux mixtieqa (bħall-element li jikber usa u// jew jitlef il-kantunieri fit-tond tiegħu meta jinxtegħel it-tooltip).
Għall-utenti li qed jinnavigaw b'tastiera, u b'mod partikolari l-utenti ta' teknoloġiji ta' assistenza, għandek iżżid biss tooltips ma' elementi li jiffokaw fuq it-tastiera bħal links, kontrolli tal-formoli, jew kwalunkwe element arbitrarju tabindex="0"
b'attribut.
Biex iżżid tooltip għal a disabled
jew .disabled
element, poġġi l-element ġewwa a <div>
u applika l-tooltip għal dak <div>
minflok.
L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-
, bħal f' data-animation=""
.
Isem | Tip | Default | Deskrizzjoni |
---|---|---|---|
animazzjoni | boolean | veru | Applika transizzjoni ta' fade CSS għall-tooltip |
kontenitur | spag | falza | falza | Jwaħħal it-tooltip ma' element speċifiku. Eżempju: |
dewmien | numru | oġġett | 0 | Dewmien biex juri u jaħbi l-tooltip (ms) - ma japplikax għat-tip ta' grillu manwali Jekk jiġi fornut numru, id-dewmien jiġi applikat kemm biex jaħbu/juri L-istruttura tal-oġġett hija: |
html | boolean | falza | Daħħal HTML fil-tooltip. Jekk falz, il-metodu ta 'jQuery text se jintuża biex jiddaħħal kontenut fid-DOM. Uża test jekk int inkwetat dwar attakki XSS. |
tqegħid | spag | funzjoni | 'fuq' | Kif tpoġġi l-tooltip - top | qiegħ | xellug | dritt | auto. Meta tintuża funzjoni biex tiddetermina t-tqegħid, tissejjaħ bin-node DOM tal-għodda bħala l-ewwel argument tagħha u n-nodu DOM tal-element triggering bħala t-tieni. Il- |
selettur | spag | falza | Jekk jiġi pprovdut selettur, l-oġġetti tat-tooltip jiġu ddelegati lill-miri speċifikati. Fil-prattika, dan jintuża biex jippermetti li l-kontenut HTML dinamiku jiżdied it-tooltips. Ara dan u eżempju informattiv . |
mudell | spag | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Bażi HTML biex tuża meta toħloq it-tooltip. It-tooltip's
L-element tat-tgeżwir l-aktar 'il barra għandu jkollu l- |
titolu | spag | funzjoni | '' | Valur tat-titlu default jekk Jekk tingħata funzjoni, tissejjaħ bir- |
grillu | spag | 'fokus' | Kif tiġi attivata tooltip - ikklikkja | iddur | tiffoka | manwal. Inti tista 'tgħaddi triggers multipli; jifredhom bi spazju. manual ma jistax jiġi kkombinat ma' kwalunkwe trigger ieħor. |
viewport | spag | oġġett | funzjoni | { selettur: 'korp', padding: 0 } | Iżomm it-tooltip fil-limiti ta' dan l-element. Eżempju: Jekk tingħata funzjoni, tissejjaħ bin-node DOM tal-element triggering bħala l-uniku argument tagħha. Il- |
Għażliet għal tooltips individwali jistgħu alternattivament jiġu speċifikati permezz tal-użu tal-attributi tad-dejta, kif spjegat hawn fuq.
$().tooltip(options)
Jwaħħal tooltip handler ma' kollezzjoni ta' elementi.
.tooltip('show')
Tiżvela tooltip ta' element. Jirritorna lil min iċempel qabel ma jkun intwera l-għodda (jiġifieri qabel ma shown.bs.tooltip
jseħħ l-avveniment). Dan huwa meqjus bħala attivazzjoni "manwali" tal-tooltip. Tooltips b'titli ta' tul żero qatt ma jintwerew.
.tooltip('hide')
Jaħbi tooltip ta' element. Jirritorna lil min iċempel qabel ma l-għodda fil-fatt ġiet moħbija (jiġifieri qabel ma hidden.bs.tooltip
jseħħ l-avveniment). Dan huwa meqjus bħala attivazzjoni "manwali" tal-tooltip.
.tooltip('toggle')
Jiddawwar il-tooltip ta' element. Jirritorna lil min iċempel qabel ma l-għodda tkun intweriet jew moħbija (jiġifieri qabel ma jseħħ l-avveniment shown.bs.tooltip
jew ). hidden.bs.tooltip
Dan huwa meqjus bħala attivazzjoni "manwali" tal-tooltip.
.tooltip('destroy')
Jaħbi u jeqred it-tooltip ta' element. Tooltips li jużaw id-delega (li huma maħluqa bl -użu tal - selector
għażla ) ma jistgħux jinqerdu individwalment fuq elementi ta 'grillu dixxendenti.
Tip ta' Avveniment | Deskrizzjoni |
---|---|
show.bs.tooltip | Dan l-avveniment jispara immedjatament meta show jissejjaħ il-metodu tal-istanza. |
muri.bs.tooltip | Dan l-avveniment jiġi sparat meta l-tooltip tkun saret viżibbli għall-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew). |
hide.bs.tooltip | Dan l-avveniment jiġi sparat immedjatament meta l- hide metodu tal-istanza jkun ġie msejjaħ. |
hidden.bs.tooltip | Dan l-avveniment jiġi sparat meta l-tooltip spiċċa moħbi mill-utent (se jistenna li jitlestew it-tranżizzjonijiet CSS). |
inserit.bs.tooltip | Dan l-avveniment jiġi sparat wara l- show.bs.tooltip avveniment meta l-mudell tat-tooltip ikun ġie miżjud mad-DOM. |
Żid overlays żgħar ta 'kontenut, bħal dawk fuq l-iPad, ma' kwalunkwe element għall-akkomodazzjoni ta 'informazzjoni sekondarja.
Popovers li kemm it-titlu kif ukoll il-kontenut tagħhom huma ta' tul żero qatt ma jintwerew.
Popovers jeħtieġu li l- plugin tat-tooltip jiġi inkluż fil-verżjoni tiegħek ta 'Bootstrap.
Għal raġunijiet ta' prestazzjoni, il-Tooltip u Popover data-apis huma opt-in, li jfisser li trid tinizjalizzahom lilek innifsek .
Mod wieħed biex jiġu inizjalizzati l-popovers kollha fuq paġna jkun li tagħżelhom skont l- data-toggle
attribut tagħhom:
Meta tuża popovers fuq elementi fi ħdan a .btn-group
jew an .input-group
, jew fuq elementi relatati mal-mejda ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), ikollok tispeċifika l-għażla container: 'body'
(dokumentata hawn taħt) biex tevita effetti sekondarji mhux mixtieqa (bħall-element jikber usa u// jew jitlef il-kantunieri fit-tond tiegħu meta jinxtegħel il-popover).
Biex iżżid popover għal a disabled
jew .disabled
element, poġġi l-element ġewwa a <div>
u applika l-popover għal dak<div>
minflok.
Xi drabi trid iżżid popover ma 'hyperlink li jdawwal linji multipli. L-imġiba awtomatika tal-plugin popover hija li tiċċentrah orizzontalment u vertikalment. Żidwhite-space: nowrap;
mal-ankri tiegħek biex tevita dan.
Erba' għażliet huma disponibbli: fuq, lemin, qiegħ, u xellug allinjat.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Uża l- focus
grillu biex tkeċċi popovers fuq il-klikk li jmiss li jagħmel l-utent.
Għal imġieba xierqa bejn il-browser u l-pjattaforma, trid tuża t- <a>
tikketta, mhux it- <button>
tikketta, u trid tinkludi wkoll l- attributi role="button"
u .tabindex
Ippermetti popovers permezz ta' JavaScript:
L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-
, bħal f' data-animation=""
.
Isem | Tip | Default | Deskrizzjoni |
---|---|---|---|
animazzjoni | boolean | veru | Applika transizzjoni ta' fade CSS għall-popover |
kontenitur | spag | falza | falza | Jwaħħal il-popover ma' element speċifiku. Eżempju: |
kontenut | spag | funzjoni | '' | Valur tal-kontenut default jekk Jekk tingħata funzjoni, tissejjaħ bir- |
dewmien | numru | oġġett | 0 | Dewmien li juri u jaħbi l-popover (ms) - ma japplikax għat-tip ta' grillu manwali Jekk jiġi fornut numru, id-dewmien jiġi applikat kemm biex jaħbu/juri L-istruttura tal-oġġett hija: |
html | boolean | falza | Daħħal HTML fil-popover. Jekk falz, il-metodu ta 'jQuery text se jintuża biex jiddaħħal kontenut fid-DOM. Uża test jekk int inkwetat dwar attakki XSS. |
tqegħid | spag | funzjoni | 'dritt' | Kif tpoġġi l-popover - top | qiegħ | xellug | dritt | auto. Meta funzjoni tintuża biex tiddetermina t-tqegħid, tissejjaħ bin-node DOM popover bħala l-ewwel argument tagħha u n-nodu DOM tal-element triggering bħala t-tieni. Il- |
selettur | spag | falza | Jekk jiġi pprovdut selettur, oġġetti popover jiġu delegati lill-miri speċifikati. Fil-prattika, dan jintuża biex jippermetti li l-kontenut HTML dinamiku jkollu popovers miżjuda. Ara dan u eżempju informattiv . |
mudell | spag | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Bażi HTML biex tuża meta toħloq il-popover. Il-popover's Il-popover's
L-element tat-tgeżwir l-aktar 'il barra għandu jkollu l- |
titolu | spag | funzjoni | '' | Valur tat-titlu default jekk Jekk tingħata funzjoni, tissejjaħ bir- |
grillu | spag | 'ikklikkja' | Kif jinqabad popover - ikklikkja | iddur | tiffoka | manwal. Inti tista 'tgħaddi triggers multipli; jifredhom bi spazju. manual ma jistax jiġi kkombinat ma' kwalunkwe trigger ieħor. |
viewport | spag | oġġett | funzjoni | { selettur: 'korp', padding: 0 } | Iżomm il-popover fil-limiti ta 'dan l-element. Eżempju: Jekk tingħata funzjoni, tissejjaħ bin-node DOM tal-element triggering bħala l-uniku argument tagħha. Il- |
Għażliet għal popovers individwali jistgħu alternattivament jiġu speċifikati permezz tal-użu tal-attributi tad-dejta, kif spjegat hawn fuq.
$().popover(options)
Inizjalizza popovers għal ġabra ta' elementi.
.popover('show')
Tiżvela popover ta' element. Jirritorna lil min iċempel qabel ma l-popover fil-fatt intwera (jiġifieri qabel ma shown.bs.popover
jseħħ l-avveniment). Dan huwa meqjus bħala attivazzjoni "manwali" tal-popover. Popovers li kemm it-titlu kif ukoll il-kontenut tagħhom huma ta' tul żero qatt ma jintwerew.
.popover('hide')
Jaħbi popover ta' element. Jirritorna lil min iċempel qabel ma l-popover fil-fatt ġie moħbi (jiġifieri qabel ma hidden.bs.popover
jseħħ l-avveniment). Dan huwa meqjus bħala attivazzjoni "manwali" tal-popover.
.popover('toggle')
Jiddawwar il-popover ta' element. Jirritorna lil min iċempel qabel ma l-popover fil-fatt intwera jew moħbi (jiġifieri qabel ma jseħħ l-avveniment shown.bs.popover
jew ). hidden.bs.popover
Dan huwa meqjus bħala attivazzjoni "manwali" tal-popover.
.popover('destroy')
Jaħbi u jeqred il-popover ta' element. Popovers li jużaw id-delega (li huma maħluqa bl -użu tal - selector
għażla ) ma jistgħux jinqerdu individwalment fuq elementi ta 'grillu dixxendenti.
Tip ta' Avveniment | Deskrizzjoni |
---|---|
juru.bs.popover | Dan l-avveniment jispara immedjatament meta show jissejjaħ il-metodu tal-istanza. |
muri.bs.popover | Dan l-avveniment jiġi sparat meta l-popover ikun sar viżibbli għall-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew). |
hide.bs.popover | Dan l-avveniment jiġi sparat immedjatament meta l- hide metodu tal-istanza jkun ġie msejjaħ. |
moħbija.bs.popover | Dan l-avveniment jiġi sparat meta l-popover ikun spiċċa moħbi mill-utent (se jistenna li jitlestew it-tranżizzjonijiet CSS). |
inserit.bs.popover | Dan l-avveniment jiġi sparat wara l- show.bs.popover avveniment meta l-mudell popover ikun ġie miżjud mad-DOM. |
Żid il-funzjonalità tat-tkeċċija mal-messaġġi kollha ta' twissija b'dan il-plugin.
Meta tuża .close
buttuna, trid tkun l-ewwel tifel .alert-dismissible
u l-ebda kontenut tat-test ma jista' jiġi quddiemha fil-markup.
Ibdel dan u dak u erġa' pprova. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Żid biss data-dismiss="alert"
mal-buttuna ta 'qrib tiegħek biex awtomatikament tagħti funzjonalità ta' twissija mill-qrib. L-għeluq ta' allert ineħħiha mid-DOM.
Biex it-twissijiet tiegħek jużaw l-animazzjoni meta tagħlaq, kun żgur li għandhom l- .fade
u.in
diġà applikati għalihom.
$().alert()
Jagħmel twissija tisma 'għal avvenimenti ikklikkja fuq elementi dixxendenti li għandhom l- data-dismiss="alert"
attribut. (Mhux meħtieġ meta tuża l-awto-inizjalizzazzjoni tad-data-api.)
$().alert('close')
Jagħlaq twissija billi tneħħiha mid-DOM. Jekk il- klassijiet .fade
u .in
huma preżenti fuq l-element, it-twissija tisparixxi qabel ma titneħħa.
Il-plugin ta' twissija ta' Bootstrap jesponi ftit avvenimenti biex wieħed iqabbad mal-funzjonalità ta' twissija.
Tip ta' Avveniment | Deskrizzjoni |
---|---|
qrib.bs.twissija | Dan l-avveniment jispara immedjatament meta close jissejjaħ il-metodu tal-istanza. |
magħluqa.bs.alert | Dan l-avveniment jiġi sparat meta t-twissija tkun ingħalaq (se jistenna li t-tranżizzjonijiet CSS jitlestew). |
Agħmel aktar bil-buttuni. Ikkontrolla l-istati tal-buttuna jew toħloq gruppi ta 'buttuni għal aktar komponenti bħal toolbars.
Firefox jippersisti mill-istati tal-kontroll tal-forma (diżabbiltà u kontroll) tul it-tagħbijiet tal-paġni . Soluzzjoni għal dan huwa l-użu autocomplete="off"
. Ara l- bug Mozilla #654072 .
Żid data-loading-text="Loading..."
biex tuża stat tat-tagħbija fuq buttuna.
Din il-karatteristika hija deprecata mill-v3.3.5 u tneħħiet fil-v4.
Għall-fini ta 'din id-dimostrazzjoni, qed nużaw data-loading-text
u $().button('loading')
, iżda dak mhux l-uniku stat li tista' tuża. Ara aktar dwar dan hawn taħt fid- $().button(string)
dokumentazzjoni .
Żid data-toggle="button"
biex tattiva t-toggling fuq buttuna waħda.
.active
uaria-pressed="true"
Għal buttuni pre-toggled, trid iżżid il- .active
klassi u l- aria-pressed="true"
attribut mal- button
yourself.
Żid data-toggle="buttons"
ma' .btn-group
kaxxa ta' kontroll jew inputs tar-radju li jkun fih biex tippermetti t-toggling fl-istili rispettivi tagħhom.
.active
Għal għażliet magħżula minn qabel, trid iżżid il- .active
klassi mal-input's label
yourself.
Jekk l-istat iċċekkjat ta' buttuna ta' checkbox jiġi aġġornat mingħajr ma jispara click
avveniment fuq il-buttuna (eż. permezz <input type="reset">
jew permezz ta' l-issettjar tal- checked
proprjetà tal-input), ser ikollok bżonn taqleb il- .active
klassi fuq l-input's label
yourself.
$().button('toggle')
Toggles push state. Jagħti lill-buttuna id-dehra li ġiet attivata.
$().button('reset')
Irrisettja l-istat tal-buttuna - tbiddel it-test mat-test oriġinali. Dan il-metodu huwa asinkronu u jirritorna qabel ma r-resetting fil-fatt tlesta.
$().button(string)
Tibdel it-test għal kwalunkwe stat tat-test definit tad-dejta.
Plugin flessibbli li juża numru żgħir ta 'klassijiet għal imġieba ta' toggle faċli.
Il-kollass jeħtieġ li l -plugin tat-tranżizzjonijiet jiġi inkluż fil-verżjoni tiegħek ta' Bootstrap.
Ikklikkja l-buttuni hawn taħt biex turi u taħbi element ieħor permezz ta' bidliet fil-klassi:
.collapse
jaħbi l-kontenut.collapsing
hija applikata waqt transizzjonijiet.collapse.in
juri kontenutTista' tuża link bl- href
attribut, jew buttuna bl- data-target
attribut. Fiż-żewġ każijiet, data-toggle="collapse"
huwa meħtieġ.
Estendi l-imġieba tal-kollass default biex toħloq accordion mal-komponent tal-pannell.
Huwa wkoll possibbli li tpartit .panel-body
s ma .list-group
s.
Kun żgur li żżid aria-expanded
mal-element ta 'kontroll. Dan l-attribut jiddefinixxi b'mod espliċitu l-istat attwali tal-element kollassabbli għall-qarrejja tal-iskrin u teknoloġiji ta' assistenza simili. Jekk l-element kollassabbli jingħalaq awtomatikament, għandu jkollu valur ta' aria-expanded="false"
. Jekk issettjajt l-element kollassabbli biex ikun miftuħ awtomatikament billi tuża l- in
klassi, issettja aria-expanded="true"
fuq il-kontroll minflok. Il-plugin awtomatikament ibiddel dan l-attribut ibbażat fuq jekk l-element kollassabbli infetaħ jew ingħalaqx jew le.
Barra minn hekk, jekk l-element ta' kontroll tiegħek qed jimmira għal element wieħed li jista' jiġġarraf – jiġifieri l- data-target
attribut qed jipponta lejn id
selettur – tista' żżid aria-controls
attribut addizzjonali mal-element ta' kontroll, li jkun fih l id
-element li jista' jiġġarraf. Screen readers moderni u teknoloġiji ta' assistenza simili jagħmlu użu minn dan l-attribut biex jipprovdu lill-utenti b'shortcuts addizzjonali biex jinnavigaw direttament lejn l-element kollassabbli innifsu.
Il-plugin tal-kollass juża ftit klassijiet biex jimmaniġġja l-irfigħ tqil:
.collapse
jaħbi l-kontenut.collapse.in
juri l-kontenut.collapsing
tiżdied meta tibda t-tranżizzjoni, u titneħħa meta tispiċċaDawn il-klassijiet jistgħu jinstabu fi component-animations.less
.
Żid biss data-toggle="collapse"
u a data-target
mal-element biex awtomatikament tassenja l-kontroll ta 'element kollassabbli. L- data-target
attribut jaċċetta selettur CSS biex japplika l-kollass għalih. Kun żgur li żżid il-klassi collapse
mal-element kollassabbli. Jekk tixtieq li tiftaħ awtomatikament, żid il-klassi addizzjonali in
.
Biex iżżid ġestjoni tal-gruppi bħal accordion ma 'kontroll kollassabbli, żid l-attribut tad-data data-parent="#selector"
. Irreferi għad-demo biex tara dan fl-azzjoni.
Ippermetti manwalment ma':
L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-
, bħal f' data-parent=""
.
Isem | tip | default | deskrizzjoni |
---|---|---|---|
ġenitur | selettur | falza | Jekk jiġi pprovdut selettur, allura l-elementi kollha kollassabbli taħt il-ġenitur speċifikat jingħalqu meta jintwera dan l-oġġett kollassabbli. (simili għall-imġieba tradizzjonali tal-accordion - dan jiddependi fuq il- panel klassi) |
toggle | boolean | veru | Jiddawwar l-element kollassabbli fuq l-invokazzjoni |
.collapse(options)
Jattiva l-kontenut tiegħek bħala element kollassabbli. Jaċċetta għażliet fakultattivi object
.
.collapse('toggle')
Jitbiddel element kollassabbli biex jintwera jew moħbi. Jirritorna lil min iċempel qabel ma l-element kollassabbli fil-fatt ġie muri jew moħbi (jiġifieri qabel ma jseħħ l-avveniment shown.bs.collapse
jew ).hidden.bs.collapse
.collapse('show')
Juri element kollassabbli. Jirritorna lil min iċempel qabel ma l-element kollassabbli jkun fil-fatt intwera (jiġifieri qabel ma shown.bs.collapse
jseħħ l-avveniment).
.collapse('hide')
Jaħbi element kollassabbli. Jirritorna lil min iċempel qabel ma l-element kollassabbli fil-fatt ġie moħbi (jiġifieri qabel ma hidden.bs.collapse
jseħħ l-avveniment).
Il-klassi tal-kollass ta 'Bootstrap tesponi ftit avvenimenti għall-ganċ fil-funzjonalità tal-kollass.
Tip ta' Avveniment | Deskrizzjoni |
---|---|
juru.bs.kollass | Dan l-avveniment jispara immedjatament meta show jissejjaħ il-metodu tal-istanza. |
muri.bs.kollass | Dan l-avveniment jiġi sparat meta element ta 'kollass ikun sar viżibbli għall-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew). |
jaħbi.bs.kollass | Dan l-avveniment jiġi sparat immedjatament meta l- hide metodu jkun ġie msejjaħ. |
moħbija.bs.kollass | Dan l-avveniment jiġi sparat meta element ta 'kollass ikun ġie moħbi mill-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew). |
Komponent ta 'slideshow għaċ-ċikliżmu minn elementi, bħal karużell. Il-karużelli mgħaqqda mhumiex appoġġjati.
Il-komponent tal-karużell ġeneralment mhuwiex konformi mal-istandards tal-aċċessibbiltà. Jekk trid tkun konformi, jekk jogħġbok ikkunsidra għażliet oħra biex tippreżenta l-kontenut tiegħek.
Bootstrap juża esklussivament CSS3 għall-animazzjonijiet tiegħu, iżda l-Internet Explorer 8 & 9 ma jappoġġjawx il-proprjetajiet CSS meħtieġa. Għalhekk, m'hemm l-ebda animazzjonijiet ta 'transizzjoni slide meta tuża dawn il-browsers. Intenzjonalment iddeċidejna li ma nkludux fallbacks ibbażati fuq jQuery għat-tranżizzjonijiet.
Il- .active
klassi trid tiżdied ma' waħda mill-pjastri. Inkella, il-karużell ma jkunx viżibbli.
Il -klassijiet .glyphicon .glyphicon-chevron-left
u .glyphicon .glyphicon-chevron-right
mhumiex neċessarjament meħtieġa għall-kontrolli. Bootstrap jipprovdi .icon-prev
u .icon-next
bħala alternattivi Unicode sempliċi.
Żid captions mal-pjastri tiegħek faċilment bl- .carousel-caption
element fi kwalunkwe .item
. Poġġi kważi kwalunkwe HTML fakultattiv hemmhekk u se jkun allinjat u fformattjat awtomatikament.
Il-karużelli jeħtieġu l-użu ta' id
kontenitur fuq l-aktar 'il barra (il- .carousel
) biex il-kontrolli tal-karużell jiffunzjonaw kif suppost. Meta żżid karużelli multipli, jew meta tbiddel karużell id
, kun żgur li taġġorna l-kontrolli rilevanti.
Uża l-attributi tad-dejta biex tikkontrolla faċilment il-pożizzjoni tal-karużell. data-slide
jaċċetta l-kliem kjavi prev
jew next
, li jibdel il-pożizzjoni slide relattiva għall-pożizzjoni attwali tagħha. Inkella, uża data-slide-to
biex tgħaddi indiċi ta' slide mhux ipproċessat lill-karużell data-slide-to="2"
, li jbiddel il-pożizzjoni tal-islajd għal indiċi partikolari li jibda b' 0
.
L- data-ride="carousel"
attribut jintuża biex jimmarka karużell bħala animazzjoni li jibda mat-tagħbija tal-paġna. Ma jistax jintuża flimkien ma 'inizjalizzazzjoni JavaScript espliċita (superjuri u mhux meħtieġa) tal-istess carousel.
Ċempel il-karużell manwalment bi:
L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-
, bħal f' data-interval=""
.
Isem | tip | default | deskrizzjoni |
---|---|---|---|
intervall | numru | 5000 | L-ammont ta 'ħin biex tittardja bejn iċ-ċikliżmu ta' oġġett awtomatikament. Jekk falza, il-karużell mhux awtomatikament iċ-ċiklu. |
waqfa | spag | null | "idwar" | Jekk issettjat għal "hover" , iwaqqaf iċ-ċikliżmu tal-karużell mixgħul mouseenter u jerġa' jibda ċ-ċikliżmu tal-karużell mixgħul mouseleave . Jekk issettjat għal null , iddur fuq il-karużell ma jieqafx. |
wrap | boolean | veru | Jekk il-karużell għandux iċ-ċiklu kontinwu jew ikollux waqfiet iebsin. |
tastiera | boolean | veru | Jekk il-karużell għandux jirreaġixxi għall-avvenimenti tat-tastiera. |
.carousel(options)
Inizjalizza l-karużell b'għażliet fakultattivi object
u jibda jiċċirkola permezz ta 'oġġetti.
.carousel('cycle')
Ċikli permezz tal-oġġetti tal-karużell mix-xellug għal-lemin.
.carousel('pause')
Jwaqqaf il-karużell milli jiċċirkola permezz ta' oġġetti.
.carousel(number)
Iċċekkja l-karużell għal qafas partikolari (ibbażat fuq 0, simili għal firxa).
.carousel('prev')
Ċikli għall-oġġett preċedenti.
.carousel('next')
Ċikli għall-oġġett li jmiss.
Il-klassi tal-karużell tal-Bootstrap tesponi żewġ avvenimenti biex tgħaqqad il-funzjonalità tal-karużell.
Iż-żewġ avvenimenti għandhom il-proprjetajiet addizzjonali li ġejjin:
direction
: Id-direzzjoni li fiha l-karużell qed jiżżerżaq ( "left"
jew "right"
).relatedTarget
: L-element DOM li qed jiżżerżaq fil-post bħala l-oġġett attiv.L-avvenimenti kollha tal-karużell jiġu sparati lejn il-karużell innifsu (jiġifieri fil- <div class="carousel">
).
Tip ta' Avveniment | Deskrizzjoni |
---|---|
slide.bs.carousel | Dan l-avveniment jispara immedjatament meta slide jiġi invokat il-metodu tal-istanza. |
jiżżerżaq.bs.karużell | Dan l-avveniment jiġi sparat meta l-karużell ikun lesta t-transizzjoni tal-islajds tiegħu. |
Il-plugin tat-twaħħil jinxtegħel position: fixed;
u jitfi, u jimita l-effett misjub b' position: sticky;
. Is-subnavigazzjoni fuq il-lemin hija demo ħaj tal-plugin affix.
Uża l-plugin tat-twaħħil permezz tal-attributi tad-dejta jew manwalment bil-JavaScript tiegħek stess. Fiż-żewġ sitwazzjonijiet, trid tipprovdi CSS għall-pożizzjonament u l-wisa 'tal-kontenut imwaħħal tiegħek.
Nota: Tużax il-plugin tat-twaħħil fuq element li jinsab f'element relattivament pożizzjonat, bħal kolonna miġbuda jew imbuttata, minħabba bug ta' rendering ta' Safari .
Il-plugin tat-twaħħil jaqleb bejn tliet klassijiet, kull waħda tirrappreżenta stat partikolari: .affix
, .affix-top
, u .affix-bottom
. Int trid tipprovdi l-istili, bl-eċċezzjoni ta ' position: fixed;
on .affix
, għal dawn il-klassijiet lilek innifsek (indipendenti minn dan il-plugin) biex timmaniġġja l-pożizzjonijiet attwali.
Hawn kif jaħdem il-plugin tal-affiss:
.affix-top
biex jindika li l-element jinsab fl-ogħla pożizzjoni tiegħu. F'dan il-punt l-ebda pożizzjonament CSS mhu meħtieġ..affix
jissostitwixxi .affix-top
u jissettja position: fixed;
(provdut mis-CSS ta 'Bootstrap)..affix
b' .affix-bottom
. Peress li l-kumpensi huma fakultattivi, l-issettjar wieħed jeħtieġ li tissettja s-CSS xierqa. F'dan il-każ, żid position: absolute;
meta meħtieġ. Il-plugin juża l-attribut tad-dejta jew l-għażla JavaScript biex jiddetermina fejn għandu jpoġġi l-element minn hemm.Segwi l-passi ta 'hawn fuq biex issettja s-CSS tiegħek għal waħda mill-għażliet ta' użu hawn taħt.
Biex iżżid faċilment l-imġieba tat-twaħħil ma 'kwalunkwe element, żid biss data-spy="affix"
mal-element li trid tispija fuqu. Uża offsets biex tiddefinixxi meta toggle l-pinning ta 'element.
Ċempel il-plugin tal-affiss permezz ta' JavaScript:
L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-
, bħal f' data-offset-top="200"
.
Isem | tip | default | deskrizzjoni |
---|---|---|---|
offset | numru | funzjoni | oġġett | 10 | Pixels li jpattu mill-iskrin meta tikkalkula l-pożizzjoni tal-iscroll. Jekk jiġi pprovdut numru wieħed, l-offset jiġi applikat kemm fid-direzzjonijiet ta 'fuq kif ukoll ta' isfel. Biex tipprovdi offset uniku, ta' isfel u ta' fuq ipprovdi biss oġġett offset: { top: 10 } jew offset: { top: 10, bottom: 5 } . Uża funzjoni meta jkollok bżonn tikkalkula b'mod dinamiku offset. |
mira | selettur | nodu | jQuery element | l- window oġġett |
Jispeċifika l-element fil-mira tal-affiss. |
.affix(options)
Jattiva l-kontenut tiegħek bħala kontenut imwaħħal. Jaċċetta għażliet fakultattivi object
.
.affix('checkPosition')
Jikkalkula mill-ġdid l-istat tat-twaħħil ibbażat fuq id-dimensjonijiet, il-pożizzjoni, u l-pożizzjoni tal-iscroll tal-elementi rilevanti. Il -klassijiet .affix
, .affix-top
, u .affix-bottom
huma miżjuda jew imneħħija mill-kontenut imwaħħal skont l-istat il-ġdid. Dan il-metodu jeħtieġ li jissejjaħ kull meta jinbidlu d-dimensjonijiet tal-kontenut imwaħħal jew l-element fil-mira, biex jiġi żgurat pożizzjoni korretta tal-kontenut imwaħħal.
Il-plugin tat-twaħħil ta 'Bootstrap jesponi ftit avvenimenti għall-ganċ fil-funzjonalità tat-twaħħil.
Tip ta' Avveniment | Deskrizzjoni |
---|---|
twaħħal.bs.affissa | Dan l-avveniment jispara immedjatament qabel ma l-element ikun ġie mwaħħal. |
imwaħħal.bs.jwaħħal | Dan l-avveniment jiġi sparat wara li l-element ikun ġie mwaħħal. |
iwaħħal-top.bs.affix | Dan l-avveniment jispara immedjatament qabel ma l-element ikun ġie mwaħħal fuq nett. |
imwaħħal-top.bs.affiss | Dan l-avveniment jiġi sparat wara li l-element ikun ġie mwaħħal fuq nett. |
twaħħal-qiegħ.bs.affissa | Dan l-avveniment jispara immedjatament qabel ma l-element ikun twaħħal fil-qiegħ. |
imwaħħal-qiegħ.bs.jwaħħal | Dan l-avveniment jiġi sparat wara li l-element ikun ġie mwaħħal fil-qiegħ. |