JavaScript
Vivu la komponantojn de Bootstrap per pli ol dekduo kutimaj jQuery-kromaĵoj. Facile inkluzivu ilin ĉiujn, aŭ unu post la alia.
Vivu la komponantojn de Bootstrap per pli ol dekduo kutimaj jQuery-kromaĵoj. Facile inkluzivu ilin ĉiujn, aŭ unu post la alia.
Kromaĵoj povas esti inkluzivitaj individue (uzante la individuajn *.js
dosierojn de Bootstrap), aŭ ĉiujn samtempe (uzante bootstrap.js
aŭ la minified bootstrap.min.js
).
Ambaŭ bootstrap.js
kaj bootstrap.min.js
enhavas ĉiujn kromaĵojn en ununura dosiero. Inkluzivi nur unu.
Iuj aldonaĵoj kaj CSS-komponentoj dependas de aliaj aldonaĵoj. Se vi inkluzivas kromaĵojn individue, nepre kontroli ĉi tiujn dependecojn en la dokumentoj. Rimarku ankaŭ, ke ĉiuj kromprogramoj dependas de jQuery (ĉi tio signifas, ke jQuery devas esti inkluzivita antaŭ la kromprogramoj). Konsultu nianbower.json
por vidi kiuj versioj de jQuery estas subtenataj.
Vi povas uzi ĉiujn Bootstrap-kromaĵojn nur per la markada API sen skribi ununuran linion de JavaScript. Ĉi tio estas la unuaklasa API de Bootstrap kaj devus esti via unua konsidero kiam vi uzas kromprogramon.
Dirite, en iuj situacioj eble estos dezirinde malŝalti ĉi tiun funkcion. Sekve, ni ankaŭ provizas la kapablon malŝalti la datuman atributon API malligante ĉiujn eventojn en la dokumento nomspacita kun data-api
. Ĉi tio aspektas jene:
Alternative, por celi specifan kromaĵon, simple inkluzivu la nomon de la kromaĵo kiel nomspacon kune kun la data-api nomspaco jene:
Ne uzu datumajn atributojn de pluraj kromprogramoj sur la sama elemento. Ekzemple, butono ne povas kaj havi konsileton kaj ŝanĝi modalon. Por plenumi tion, uzu envolvan elementon.
Ni ankaŭ kredas, ke vi devus povi uzi ĉiujn Bootstrap kromaĵojn nur per la JavaScript API. Ĉiuj publikaj API-oj estas unuopaj, ĉeneblaj metodoj, kaj resendas la kolekton pri kiu reagis.
Ĉiuj metodoj devas akcepti laŭvolan opcian objekton, ĉenon kiu celas apartan metodon, aŭ nenion (kiu iniciatas kromprogramon kun defaŭlta konduto):
Ĉiu kromaĵo ankaŭ elmontras sian krudan konstruilon sur Constructor
posedaĵo: $.fn.popover.Constructor
. Se vi ŝatus ricevi apartan kromprogramon, reakiru ĝin rekte de elemento: $('[rel="popover"]').data('popover')
.
Vi povas ŝanĝi la defaŭltajn agordojn por kromaĵo modifante la Constructor.DEFAULTS
objekton de la kromaĵo:
Kelkfoje necesas uzi Bootstrap-kromaĵojn kun aliaj UI-kadroj. En tiuj cirkonstancoj, nomspackolizioj povas foje okazi. Se tio okazas, vi povas alvoki .noConflict
la kromprogramon, pri kiu vi volas reverti la valoron.
Bootstrap provizas kutimajn eventojn por la unikaj agoj de la plej multaj kromprogramoj. Ĝenerale, tiuj venas en infinitiva kaj preterito participo - kie la infinitivo (ekz. show
) estas ekigita ĉe la komenco de okazaĵo, kaj ĝia preterito participformo (ekz. shown
) estas ekigita sur la kompletigo de ago.
Ekde 3.0.0, ĉiuj Bootstrap-okazaĵoj estas nomspacigitaj.
Ĉiuj infinitivaj eventoj disponigas preventDefault
funkciecon. Ĉi tio disponigas la kapablon ĉesigi la ekzekuton de ago antaŭ ol ĝi komenciĝas.
La versio de ĉiu el la aldonaĵoj jQuery de Bootstrap estas alirebla per la VERSION
posedaĵo de la konstrukciisto de la kromaĵo. Ekzemple, por la konsileto-kromaĵo:
La kromprogramoj de Bootstrap ne falas precipe gracie kiam JavaScript estas malŝaltita. Se vi zorgas pri la uzantsperto en ĉi tiu kazo, uzu <noscript>
por klarigi la situacion (kaj kiel reebligi JavaScript) al viaj uzantoj, kaj/aŭ aldoni viajn proprajn kutimajn kompensojn.
Bootstrap ne oficiale subtenas triajn JavaScript-bibliotekojn kiel Prototype aŭ jQuery UI. Malgraŭ .noConflict
kaj nomspacitaj eventoj, povas esti kongruaj problemoj, kiujn vi devas ripari memstare.
Por simplaj transiraj efikoj, inkluzivu transition.js
unufoje kune kun la aliaj JS-dosieroj. Se vi uzas la kompilitan (aŭ minimumigitan) bootstrap.js
, ne necesas inkluzivi ĉi tion—ĝi jam estas tie.
Transition.js estas baza helpanto por transitionEnd
eventoj kaj ankaŭ CSS-transira emulilo. Ĝi estas uzata de la aliaj kromprogramoj por kontroli por CSS-transirsubteno kaj por kapti pendantajn transirojn.
Transiroj povas esti tutmonde malebligitaj uzante la jenan JavaScript-fragmenton, kiu devas veni post kiam transition.js
(aŭ bootstrap.js
aŭ bootstrap.min.js
, laŭ la kazo) ŝarĝiĝis:
Modaloj estas fluliniaj, sed flekseblaj, dialogaj instigoj kun la minimuma postulata funkcieco kaj inteligentaj defaŭltoj.
Nepre ne malfermu modalon dum alia ankoraŭ videblas. Montri pli ol unu modalon samtempe postulas kutiman kodon.
Ĉiam provu meti la HTML-kodon de modalo en plej altan pozicion en via dokumento por eviti ke aliaj komponantoj influu la aspekton kaj/aŭ funkciojn de la modalo.
Estas kelkaj avertoj pri uzado de modaloj en porteblaj aparatoj. Vidu nian retumilon subtendokumentojn por detaloj.
Pro kiel HTML5 difinas sian semantikon, la autofocus
HTML-atributo ne efikas en Bootstrap-modaloj. Por atingi la saman efikon, uzu iun kutiman JavaScript:
Reprezentita modalo kun kaplinio, korpo kaj aro de agoj en la piedlinio.
Ŝaltu modalon per JavaScript alklakante la suban butonon. Ĝi glitos malsupren kaj velkos de la supro de la paĝo.
Nepre aldonu role="dialog"
kaj aria-labelledby="..."
, referencante la modalan titolon, al .modal
, kaj role="document"
al la .modal-dialog
mem.
Aldone, vi povas doni priskribon de via modala dialogo per aria-describedby
sur .modal
.
Enmeti YouTube-filmetojn en modaloj postulas plian JavaScript ne en Bootstrap por aŭtomate ĉesigi la reproduktadon kaj pli. Vidu ĉi tiun helpeman afiŝon de Stack Overflow por pliaj informoj.
Modaloj havas du laŭvolajn grandecojn, haveblajn per modifiklasoj por esti metitaj sur .modal-dialog
.
Por modaloj kiuj simple aperas prefere ol fadi por vidi, forigu la .fade
klason de via modala markado.
Por utiligi la Bootstrap kradsistemon ene de modalo, nur nestu .row
s ene de la .modal-body
kaj tiam uzu la normalajn kradsistemklasojn.
Ĉu vi havas amason da butonoj, kiuj ĉiuj ekigas la saman modalon, nur kun iomete malsama enhavo? Uzu event.relatedTarget
kaj HTML- data-*
atributojn (eble per jQuery ) por variigi la enhavon de la modalo depende de kiu butono estis klakita. Vidu la dokumentojn pri Modalaj Eventoj por detaloj pri relatedTarget
,
La modala kromaĵo ŝanĝas vian kaŝitan enhavon laŭpeto, per datumaj atributoj aŭ JavaScript. Ĝi ankaŭ aldonas .modal-open
al la <body>
por superregi defaŭltan movo-konduton kaj generas .modal-backdrop
por disponigi klakan areon por forĵeti montritajn modalojn kiam oni klakas ekster la modalo.
Aktivigu modalon sen skribi JavaScript. Agordu data-toggle="modal"
sur regila elemento, kiel butono, kune kun data-target="#foo"
aŭ href="#foo"
por celi specifan modalon por ŝanĝi.
Voku modalon kun id myModal
kun ununura linio de JavaScript:
Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-
, kiel en data-backdrop=""
.
Nomo | tajpu | defaŭlte | Priskribo |
---|---|---|---|
fono | bulea aŭ la ĉeno'static' |
vera | Inkluzivas modalan fonan elementon. Alternative, specifu static por fono, kiu ne fermas la modalon alklakante. |
klavaro | bulea | vera | Fermas la modalon kiam eskapa klavo estas premata |
montri | bulea | vera | Montras la modalon kiam pravalorigita. |
fora | vojo | malvera | Ĉi tiu opcio estas malrekomendita ekde v3.3.0 kaj estis forigita en v4. Ni rekomendas anstataŭe uzi klientflankan ŝablonon aŭ datuman ligan kadron, aŭ voki jQuery.load mem. Se fora URL estas provizita, enhavo estos ŝarĝita unufoje per la metodo de jQuery |
.modal(options)
Aktivigas vian enhavon kiel modalon. Akceptas laŭvolajn opciojn object
.
.modal('toggle')
Mane ŝanĝas modalon. Revenas al la alvokanto antaŭ ol la modalo estas efektive montrita aŭ kaŝita (t.e. antaŭ ol la shown.bs.modal
evento hidden.bs.modal
okazas).
.modal('show')
Mane malfermas modalon. Revenas al la alvokanto antaŭ ol la modalo estas efektive montrita (te antaŭ ol la shown.bs.modal
evento okazas).
.modal('hide')
Mane kaŝas modalon. Revenas al la alvokanto antaŭ ol la modalo estas fakte kaŝita (te antaŭ ol la hidden.bs.modal
evento okazas).
.modal('handleUpdate')
Reĝustigas la poziciigon de la modalo por kontraŭstari rulstangon en la okazo ke oni aperus, kio farus la modalon salti maldekstren.
Nur necesas kiam la alteco de la modalo ŝanĝiĝas dum ĝi estas malfermita.
La modala klaso de Bootstrap elmontras kelkajn eventojn por hoki al modala funkcieco.
Ĉiuj modalaj eventoj estas pafitaj ĉe la modalo mem (te ĉe la <div class="modal">
).
Eventa Tipo | Priskribo |
---|---|
show.bs.modal | Ĉi tiu evento tuj ekfunkciigas kiam la show ekzempla metodo estas vokita. Se kaŭzite de klako, la klakita elemento disponeblas kiel la relatedTarget posedaĵo de la evento. |
montrata.bs.modala | Ĉi tiu evento estas lanĉita kiam la modalo fariĝis videbla por la uzanto (atendos ke CSS-transiroj finiĝos). Se kaŭzite de klako, la klakita elemento disponeblas kiel la relatedTarget posedaĵo de la evento. |
kaŝi.bs.modal | Ĉi tiu evento estas lanĉita tuj kiam la hide ekzempla metodo estas vokita. |
kaŝita.bs.modala | Ĉi tiu evento estas lanĉita kiam la modalo finiĝis kaŝita de la uzanto (atendos ke CSS-transiroj finiĝos). |
loaded.bs.modal | Ĉi tiu evento estas lanĉita kiam la modalo ŝarĝis enhavon uzante la remote opcion. |
Aldonu falmenuojn al preskaŭ io ajn per ĉi tiu simpla kromaĵo, inkluzive de la navigadbreto, langetoj kaj piloloj.
Per datumaj atributoj aŭ JavaScript, la falmenuo aldonaĵo ŝanĝas kaŝitan enhavon (falmenuoj) ŝanĝante la .open
klason sur la gepatra listo.
Sur porteblaj aparatoj, malfermi falmenuon aldonas .dropdown-backdrop
kiel frapetan areon por fermi falmenuojn dum frapetado ekster la menuo, postulo por taŭga iOS-subteno. Ĉi tio signifas, ke ŝanĝi de malfermita falmenuo al malsama falmenuo postulas kroman frapeton sur poŝtelefono.
Noto: La data-toggle="dropdown"
atributo estas fidata por fermi falmenuojn je aplika nivelo, do estas bona ideo ĉiam uzi ĝin.
Aldonu data-toggle="dropdown"
al ligilo aŭ butono por ŝanĝi falmenuon.
Por konservi URL-ojn nerompitaj kun ligaj butonoj, uzu la data-target
atributon anstataŭ href="#"
.
Voku la menuojn per JavaScript:
data-toggle="dropdown"
ankoraŭ bezonataSendepende de ĉu vi nomas vian falmenuon per JavaScript aŭ anstataŭe uzas la datuman api, data-toggle="dropdown"
ĉiam necesas ĉeesti sur la ellasilelemento de la menuo.
Neniu
$().dropdown('toggle')
Ŝaltas la falmenuon de difinita navbreto aŭ klapeta navigado.
Ĉiuj falmenuaj eventoj estas pafitaj ĉe la .dropdown-menu
gepatra elemento de la.
Ĉiuj falmenuaj eventoj havas relatedTarget
posedaĵon, kies valoro estas la ŝanĝanta ankrelemento.
Eventa Tipo | Priskribo |
---|---|
montru.bs.falumenon | Ĉi tiu evento tuj ekfunkciigas kiam la metodo de spektaklo estas vokita. |
montrata.bs.menuo | Ĉi tiu evento estas pafita kiam la falmenuo fariĝis videbla por la uzanto (atendos CSS-transirojn, por plenumi). |
kaŝi.bs.falu | Ĉi tiu evento estas lanĉita tuj kiam la metodo kaŝi kazon estas vokita. |
kaŝita.bs.falu | Ĉi tiu evento estas pafita kiam la menuo finiĝis kaŝita de la uzanto (atendos CSS-transirojn, por finiĝi). |
La ScrollSpy kromaĵo estas por aŭtomate ĝisdatigi nav-celojn surbaze de rulpozicio. Rulumu la areon sub la navbar kaj rigardu la aktivan klasŝanĝon. La submenuaj suberoj ankaŭ estos reliefigitaj.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi antaŭ ol ili elĉerpiĝis qui. Tumblr-bieno-al-tablo-rajtoj de biciklo. Anim keffiyeh carles cardigan. La fotobudo de Velit seitan mcsweeney 3 lupo luno irure. Cosby svetero lomo jean shorts, williamsburg hoodie minimum qui vi verŝajne ne aŭdis pri ili et cardigan trust fund kulpa biodiesel wes anderson estetiko. Nihil tatuita akuzamus, kredi ironio biodiesel keffiyeh metiisto ullamco consequat.
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork barbo. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tatuita cosby svetero manĝkamiono, mcsweeney's quis non freegan vinilo. Lo-fi wes anderson +1 vestaĵo. Carles ne estetika ekzercado quis gentrify. Brooklyn adipisicing metia biero vice keytar deserunt.
Occaecat commodo aliqua delectus. Fap metia biero deserunt rultabulo ea. Lomo biciklorajtoj adipisicing banh mi, velit ea sunt next level locavore unu-devena kafo en magna veniam. High life id vinilo, echo park consequat quis aliquip banh mi pitchfork. Vero VHS estas adipisicing. Consectetur nisi DIY minimum mesaĝa sako. Kredi eks in, daŭrigebla 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 blogo, kulpa mesaĝista sako marfa whatever delectus manĝkamiono. Sapiente synth id assumenda. Locavore sed helvetica kliŝo ironio, thundercats vi verŝajne ne aŭdis pri ili 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 metiisto. Cardigan metia biero seitan preta velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Navbar-ligiloj devas havi solveblajn id-celojn. Ekzemple, <a href="#home">home</a>
devas respondi al io en la DOM kiel <div id="home"></div>
.
:visible
celaj elementoj ignoritajCelelementoj kiuj ne estas :visible
laŭ jQuery estos ignoritaj kaj iliaj respondaj nav-eroj neniam estos reliefigitaj.
Ne gravas la efektivigmetodo, scrollspy postulas la uzon de position: relative;
la elemento, kiun vi spionas. Plejofte ĉi tio estas la <body>
. Kiam scrollspying sur elementoj krom la <body>
, nepre havi height
aron kaj overflow-y: scroll;
aplikita.
Por facile aldoni scrollspy-konduton al via supra navigado, aldonu data-spy="scroll"
al la elemento, kiun vi volas spioni (plej kutime ĉi tio estus la <body>
). Poste aldonu la data-target
atributon kun la ID aŭ klaso de la gepatra elemento de iu ajn Bootstrap- .nav
komponento.
Post aldoni position: relative;
vian CSS, voku la scrollspy per JavaScript:
.scrollspy('refresh')
Kiam vi uzas scrollspy kune kun aldono aŭ forigo de elementoj de la DOM, vi devos nomi la refreŝigan metodon tiel:
Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-
, kiel en data-offset=""
.
Nomo | tajpu | defaŭlte | Priskribo |
---|---|---|---|
ofseto | nombro | 10 | Pikseloj por kompensi de supro dum kalkulado de pozicio de rullibro. |
Eventa Tipo | Priskribo |
---|---|
aktivigi.bs.scrollspy | Ĉi tiu evento pafas kiam ajn nova objekto estas aktivigita de la scrollspy. |
Aldonu rapidan dinamikan langeton por transiri tra paneloj de loka enhavo, eĉ per falmenuoj. Nestitaj langetoj ne estas subtenataj.
Kruda denim vi verŝajne ne aŭdis pri ili jean shorts Austin. Nesciunt tofu stumptown aliqua, retro sintezila majstro purigi. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby svetero eu banh mi, qui irure terry richardson eks kalmaro. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan amerika vesto, 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.
Ĉi tiu kromaĵo etendas la klapeta navigada komponanto por aldoni tabulajn areojn.
Ebligu tabulajn langetojn per JavaScript (ĉiu langeto devas esti aktivigita individue):
Vi povas aktivigi individuajn langetojn en pluraj manieroj:
Vi povas aktivigi langeton aŭ pilolan navigadon sen skribi JavaScript per simple specifi data-toggle="tab"
aŭ data-toggle="pill"
sur elemento. Aldonante la nav
kaj nav-tabs
klasojn al la langeto ul
aplikos la stilon de la langeto Bootstrap , dum aldonado de la nav
kaj nav-pills
klasoj aplikos pilolstilon .
Por ke langetoj fadiĝu, aldonu .fade
al ĉiu .tab-pane
. La unua klapeta panelo ankaŭ devas .in
vidigi la komencan enhavon.
$().tab
Aktivigas langetan elementon kaj enhavujon. Tab devus havi aŭ data-target
celantan href
ujo-nodon en la DOM. En la supraj ekzemploj, la langetoj estas la <a>
s kun data-toggle="tab"
atributoj.
.tab('show')
Elektas la donitan langeton kaj montras ĝian rilatan enhavon. Ajna alia langeto, kiu estis antaŭe elektita, fariĝas neelektita kaj ĝia rilata enhavo estas kaŝita. Revenas al la alvokanto antaŭ ol la langeto-fenestro efektive estis montrita (te antaŭ ol la shown.bs.tab
evento okazas).
Kiam oni montras novan langeton, la eventoj ekfunkciigas en la sekva sinsekvo:
hide.bs.tab
(en la nuna aktiva langeto)show.bs.tab
(en la montrota langeto)hidden.bs.tab
(sur la antaŭa aktiva langeto, la sama kiel por la hide.bs.tab
evento)shown.bs.tab
(en la lastatempe aktiva ĵus montrita langeto, la sama kiel por la show.bs.tab
evento)Se neniu langeto jam estis aktiva, tiam la eventoj hide.bs.tab
kaj hidden.bs.tab
ne estos pafitaj.
Eventa Tipo | Priskribo |
---|---|
montri.bs.tab | Ĉi tiu evento ekfunkciigas sur langeto, sed antaŭ ol la nova langeto estis montrita. Uzu event.target kaj event.relatedTarget por celi la aktivan langeton kaj la antaŭan aktivan langeton (se disponeblaj) respektive. |
montrata.bs.tab | Ĉi tiu evento ekfunkciigas sur langeto-spektaklo post kiam langeto estis montrita. Uzu event.target kaj event.relatedTarget por celi la aktivan langeton kaj la antaŭan aktivan langeton (se disponeblaj) respektive. |
kaŝi.bs.tab | Ĉi tiu evento pafas kiam nova langeto estas montrata (kaj tiel la antaŭa aktiva langeto estas kaŝota). Uzu event.target kaj event.relatedTarget por celi la nunan aktivan langeton kaj la novan baldaŭ aktivan langeton, respektive. |
kaŝita.bs.tab | Ĉi tiu evento ekfunkcias post kiam nova langeto estas montrita (kaj tiel la antaŭa aktiva langeto estas kaŝita). Uzu event.target kaj event.relatedTarget por celi la antaŭan aktivan langeton kaj la novan aktivan langeton, respektive. |
Inspirite de la bonega jQuery.tipsy kromaĵo verkita de Jason Frame; Konsiletoj estas ĝisdatigita versio, kiu ne dependas de bildoj, uzas CSS3 por kuraĝigoj kaj datumoj-atributoj por loka titolstokado.
Konsiletoj kun nullongaj titoloj neniam estas montrataj.
Ŝvebu super la subaj ligiloj por vidi konsiletojn:
Streĉaj pantalonoj sekva nivelo keffiyeh vi verŝajne ne aŭdis pri ili. Fotobudo barbo kruda denim tipografio vegana mesaĝisto sako stumptown. Farm-al-table seitan, mcsweeney's fixie daŭrigebla kvinoa 8-bita amerika vestaĵo havas terry richardson vinilĉambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, kvar loko mcsweeney's pure vegan chambray. Vere ironia metiisto whatever keytar , scenester farm-to-table banksy Austin twitter tenilo freegan cred kruda denim unu-devena kafo viral.
Kvar opcioj estas disponeblaj: supro, dekstre, malsupre kaj maldekstre vicigitaj.
Pro agado-kialoj, la Tooltip kaj Popover-datum-apis estas elekteblaj, tio signifas, ke vi devas pravigi ilin mem .
Unu maniero pravalorigi ĉiujn konsiletojn sur paĝo estus elekti ilin laŭ ilia data-toggle
atributo:
La kromkonsileto generas enhavon kaj markadon laŭpeto, kaj defaŭlte metas konsiletojn post ilia ellasilelemento.
Ekfunkciigu la konsileton per JavaScript:
La bezonata markado por konsileto estas nur data
atributo kaj title
sur la HTML-elemento vi deziras havi konsileton. La generita markado de konsileto estas sufiĉe simpla, kvankam ĝi postulas pozicion (defaŭlte, agordita top
de la kromaĵo).
Kelkfoje vi volas aldoni konsileton al hiperligo, kiu envolvas plurajn liniojn. La defaŭlta konduto de la konsileto kromaĵo estas centri ĝin horizontale kaj vertikale. Aldonu white-space: nowrap;
al viaj ankroj por eviti ĉi tion.
Kiam vi uzas konsiletojn pri elementoj ene de a .btn-group
aŭ an .input-group
, aŭ pri tabel-rilataj elementoj ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), vi devos specifi la opcion container: 'body'
(dokumentitan sube) por eviti nedeziratajn kromefikojn (kiel la elemento plilarĝiĝanta kaj/ aŭ perdante ĝiajn rondetajn angulojn kiam la konsileto estas ekigita).
Por uzantoj navigantaj per klavaro, kaj precipe uzantoj de helpaj teknologioj, vi devus nur aldoni konsiletojn al klavar-fokuseblaj elementoj kiel ekzemple ligiloj, formularaj kontroloj aŭ ajna arbitra elemento kun tabindex="0"
atributo.
Por aldoni konsileton al a disabled
aŭ .disabled
elemento, metu la elementon enen de a <div>
kaj apliku la konsileton al tio <div>
anstataŭe.
Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-
, kiel en data-animation=""
.
Nomo | Tajpu | Defaŭlte | Priskribo |
---|---|---|---|
animacio | bulea | vera | Apliku CSS-fade-transiron al la konsileto |
ujo | ŝnuro | malvera | malvera | Aldonas la konsileton al specifa elemento. Ekzemplo: |
prokrasto | nombro | objekto | 0 | Prokrasto montri kaj kaŝi la konsileton (ms) - ne validas por mana ellasiltipo Se nombro estas provizita, prokrasto estas aplikata al ambaŭ kaŝi/montri Objekta strukturo estas: |
html | bulea | malvera | Enigu HTML en la konsileto. Se malvera, la text metodo de jQuery estos uzata por enmeti enhavon en la DOM. Uzu tekston se vi zorgas pri XSS-atakoj. |
lokigo | ŝnuro | funkcio | 'supro' | Kiel poziciigi la konsileton - supro | fundo | maldekstra | ĝuste | aŭtomate. Kiam funkcio estas uzata por determini la lokigon, ĝi estas vokita kun la konsileto DOM-nodo kiel sia unua argumento kaj la ekiga elemento DOM-nodo kiel sia dua. La |
elektilo | ŝnuro | malvera | Se elektilo estas disponigita, konsiletaj objektoj estos delegitaj al la specifitaj celoj. En praktiko, ĉi tio estas uzata por ebligi dinamikan HTML-enhavon por aldoni konsiletojn. Vidu ĉi tion kaj informan ekzemplon . |
ŝablono | ŝnuro | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Baza HTML por uzi dum kreado de la konsileto. La konsileto
La plej ekstera envolvaĵelemento devus havi la |
titolo | ŝnuro | funkcio | '' | Defaŭlta titolvaloro se Se funkcio estas donita, ĝi estos vokita kun ĝia |
ellasilon | ŝnuro | 'ŝveba fokuso' | Kiel la konsileto estas ekigita - alklaku | ŝvebi | fokuso | manlibro. Vi povas pasi plurajn ellasilon; apartigu ilin per spaco. manual ne povas esti kombinita kun iu ajn alia ellasilo. |
vidujo | ŝnuro | objekto | funkcio | { elektilo: 'korpo', kompletigo: 0} | Tenas la konsileton ene de la limoj de ĉi tiu elemento. Ekzemplo: Se funkcio estas donita, ĝi estas vokita kun la ekiga elemento DOM-nodo kiel ĝia nura argumento. La |
Opcioj por individuaj konsiletoj povas alternative esti specifitaj per la uzo de datumaj atributoj, kiel klarigite supre.
$().tooltip(options)
Alligas konsileton pritraktilon al elementkolekto.
.tooltip('show')
Rivelas la konsileton de elemento. Revenas al la alvokanto antaŭ ol la konsileto efektive estis montrita (te antaŭ ol la shown.bs.tooltip
evento okazas). Ĉi tio estas konsiderata "mana" ekigado de la konsileto. Konsiletoj kun nullongaj titoloj neniam estas montrataj.
.tooltip('hide')
Kaŝas la konsileton de elemento. Revenas al la alvokanto antaŭ ol la konsileto efektive estis kaŝita (te antaŭ ol la hidden.bs.tooltip
evento okazas). Ĉi tio estas konsiderata "mana" ekigado de la konsileto.
.tooltip('toggle')
Ŝaltas la konsileton de elemento. Revenas al la alvokanto antaŭ ol la konsileto efektive estis montrita aŭ kaŝita (t.e. antaŭ ol la shown.bs.tooltip
evento hidden.bs.tooltip
okazas). Ĉi tio estas konsiderata "mana" ekigado de la konsileto.
.tooltip('destroy')
Kaŝas kaj detruas la konsileton de elemento. Konsiletoj kiuj uzas delegacion (kiuj estas kreitaj per la selector
opcio ) ne povas esti individue detruitaj sur posteulaj ellasilelementoj.
Eventa Tipo | Priskribo |
---|---|
montru.bs.instruilon | Ĉi tiu evento tuj ekfunkciigas kiam la show ekzempla metodo estas vokita. |
montrata.bs.ilotipo | Ĉi tiu evento estas lanĉita kiam la konsileto estas videbla por la uzanto (atendos ke CSS-transiroj finiĝos). |
kaŝi.bs.ilotip | Ĉi tiu evento estas lanĉita tuj kiam la hide ekzempla metodo estas vokita. |
kaŝita.bs.ilotip | Ĉi tiu evento estas lanĉita kiam la konsileto finiĝis kaŝita de la uzanto (atendos ke CSS-transiroj finiĝos). |
enigita.bs.ilotip | Ĉi tiu evento estas lanĉita post la show.bs.tooltip evento kiam la konsileto ŝablono estis aldonita al la DOM. |
Aldonu malgrandajn tegaĵojn de enhavo, kiel tiuj sur la iPad, al iu ajn elemento por loĝigi malĉefajn informojn.
Popovers kies kaj titolo kaj enhavo estas nullongaj neniam estas montrataj.
Popovers postulas ke la konsileto-kromaĵo estu inkluzivita en via versio de Bootstrap.
Pro agado-kialoj, la Tooltip kaj Popover-datum-apis estas elekteblaj, tio signifas, ke vi devas pravigi ilin mem .
Unu maniero pravalorigi ĉiujn popovers sur paĝo estus elekti ilin laŭ ilia data-toggle
atributo:
Kiam vi uzas popovers sur elementoj ene de a .btn-group
aŭ an .input-group
, aŭ sur tabel-rilataj elementoj ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), vi devos specifi la opcion container: 'body'
(dokumentita sube) por eviti nedeziratajn kromefikojn (kiel la elemento plilarĝiĝanta kaj/ aŭ perdante ĝiajn rondetajn angulojn kiam la popover estas ekigita).
Por aldoni popover al a disabled
aŭ .disabled
elemento, metu la elementon ene de a <div>
kaj apliku la popover al tio <div>
anstataŭe.
Kelkfoje vi volas aldoni popover al hiperligo, kiu envolvas plurajn liniojn. La defaŭlta konduto de la popover kromaĵo estas centri ĝin horizontale kaj vertikale. Aldonu white-space: nowrap;
al viaj ankroj por eviti ĉi tion.
Kvar opcioj estas disponeblaj: supro, dekstre, malsupre kaj maldekstre vicigitaj.
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.
Uzu la focus
ellasilon por malakcepti popovers ĉe la sekva klako kiun la uzanto faras.
Por taŭga trans-retumilo kaj transplatforma konduto, vi devas uzi la <a>
etikedon, ne la <button>
etikedon, kaj vi ankaŭ devas inkluzivi la role="button"
kaj tabindex
atributojn.
Ebligu popovers per JavaScript:
Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-
, kiel en data-animation=""
.
Nomo | Tajpu | Defaŭlte | Priskribo |
---|---|---|---|
animacio | bulea | vera | Apliki CSS-fade-transiron al la popover |
ujo | ŝnuro | malvera | malvera | Aldonas la popover al specifa elemento. Ekzemplo: |
enhavo | ŝnuro | funkcio | '' | Defaŭlta enhavvaloro se Se funkcio estas donita, ĝi estos vokita kun ĝia |
prokrasto | nombro | objekto | 0 | Prokrasto montri kaj kaŝi la popover (ms) - ne validas por mana ellasiltipo Se nombro estas provizita, prokrasto estas aplikata al ambaŭ kaŝi/montri Objekta strukturo estas: |
html | bulea | malvera | Enigu HTML en la popover. Se malvera, la text metodo de jQuery estos uzata por enmeti enhavon en la DOM. Uzu tekston se vi zorgas pri XSS-atakoj. |
lokigo | ŝnuro | funkcio | 'ĝuste' | Kiel poziciigi la popover - supro | fundo | maldekstra | ĝuste | aŭtomate. Kiam funkcio estas uzata por determini la lokigon, ĝi estas vokita kun la popover DOM-nodo kiel sia unua argumento kaj la ekiga elemento DOM-nodo kiel sia dua. La |
elektilo | ŝnuro | malvera | Se elektilo estas disponigita, popover-objektoj estos delegitaj al la specifitaj celoj. En praktiko, ĉi tio estas uzata por ebligi dinamikan HTML-enhavon por aldoni popovers. Vidu ĉi tion kaj informan ekzemplon . |
ŝablono | ŝnuro | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Baza HTML por uzi dum kreado de la popover. La popover-oj La popover-oj
La plej ekstera envolvaĵelemento devus havi la |
titolo | ŝnuro | funkcio | '' | Defaŭlta titolvaloro se Se funkcio estas donita, ĝi estos vokita kun ĝia |
ellasilon | ŝnuro | 'klako' | Kiel popover estas ekigita - klaku | ŝvebi | fokuso | manlibro. Vi povas pasi plurajn ellasilon; apartigu ilin per spaco. manual ne povas esti kombinita kun iu ajn alia ellasilo. |
vidujo | ŝnuro | objekto | funkcio | { elektilo: 'korpo', kompletigo: 0} | Tenas la popover ene de la limoj de ĉi tiu elemento. Ekzemplo: Se funkcio estas donita, ĝi estas vokita kun la ekiga elemento DOM-nodo kiel ĝia nura argumento. La |
Opcioj por individuaj popovers povas alternative esti precizigitaj per la uzo de datumaj atributoj, kiel klarigite supre.
$().popover(options)
Inicialigas popovers por elemento kolekto.
.popover('show')
Rivelas la popover de elemento. Revenas al la alvokanto antaŭ ol la popover efektive montriĝis (te antaŭ ol la shown.bs.popover
evento okazas). Tio estas konsiderita "manlibro" ekigado de la popover. Popovers kies kaj titolo kaj enhavo estas nullongaj neniam estas montrataj.
.popover('hide')
Kaŝas la popover de elemento. Revenas al la alvokanto antaŭ ol la popover efektive estis kaŝita (te antaŭ ol la hidden.bs.popover
evento okazas). Tio estas konsiderita "manlibro" ekigado de la popover.
.popover('toggle')
Ŝaltas la popover de elemento. Revenas al la alvokanto antaŭ ol la popover efektive estis montrita aŭ kaŝita (t.e. antaŭ ol la shown.bs.popover
evento hidden.bs.popover
okazas). Tio estas konsiderita "manlibro" ekigado de la popover.
.popover('destroy')
Kaŝas kaj detruas la popover de elemento. Popovers kiuj uzas delegacion (kiuj estas kreitaj uzante la selector
opcion ) ne povas esti individue detruitaj sur posteulaj ellasilelementoj.
Eventa Tipo | Priskribo |
---|---|
show.bs.popover | Ĉi tiu evento tuj ekfunkciigas kiam la show ekzempla metodo estas vokita. |
montrata.bs.popover | Ĉi tiu evento estas lanĉita kiam la popover fariĝis videbla por la uzanto (atendos ke CSS-transiroj finiĝos). |
kaŝi.bs.popover | Ĉi tiu evento estas lanĉita tuj kiam la hide ekzempla metodo estas vokita. |
kaŝita.bs.popover | Ĉi tiu evento estas lanĉita kiam la popover finiĝis kaŝita de la uzanto (atendos ke CSS-transiroj finiĝos). |
enigita.bs.popover | Ĉi tiu evento estas lanĉita post la show.bs.popover evento kiam la popover ŝablono estis aldonita al la DOM. |
Aldonu malakceptan funkcion al ĉiuj alarmaj mesaĝoj per ĉi tiu kromaĵo.
Kiam oni uzas .close
butonon, ĝi devas esti la unua filo de la .alert-dismissible
kaj neniu tekstenhavo povas esti antaŭ ĝi en la markado.
Ŝanĝu ĉi tion kaj tion kaj provu denove. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Nur aldonu data-dismiss="alert"
al via fermbutono por aŭtomate doni atentan proksiman funkcion. Fermi alarmon forigas ĝin de la DOM.
Por ke viaj atentigoj uzu animacion dum la fermo, certigu, ke ili havas la klasojn .fade
kaj jam aplikatajn al ili..in
$().alert()
Atentigas aŭskulti klakajn eventojn pri devenaj elementoj, kiuj havas la data-dismiss="alert"
atributon. (Ne necesas kiam vi uzas la aŭtomatan inicialigon de la datum-api.)
$().alert('close')
Fermas alarmon forigante ĝin de la DOM. Se la .fade
kaj .in
klasoj ĉeestas sur la elemento, la atentigo forvelkos antaŭ ol ĝi estas forigita.
La atentiga kromaĵo de Bootstrap elmontras kelkajn eventojn por aliĝi al atentiga funkcio.
Eventa Tipo | Priskribo |
---|---|
fermu.bs.alerton | Ĉi tiu evento tuj ekfunkciigas kiam la close ekzempla metodo estas vokita. |
fermita.bs.alerto | Ĉi tiu evento estas lanĉita kiam la atentigo estas fermita (atendos ke CSS-transiroj finiĝos). |
Faru pli per butonoj. Kontrolu butonajn ŝtatojn aŭ kreu grupojn de butonoj por pli da komponantoj kiel ilobretoj.
Fajrovulpo daŭras formkontrolajn statojn (malfunkcieco kaj kontrolado) tra paĝŝarĝoj . Solvo por ĉi tio estas uzi autocomplete="off"
. Vidu Mozilo-cimon #654072 .
Aldonu data-loading-text="Loading..."
por uzi ŝarĝan staton sur butono.
Ĉi tiu funkcio estas malrekomendita ekde v3.3.5 kaj estis forigita en v4.
Por ĉi tiu pruvo, ni uzas data-loading-text
kaj $().button('loading')
, sed tio ne estas la sola stato, kiun vi povas uzi. Vidu pli pri tio ĉi malsupre en la $().button(string)
dokumentado .
Aldonu data-toggle="button"
por aktivigi baskulon sur ununura butono.
.active
kajaria-pressed="true"
Por antaŭŝanĝitaj butonoj, vi devas aldoni la .active
klason kaj la aria-pressed="true"
atributon al la button
mem.
Aldonu data-toggle="buttons"
al .btn-group
enhava markobutono aŭ radio-enigaĵojn por ebligi ŝanĝi en iliaj respektivaj stiloj.
.active
Por antaŭelektitaj opcioj, vi mem devas aldoni la .active
klason al la enigo label
.
Se la markita stato de markobutono butono estas ĝisdatigita sen lanĉi click
eventon sur la butono (ekz. per <input type="reset">
aŭ per agordo de la checked
posedaĵo de la enigo), vi devos mem ŝalti la .active
klason sur la enigo label
.
$().button('toggle')
Ŝaltigas puŝan staton. Donas al la butono la aspekton, ke ĝi estas aktivigita.
$().button('reset')
Restarigas butonan staton - interŝanĝas tekston al originala teksto. Ĉi tiu metodo estas nesinkrona kaj revenas antaŭ ol la restarigo efektive finiĝis.
$().button(string)
Interŝanĝas tekston al iu ajn datuma difinita teksto-stato.
Fleksebla kromaĵo, kiu uzas manplenon da klasoj por facila ŝanĝa konduto.
Kolapso postulas, ke la transiraj kromaĵo estu inkluzivita en via versio de Bootstrap.
Alklaku la subajn butonojn por montri kaj kaŝi alian elementon per klasŝanĝoj:
.collapse
kaŝas enhavon.collapsing
estas aplikata dum transiroj.collapse.in
montras enhavonVi povas uzi ligilon kun la href
atributo, aŭ butonon kun la data-target
atributo. En ambaŭ kazoj, la data-toggle="collapse"
estas postulata.
Etendi la defaŭltan kolapsan konduton por krei akordionon kun la panela komponanto.
Eblas ankaŭ interŝanĝi .panel-body
s kun .list-group
s.
Nepre aldonu aria-expanded
al la kontrolelemento. Ĉi tiu atributo eksplicite difinas la nunan staton de la faldebla elemento al ekranlegantoj kaj similaj helpaj teknologioj. Se la faldebla elemento estas fermita defaŭlte, ĝi devus havi valoron de aria-expanded="false"
. Se vi agordis la faldeblan elementon por esti malfermita defaŭlte uzante la in
klason, agorduaria-expanded="true"
anstataŭe agordu la kontrolon. La kromaĵo aŭtomate ŝanĝos ĉi tiun atributon laŭ ĉu la faldebla elemento estis malfermita aŭ fermita aŭ ne.
Aldone, se via kontrolelemento celas ununuran faldeblan elementon – te la data-target
atributo indikas id
elektilon – vi povas aldoni plian aria-controls
atributon al la kontrolelemento, enhavanta la id
de la faldebla elemento. Modernaj ekranlegiloj kaj similaj helpaj teknologioj uzas ĉi tiun atributon por provizi uzantojn per kromaj ŝparvojoj por navigi rekte al la faldebla elemento mem.
La kolapsa kromaĵo uzas kelkajn klasojn por trakti la pezan ŝarĝon:
.collapse
kaŝas la enhavon.collapse.in
montras la enhavon.collapsing
estas aldonita kiam la transiro komenciĝas, kaj forigita kiam ĝi finiĝasĈi tiuj klasoj troviĝas en component-animations.less
.
Nur aldonu data-toggle="collapse"
kaj a data-target
al la elemento por aŭtomate asigni kontrolon de faldebla elemento. La data-target
atributo akceptas CSS-elektilon al kiu apliki la kolapson. Nepre aldonu la klason collapse
al la faldebla elemento. Se vi ŝatus, ke ĝi defaŭlte malfermu, aldonu la aldonan klasonin
.
Por aldoni akordion-similan grupadministradon al faldebla kontrolo, aldonu la datuman atributon data-parent="#selector"
. Riferu al la demo por vidi ĉi tion en ago.
Ebligu permane per:
Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-
, kiel en data-parent=""
.
Nomo | tajpu | defaŭlte | Priskribo |
---|---|---|---|
gepatro | elektilo | malvera | Se elektilo estas provizita, tiam ĉiuj faldeblaj elementoj sub la specifita gepatro estos fermitaj kiam ĉi tiu faldebla ero montriĝas. (simila al tradicia akordiona konduto - tio dependas de la panel klaso) |
baskuli | bulea | vera | Ŝaltas la faldeblan elementon ĉe alvoko |
.collapse(options)
Aktivigas vian enhavon kiel faldebla elemento. Akceptas laŭvolajn opciojn object
.
.collapse('toggle')
Ŝaltas faldebla elemento al montrita aŭ kaŝita. Revenas al la alvokanto antaŭ ol la faldebla elemento efektive estis montrita aŭ kaŝita (t.e. antaŭ ol okazas la shown.bs.collapse
aŭ hidden.bs.collapse
evento).
.collapse('show')
Montras faldeblan elementon. Revenas al la alvokanto antaŭ ol la faldebla elemento efektive montriĝis (te antaŭ ol la shown.bs.collapse
evento okazas).
.collapse('hide')
Kaŝas faldeblan elementon. Revenas al la alvokanto antaŭ ol la faldebla elemento efektive estis kaŝita (te antaŭ lahidden.bs.collapse
evento okazas).
La kolapsoklaso de Bootstrap elmontras kelkajn eventojn por hoki en kolapfunkciecon.
Eventa Tipo | Priskribo |
---|---|
montri.bs.kolapso | Ĉi tiu evento tuj ekfunkciigas kiam la show ekzempla metodo estas vokita. |
montrita.bs.kolapso | Ĉi tiu okazaĵo estas pafita kiam kolapelemento fariĝis videbla por la uzanto (atendos ke CSS-transiroj finiĝos). |
kaŝi.bs.kolapso | Ĉi tiu evento estas lanĉita tuj kiam la hide metodo estas vokita. |
kaŝita.bs.kolapso | Ĉi tiu okazaĵo estas pafita kiam kolapelemento estis kaŝita de la uzanto (atendos ke CSS-transiroj finiĝos). |
Bildprezenta komponanto por bicikli tra elementoj, kiel karuselo. Nestitaj karuseloj ne estas subtenataj.
La karuselkomponento ĝenerale ne konformas al alireblaj normoj. Se vi devas esti konforma, bonvolu konsideri aliajn eblojn por prezenti vian enhavon.
Bootstrap ekskluzive uzas CSS3 por siaj animacioj, sed Internet Explorer 8 & 9 ne subtenas la necesajn CSS-ecojn. Tiel, ekzistas neniuj glittransiranimacioj kiam vi uzas ĉi tiujn retumiloj. Ni intence decidis ne inkluzivi jQuery-bazitajn rezervojn por la transiroj.
La .active
klaso devas esti aldonita al unu el la lumbildoj. Alie, la karuselo ne estos videbla.
La .glyphicon .glyphicon-chevron-left
kaj .glyphicon .glyphicon-chevron-right
klasoj ne nepre necesas por la kontroloj. Bootstrap provizas .icon-prev
kaj .icon-next
kiel simplajn unikodaj alternativoj.
Aldonu subtitolojn al viaj diapozitivoj facile per la .carousel-caption
elemento en iu ajn .item
. Metu preskaŭ ajnan laŭvolan HTML tie kaj ĝi estos aŭtomate vicigita kaj formatita.
Karuseloj postulas la uzon de id
sur la plej ekstera ujo (la .carousel
) por ke karuselaj kontroloj funkciu ĝuste. Aldonante plurajn karuselojn aŭ ŝanĝante karuselojn id
, nepre ĝisdatigu la koncernajn kontrolojn.
Uzu datumajn atributojn por facile kontroli la pozicion de la karuselo. data-slide
akceptas la ŝlosilvortojn prev
aŭ next
, kiu ŝanĝas la glitpozicion rilate al ĝia nuna pozicio. Alternative, uzu data-slide-to
por transdoni krudan glitan indekson al la karuselo data-slide-to="2"
, kiu movas la glitpozicion al aparta indekso komencanta per 0
.
La data-ride="carousel"
atributo estas uzata por marki karuselon kiel vigliganta ekde la paĝa ŝarĝo. Ĝi ne povas esti uzata en kombinaĵo kun (redunda kaj nenecesa) eksplicita JavaScript-komencigo de la sama karuselo.
Voku karuselon permane kun:
Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-
, kiel en data-interval=""
.
Nomo | tajpu | defaŭlte | Priskribo |
---|---|---|---|
intervalo | nombro | 5000 | La kvanto da tempo por prokrasti inter aŭtomate biciklado de objekto. Se estas malvera, karuselo ne aŭtomate biciklos. |
paŭzo | ŝnuro | nulo | "ŝvebi" | Se agordita al "hover" , paŭzas la bicikladon de la karuselo mouseenter kaj rekomencas la bicikladon de la karuselo mouseleave . Se agordita al null , ŝvebi super la karuselo ne paŭzos ĝin. |
envolvi | bulea | vera | Ĉu la karuselo devas bicikli kontinue aŭ havi malfacilajn haltojn. |
klavaro | bulea | vera | Ĉu la karuselo devus reagi al klavaraj eventoj. |
.carousel(options)
Komencas la karuselon kun laŭvolaj opcioj object
kaj komencas bicikli tra eroj.
.carousel('cycle')
Biciklas tra la karuselaj eroj de maldekstre dekstren.
.carousel('pause')
Maldaŭrigas la karuselon de bicikli tra eroj.
.carousel(number)
Biciklas la karuselon al aparta kadro (bazita 0, simila al tabelo).
.carousel('prev')
Ciklas al la antaŭa ero.
.carousel('next')
Bicikloj al la sekva ero.
La karuselklaso de Bootstrap elmontras du okazaĵojn por hoki en karuselfunkciecon.
Ambaŭ okazaĵoj havas la sekvajn kromajn trajtojn:
direction
: La direkto en kiu la karuselo glitas (aŭ "left"
aŭ "right"
).relatedTarget
: La DOM-elemento kiu estas glita en lokon kiel la aktiva objekto.Ĉiuj karuselaj eventoj estas pafitaj ĉe la karuselo mem (te ĉe la <div class="carousel">
).
Eventa Tipo | Priskribo |
---|---|
gliti.bs.karuselo | Ĉi tiu okazaĵo tuj ekfunkciigas kiam la slide ekzempla metodo estas alvokita. |
gliti.bs.karuselo | Ĉi tiu evento estas pafita kiam la karuselo kompletigis sian glitan transiron. |
La afiksa kromaĵo ŝaltas position: fixed;
kaj malŝaltas, imitante la efikon trovitan per position: sticky;
. La subnavigado dekstre estas reala demo de la afiksa kromaĵo.
Uzu la afiksan kromaĵon per datumaj atributoj aŭ permane per via propra JavaScript.En ambaŭ situacioj, vi devas provizi CSS por la pozicio kaj larĝo de via fiksita enhavo.
Noto: Ne uzu la afiksan kromprogramon sur elemento enhavita en relative poziciigita elemento, kiel tirita aŭ puŝita kolumno, pro Safara bildigo .
La afiksa kromaĵo ŝanĝas inter tri klasoj, ĉiu reprezentante apartan staton: .affix
, .affix-top
, kaj .affix-bottom
. Vi devas mem provizi la stilojn, kun la escepto de position: fixed;
on .affix
, por ĉi tiuj klasoj (sendepende de ĉi tiu kromaĵo) por pritrakti la realajn poziciojn.
Jen kiel funkcias la afiksa kromaĵo:
.affix-top
por indiki, ke la elemento estas en sia plej alta pozicio. Je ĉi tiu punkto neniu CSS-poziciigo estas bezonata..affix
anstataŭigas .affix-top
kaj aroj position: fixed;
(provizitaj de CSS de Bootstrap)..affix
per .affix-bottom
. Ĉar kompensoj estas laŭvolaj, agordi unu postulas, ke vi agordu la taŭgan CSS. En ĉi tiu kazo, aldonu position: absolute;
kiam necese. La kromaĵo uzas la datuman atributon aŭ JavaScript-opcion por determini kie poziciigi la elementon de tie.Sekvu la suprajn paŝojn por agordi vian CSS por iu el la malsupraj uzado-opcioj.
Por facile aldoni afiksan konduton al iu ajn elemento, simple aldonu data-spy="affix"
al la elemento, kiun vi volas spioni. Uzu ofsetojn por difini kiam ŝanĝi la alpinglon de elemento.
Voku la afiksan kromprogramon per JavaScript:
Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-
, kiel en data-offset-top="200"
.
Nomo | tajpu | defaŭlte | Priskribo |
---|---|---|---|
ofseto | nombro | funkcio | objekto | 10 | Pikseloj por kompensi de ekrano dum kalkulado de pozicio de rullibro. Se ununura nombro estas provizita, la ofseto estos aplikata en ambaŭ supraj kaj malsupraj direktoj. Por provizi unikan, malsupran kaj supran ofseton simple provizi objekton offset: { top: 10 } aŭ offset: { top: 10, bottom: 5 } . Uzu funkcion kiam vi bezonas dinamike kalkuli ofseton. |
celo | elektilo | nodo | jQuery-elemento | la window objekto |
Specifas la celelementon de la afikso. |
.affix(options)
Aktivigas vian enhavon kiel fiksita enhavo. Akceptas laŭvolajn opciojn object
.
.affix('checkPosition')
Rekalkulas la staton de la afikso surbaze de la dimensioj, pozicio kaj rulpozicio de la koncernaj elementoj. La .affix
, .affix-top
, kaj .affix-bottom
klasoj estas aldonitaj aŭ forigitaj de la alfiksita enhavo laŭ la nova stato. Ĉi tiu metodo devas esti nomita kiam ajn la dimensioj de la fiksita enhavo aŭ la cela elemento estas ŝanĝitaj, por certigi ĝustan poziciigon de la fiksita enhavo.
La afiksa kromaĵo de Bootstrap elmontras kelkajn eventojn por enganki al afiksa funkcio.
Eventa Tipo | Priskribo |
---|---|
afikso.bs.afikso | Ĉi tiu evento ekfunkcias tuj antaŭ ol la elemento estis fiksita. |
alfiksita.bs.afikso | Ĉi tiu evento estas lanĉita post kiam la elemento estis fiksita. |
afikso-supro.bs.afikso | Ĉi tiu evento ekfunkcias tuj antaŭ ol la elemento estis fiksita supre. |
fiksita-supro.bs.afikso | Ĉi tiu evento estas lanĉita post kiam la elemento estis fiksita supre. |
afikso-fundo.bs.afikso | Ĉi tiu evento ekfunkciigas tuj antaŭ ol la elemento estis alfiksita-malsupre. |
alfiksita-fundo.bs.afikso | Ĉi tiu evento estas lanĉita post kiam la elemento estis alfiksita malsupre. |