JavaScript
Lífgaðu íhlutum Bootstrap til lífsins með yfir tugi sérsniðinna jQuery viðbóta. Láttu þá alla auðveldlega fylgja með, eða einn í einu.
Lífgaðu íhlutum Bootstrap til lífsins með yfir tugi sérsniðinna jQuery viðbóta. Láttu þá alla auðveldlega fylgja með, eða einn í einu.
Viðbætur geta verið innifalin fyrir sig (með því að nota einstakar *.js
skrár Bootstrap), eða allar í einu (með því að nota bootstrap.js
eða minnkað bootstrap.min.js
).
Bæði bootstrap.js
og bootstrap.min.js
innihalda öll viðbætur í einni skrá. Láttu aðeins einn fylgja með.
Sum viðbætur og CSS íhlutir eru háðir öðrum viðbótum. Ef þú lætur viðbætur fylgja með sér, vertu viss um að athuga hvort þessar ósjálfstæði séu í skjölunum. Athugaðu líka að öll viðbætur eru háðar jQuery (þetta þýðir að jQuery verður að vera með á undan viðbótaskránum). Hafðu samband við okkurbower.json
til að sjá hvaða útgáfur af jQuery eru studdar.
Þú getur notað allar Bootstrap viðbætur eingöngu í gegnum markup API án þess að skrifa eina línu af JavaScript. Þetta er fyrsta flokks API frá Bootstrap og ætti að vera fyrsta íhugun þín þegar þú notar viðbót.
Sem sagt, í sumum tilfellum getur verið æskilegt að slökkva á þessari virkni. Þess vegna bjóðum við einnig upp á möguleikann á að slökkva á gagnaeigininni API með því að afbinda alla atburði á skjalinu með nafnabili data-api
. Þetta lítur svona út:
Að öðrum kosti, til að miða á ákveðna viðbót, skaltu bara láta nafn viðbótarinnar fylgja með sem nafnrými ásamt data-api nafnrýminu eins og þetta:
Ekki nota gagnaeiginleika frá mörgum viðbótum á sama þáttinn. Til dæmis getur hnappur ekki bæði haft verkfæraleiðbeiningar og skipt um form. Til að ná þessu skaltu nota umbúðir.
Við teljum líka að þú ættir að geta notað öll Bootstrap viðbætur eingöngu í gegnum JavaScript API. Öll opinber API eru stakar, keðjanlegar aðferðir og skila söfnuninni sem brugðist hefur verið við.
Allar aðferðir ættu að samþykkja valfrjálsan valmöguleikahlut, streng sem miðar á tiltekna aðferð eða ekkert (sem kemur af stað viðbót með sjálfgefna hegðun):
Hver tappi afhjúpar einnig hráan smið á Constructor
eign: $.fn.popover.Constructor
. Ef þú vilt fá tiltekið viðbótatilvik skaltu sækja það beint úr frumefni: $('[rel="popover"]').data('popover')
.
Þú getur breytt sjálfgefnum stillingum fyrir viðbót með því að breyta Constructor.DEFAULTS
hlut viðbótarinnar:
Stundum er nauðsynlegt að nota Bootstrap viðbætur með öðrum UI ramma. Við þessar aðstæður geta árekstrar í nafnrými átt sér stað einstaka sinnum. Ef þetta gerist geturðu hringt .noConflict
í viðbótina sem þú vilt breyta gildinu á.
Bootstrap býður upp á sérsniðna atburði fyrir einstaka aðgerðir flestra viðbætur. Yfirleitt koma þær í óendanlegu formi og þátíð - þar sem óendanlegur (til dæmis show
) er ræstur í upphafi atburðar, og þátíðarform hans (til dæmis shown
) er ræst þegar aðgerð er lokið.
Frá og með 3.0.0 eru allir Bootstrap viðburðir með nafnabili.
Allir óendanlegir atburðir veita preventDefault
virkni. Þetta veitir möguleika á að stöðva framkvæmd aðgerða áður en hún hefst.
Hægt er að nálgast útgáfuna af hverri jQuery viðbót Bootstrap í gegnum VERSION
eign byggingaraðila viðbótarinnar. Til dæmis, fyrir tooltip viðbótina:
Viðbætur Bootstrap falla ekki sérstaklega tignarlega til baka þegar JavaScript er óvirkt. Ef þér er annt um notendaupplifunina í þessu tilviki, notaðu <noscript>
þá til að útskýra aðstæður (og hvernig á að virkja JavaScript aftur) fyrir notendum þínum og/eða bæta við eigin sérsniðnum fallbacks.
Bootstrap styður ekki opinberlega þriðja aðila JavaScript bókasöfn eins og Prototype eða jQuery UI. Þrátt fyrir .noConflict
atburði með nafnabili geta komið upp samhæfnisvandamál sem þú þarft að laga á eigin spýtur.
Til að fá einföld umbreytingaráhrif skaltu setja transition.js
einu sinni ásamt öðrum JS skrám. Ef þú ert að nota samsetta (eða minnkaða) bootstrap.js
, þá er engin þörf á að hafa þetta með – það er þegar til staðar.
Transition.js er grunnhjálp fyrir transitionEnd
viðburði sem og CSS umbreytingarhermi. Það er notað af öðrum viðbótum til að athuga hvort stuðningur við CSS umskipti sé og til að ná hangandi umbreytingum.
Hægt er að slökkva á umbreytingum á heimsvísu með því að nota eftirfarandi JavaScript bút, sem verður að koma eftir að transition.js
(eða bootstrap.js
eða bootstrap.min.js
, eftir atvikum) hefur verið hlaðið:
Modals eru straumlínulagaðar, en sveigjanlegar, svarglugga með lágmarks virkni og snjöllum sjálfgefnum stillingum.
Vertu viss um að opna ekki form á meðan annað er enn sýnilegt. Til að sýna fleiri en eina aðferð í einu þarf sérsniðinn kóða.
Reyndu alltaf að setja HTML kóða mótals á efstu stigi í skjalinu þínu til að koma í veg fyrir að aðrir þættir hafi áhrif á útlit og/eða virkni formsins.
Það eru nokkrir fyrirvarar varðandi notkun forms í farsímum. Skoðaðu stuðningsskjöl vafrans okkar fyrir frekari upplýsingar.
Vegna þess hvernig HTML5 skilgreinir merkingarfræði sína, hefur autofocus
HTML eigindin engin áhrif í Bootstrap aðferðum. Til að ná sömu áhrifum skaltu nota sérsniðið JavaScript:
Útgjört form með haus, meginmáli og aðgerðasetti í síðufæti.
Skiptu um form í gegnum JavaScript með því að smella á hnappinn hér að neðan. Það mun renna niður og hverfa inn efst á síðunni.
Vertu viss um að bæta við role="dialog"
og aria-labelledby="..."
, með vísan í titil formsins, til .modal
, og role="document"
til .modal-dialog
sjálfs.
Að auki geturðu gefið lýsingu á valmyndinni þinni með aria-describedby
á .modal
.
Að fella inn YouTube myndbönd í modals krefst viðbótar JavaScript sem er ekki í Bootstrap til að stöðva spilun sjálfkrafa og fleira. Sjá þessa gagnlegu Stack Overflow færslu fyrir frekari upplýsingar.
Modals hafa tvær valfrjálsar stærðir, fáanlegar í gegnum breytingaflokka til að setja á .modal-dialog
.
Fyrir snið sem einfaldlega birtast frekar en að hverfa inn til að skoða, fjarlægðu .fade
flokkinn úr aðferðamerkingunni þinni.
Til að nýta Bootstrap grid kerfið innan forms, hreiðurðu bara .row
s innan .modal-body
og notaðu síðan venjulega grid kerfisflokkana.
Ertu með fullt af hnöppum sem kveikja allir á sama forminu, bara með aðeins mismunandi innihaldi? Notaðu event.relatedTarget
og HTML data-*
eiginleika (hugsanlega í gegnum jQuery ) til að breyta innihaldi formsins eftir því hvaða hnapp var smellt á. Sjá Modal Events skjölin fyrir upplýsingar um relatedTarget
,
Modal viðbótin skiptir um falið efni eftir beiðni, með gagnaeiginleikum eða JavaScript. Það bætir einnig við .modal-open
að <body>
hnekkja sjálfgefnum skrunhegðun og býr .modal-backdrop
til smellisvæði til að hafna sýndum aðferðum þegar smellt er utan aðferðarinnar.
Virkjaðu form án þess að skrifa JavaScript. Stillt data-toggle="modal"
á stjórnunareiningu, eins og hnapp, ásamt a data-target="#foo"
eða href="#foo"
til að miða á ákveðna aðferð til að skipta.
Hringdu í modal með auðkenni myModal
með einni línu af JavaScript:
Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-
, eins og í data-backdrop=""
.
Nafn | tegund | sjálfgefið | lýsingu |
---|---|---|---|
bakgrunn | Boolean eða strengurinn'static' |
satt | Inniheldur modal-bakgrunnsþátt. Að öðrum kosti, tilgreindu static fyrir bakgrunn sem lokar ekki forminu þegar smellt er. |
lyklaborð | Boolean | satt | Lokar forminu þegar ýtt er á escape takkann |
sýna | Boolean | satt | Sýnir aðferðina þegar hann er frumstilltur. |
fjarlægur | leið | rangt | Þessi valkostur er úreltur frá v3.3.0 og hefur verið fjarlægður í v4. Við mælum með því að nota í staðinn sniðmát fyrir viðskiptavini eða gagnabindingaramma, eða að hringja í jQuery.load sjálfur. Ef ytri vefslóð er gefin upp verður efni hlaðið einu sinni með |
.modal(options)
Virkjar efnið þitt sem form. Samþykkir valfrjálsa valkosti object
.
.modal('toggle')
Skiptir handvirkt um form. Snýr aftur til þess sem hringir áður en aðferðin hefur verið sýnd eða falin (þ.e. áður en atburðurinn shown.bs.modal
eða hidden.bs.modal
á sér stað).
.modal('show')
Opnar form handvirkt. Snýr aftur til þess sem hringir áður en aðferðin hefur verið sýnd (þ.e. áður en shown.bs.modal
atburðurinn á sér stað).
.modal('hide')
Felur form handvirkt. Snýr aftur til þess sem hringir áður en aðferðin hefur verið falin (þ.e. áður en hidden.bs.modal
atburðurinn á sér stað).
.modal('handleUpdate')
Endurstillir staðsetningu módelsins til að vinna gegn skrunstiku ef einhver ætti að birtast, sem myndi láta aðferðina hoppa til vinstri.
Aðeins þörf þegar hæð mótsins breytist á meðan hún er opin.
Modal flokkur Bootstrap afhjúpar nokkra atburði til að tengja við formlega virkni.
Öllum mótaviðburðum er skotið á mótalann sjálfan (þ.e. á <div class="modal">
).
Tegund atburðar | Lýsing |
---|---|
show.bs.modal | Þessi atburður ræsir strax þegar show tilviksaðferðin er kölluð. Ef smellt er af völdum er smellt þáttur tiltækur sem relatedTarget eign atburðarins. |
sýnd.bs.módel | Þessi atburður er ræstur þegar modal hefur verið gert sýnilegt notandanum (bíður eftir að CSS umbreytingum ljúki). Ef smellt er af völdum er smellt þáttur tiltækur sem relatedTarget eign atburðarins. |
hide.bs.modal | Þessi atburður er ræstur strax þegar hide tilviksaðferðin hefur verið kölluð. |
hidden.bs.modal | Þessi atburður er ræstur þegar aðferðin hefur lokið við að vera falin fyrir notandanum (mun bíða eftir að CSS umbreytingum ljúki). |
loaded.bs.modal | Þessi atburður er ræstur þegar modal hefur hlaðið efni með því að nota remote valkostinn. |
Bættu fellivalmyndum við næstum hvað sem er með þessari einföldu viðbót, þar á meðal navbar, flipa og pillur.
Með gagnaeiginleikum eða JavaScript breytir fellivalmyndinni falið efni (fellivalmyndir) með því að skipta um .open
bekk á yfirliðinu á listanum.
Í farsímum bætir það við að opna fellivalmynd .dropdown-backdrop
sem tappasvæði til að loka fellivalmyndum þegar bankað er utan valmyndarinnar, sem er krafa um réttan iOS stuðning. Þetta þýðir að til að skipta úr opinni fellivalmynd yfir í aðra fellivalmynd þarf aukasmellingu á farsíma.
Athugið: data-toggle="dropdown"
Stuðst er við eiginleikann til að loka fellivalmyndum á forritastigi, svo það er góð hugmynd að nota hann alltaf.
Bættu data-toggle="dropdown"
við tengil eða hnapp til að skipta um fellilista.
Til að halda vefslóðum óskertum með tenglahnöppum skaltu nota data-target
eigindina í stað href="#"
.
Hringdu í fellilistana í gegnum JavaScript:
data-toggle="dropdown"
enn krafistÓháð því hvort þú hringir í fellilistann þinn í gegnum JavaScript eða notar þess í stað gagna-api, data-toggle="dropdown"
þarf alltaf að vera til staðar á kveikjuhluta fellilistans.
Enginn
$().dropdown('toggle')
Skiptir á fellivalmynd tiltekinnar siglingastiku eða flipaleiðsögu.
Allir fellilistann atburðir eru ræstir á .dropdown-menu
's parent element.
Allir atburðir í fellilistanum eru með relatedTarget
eiginleika þar sem gildi hans er kveikjankeri.
Tegund atburðar | Lýsing |
---|---|
sýna.bs.fellilista | Þessi atburður ræsir strax þegar sýningartilviksaðferðin er kölluð. |
sýnd.bs.fellilisti | Þessi atburður er ræstur þegar fellivalmyndin hefur verið gerð sýnileg notanda (mun bíða eftir CSS umskiptum til að ljúka). |
fela.bs.valmynd | Þessi atburður er ræstur strax þegar fela tilviksaðferðin hefur verið kölluð. |
falinn.bs.fellilisti | Þessi atburður er ræstur þegar fellivalmyndinni hefur verið falið fyrir notandanum (bíður eftir CSS umskiptum til að ljúka). |
ScrollSpy viðbótin er til að uppfæra siglingamarkmið sjálfkrafa á grundvelli skrunstöðu. Skrunaðu svæðið fyrir neðan siglingastikuna og horfðu á virka bekkinn breytast. Undirliðir í fellilistanum verða einnig auðkenndir.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi áður en þeir seldust upp qui. Tumblr reiðhjólaréttindi frá bænum til borðs hvað sem er. Anim keffiyeh carles peysa. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby peysa lomo gallabuxur, Williamsburg hettupeysa lágmark qui þú hefur líklega ekki heyrt um þær og cardigan trust fund culpa biodiesel wes anderson fagurfræðilegu. Nihil húðflúrað accusamus, cred kaldhæðni lífdísil keffiyeh handverksmaður ullamco consequat.
Veniam Marfa yfirvaraskeggs hjólabretti, fitandi fugiat velit hágaffelskegg. Freegan skegg aliqua cupidatat mcsweeney's vero. Cupidatat fjögur loko nisi, ea helvetica nulla carles. Tattooed cosby peysu matarbíll, Mcsweeney's quis non freegan vínyl. Lo-fi wes anderson +1 sartorial. Carles ekki fagurfræðileg æfing quis gentrify. Brooklyn fóðrandi föndurbjór vara keytar eyðimerkur.
Occaecat commodo aliqua delectus. Fap craft beer deserunt hjólabretti ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS er adipisicing. Consectetur nisi DIY minim senditaska. Cred fyrrverandi í, sjálfbær 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 blogg, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica klisja kaldhæðni, thundercats þú hefur líklega ekki heyrt um þá consequat hettupeysa glútenlaus lo-fi fap aliquip. Labor elit placeat áður en þeir seldust upp, Terry richardson proident brunch nesciunt quis cosby peysa pariatur keffiyeh ut helvetica artisan. Cardigan handverksbjór seitan tilbúinn velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Navbar tenglar verða að hafa leysanleg auðkennismarkmið. Til dæmis <a href="#home">home</a>
verður að samsvara einhverju í DOM eins og <div id="home"></div>
.
:visible
hunsuðMarkþættir sem eru ekki :visible
samkvæmt jQuery verða hunsaðir og samsvarandi nav atriði þeirra verða aldrei auðkennd.
Sama innleiðingaraðferðina, scrollspy krefst þess að þú notir position: relative;
þáttinn sem þú ert að njósna um. Í flestum tilfellum er þetta <body>
. Þegar þú flettir á aðra þætti en <body>
, vertu viss um að hafa height
sett og overflow-y: scroll;
notað.
Til að bæta scrollspy hegðun auðveldlega við toppstikuna þína skaltu bæta data-spy="scroll"
við þættinum sem þú vilt njósna um (oftast væri þetta <body>
). Bættu síðan við data-target
eigindinni með auðkenninu eða flokki móðurþáttar hvers Bootstrap .nav
íhluta.
Eftir að þú hefur bætt position: relative;
við CSS skaltu hringja í scrollspy í gegnum JavaScript:
.scrollspy('refresh')
Þegar þú notar scrollspy í tengslum við að bæta við eða fjarlægja þætti úr DOM þarftu að kalla á endurnýjunaraðferðina svona:
Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-
, eins og í data-offset=""
.
Nafn | tegund | sjálfgefið | lýsingu |
---|---|---|---|
á móti | númer | 10 | Dílar til að vega upp frá toppi þegar reiknað er út stöðu flettu. |
Tegund atburðar | Lýsing |
---|---|
active.bs.scrollspy | Þessi atburður ræsir í hvert sinn sem nýr hlutur verður virkjaður af scrollspy. |
Bættu við skjótum, kraftmiklum flipavirkni til að skipta í gegnum svæðisrúður, jafnvel með fellivalmyndum. Hreiður flipar eru ekki studdir.
Hrátt denim þú hefur líklega ekki heyrt um þær gallabuxur Austin. Nesciunt tofu stumptown aliqua, retro synth master hreinsun. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit Butcher Retro Keffiyeh draumafangari synth. Cosby peysa eu banh mi, qui irure Terry Richardson fyrrverandi smokkfiskur. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan amerískur fatnaður, slátrari 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.
Þessi viðbót eykur flipaleiðsöguhlutann til að bæta við flipasvæðum.
Virkjaðu flipa sem hægt er að nota með JavaScript (hvern flipa þarf að virkja fyrir sig):
Þú getur virkjað einstaka flipa á nokkra vegu:
Þú getur virkjað flipa eða pilluleiðsögn án þess að skrifa JavaScript með því einfaldlega að tilgreina data-toggle="tab"
eða data-toggle="pill"
á frumefni. Ef þú bætir flokkunum nav
og nav-tabs
við flipann ul
verður Bootstrap flipasniðið notað , en ef þú bætir nav
og nav-pills
flokkunum verður notað pillusnið .
Til að láta flipa hverfa inn skaltu bæta .fade
við hvern .tab-pane
. Fyrsta fliparúðan verður einnig .in
að gera upphafsefnið sýnilegt.
$().tab
Virkjar flipaþátt og innihaldsílát. Tab ætti að hafa annað hvort a data-target
eða href
miða á gámahnút í DOM. Í ofangreindum dæmum eru fliparnir <a>
s með data-toggle="tab"
eiginleikum.
.tab('show')
Velur tiltekinn flipa og sýnir tengt efni hans. Allir aðrir flipar sem áður voru valdir verða ekki valdir og tengt efni hans er falið. Fer aftur til þess sem hringir áður en flipaglugginn hefur verið sýndur (þ.e. áður en shown.bs.tab
atburðurinn á sér stað).
Þegar nýr flipi er sýndur kvikna atburðir í eftirfarandi röð:
hide.bs.tab
(á núverandi virka flipa)show.bs.tab
(á flipanum sem á að sýna)hidden.bs.tab
(á fyrri virka flipanum, sá sami og fyrir hide.bs.tab
viðburðinn)shown.bs.tab
(á flipanum sem nýlega var sýndur, sá sami og fyrir show.bs.tab
viðburðinn)Ef enginn flipi var þegar virkur, þá verða hide.bs.tab
og hidden.bs.tab
viðburðir ekki ræstir.
Tegund atburðar | Lýsing |
---|---|
sýna.bs.flipa | Þessi atburður ræsir á flipasýningu, en áður en nýi flipi hefur verið sýndur. Notaðu event.target og event.relatedTarget til að miða á virka flipann og fyrri virka flipann (ef tiltækur) í sömu röð. |
sýndur.bs.flipi | Þessi atburður ræsir á flipasýningu eftir að flipi hefur verið sýndur. Notaðu event.target og event.relatedTarget til að miða á virka flipann og fyrri virka flipann (ef tiltækur) í sömu röð. |
fela.bs.flipa | Þessi atburður ræsir þegar nýjan flipa á að sýna (og þar með á að fela fyrri virka flipa). Notaðu event.target og event.relatedTarget til að miða á núverandi virka flipa og nýja flipa sem bráðum verður virkur, í sömu röð. |
falinn.bs.flipi | Þessi atburður ræsir eftir að nýr flipi er sýndur (og þar með er fyrri virki flipinn falinn). Notaðu event.target og event.relatedTarget til að miða á fyrri virka flipann og nýja virka flipann, í sömu röð. |
Innblásin af frábæru jQuery.tipsy viðbótinni skrifað af Jason Frame; Verkfæraráð eru uppfærð útgáfa, sem treystir ekki á myndir, notar CSS3 fyrir hreyfimyndir og gagnaeiginleika fyrir staðbundna titlageymslu.
Verkfæraleiðbeiningar með núlllengdar titlum birtast aldrei.
Farðu yfir tenglana hér að neðan til að sjá verkfæraleiðbeiningar:
Þröngar buxur næsta stig keffiyeh þú hefur líklega ekki heyrt um þær. Ljósmyndabás skegg hrár denim bókprentun vegan senditaska stumptown. Seitan frá bænum til borðs, mcsweeney's fixie sjálfbær quinoa 8 bita amerískur fatnaður er með terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu lífdísill Williamsburg Marfa, fjögurra loko mcsweeney's cleanse vegan chambray. Virkilega kaldhæðnislegur handverksmaður hvað sem er keytar , scenester bæ-til-borð banksy Austin twitter höndla freegan cred raw denim einuppruna kaffi veiru.
Fjórir valkostir eru í boði: efst, hægri, neðst og vinstri stillt.
Af frammistöðuástæðum eru Tooltip og Popover data-apis valin, sem þýðir að þú verður að frumstilla þau sjálfur .
Ein leið til að frumstilla allar verkfæraábendingar á síðu væri að velja þær eftir data-toggle
eiginleikum þeirra:
The tooltip tappi býr til efni og álagningu á eftirspurn og setur sjálfgefið verkfæraábendingar á eftir kveikjuhlutanum.
Kveiktu á tóli í gegnum JavaScript:
Nauðsynleg merking fyrir verkfæraleiðbeiningar er aðeins data
eiginleiki og title
á HTML-einingunni viltu hafa verkfæraleiðbeiningar. Mynduð merking tækjaráðs er frekar einföld, þó hún krefjist stöðu (sjálfgefið, stillt á top
af viðbótinni).
Stundum vilt þú bæta tóli við stiklu sem umlykur margar línur. Sjálfgefin hegðun tólitip viðbótarinnar er að miðja hana lárétt og lóðrétt. Bættu white-space: nowrap;
við akkeri til að forðast þetta.
Þegar þú notar verkfæraábendingar á þætti innan .btn-group
eða .input-group
, eða á töflutengda þætti ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), þarftu að tilgreina valmöguleikann container: 'body'
(skráður hér að neðan) til að forðast óæskilegar aukaverkanir (svo sem að þátturinn stækkar og/ eða missa ávöl hornin þegar tólið er ræst).
Fyrir notendur sem flakka með lyklaborði, og sérstaklega notendur hjálpartækni, ættir þú aðeins að bæta tólaábendingum við lyklaborðsfókusa þætti eins og tengla, formstýringar eða hvaða handahófskenndan þátt sem er með tabindex="0"
eigind.
Til að bæta tóli við a disabled
eða .disabled
frumefni, setjið þáttinn inn í a <div>
og notið tólið á það <div>
í staðinn.
Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-
, eins og í data-animation=""
.
Nafn | Tegund | Sjálfgefið | Lýsing |
---|---|---|---|
fjör | Boolean | satt | Notaðu CSS fade umskipti á tólabendinguna |
ílát | strengur | rangt | rangt | Bætir ábendingunni við ákveðinn þátt. Dæmi: |
seinkun | númer | mótmæla | 0 | Seinkun á að sýna og fela verkfæraábendingu (ms) - á ekki við um handvirka kveikjugerð Ef númer er gefið upp er seinkun beitt á bæði fela/sýna Uppbygging hlutar er: |
html | Boolean | rangt | Settu HTML inn í tólið. Ef það er rangt verður text aðferð jQuery notuð til að setja efni inn í DOM. Notaðu texta ef þú hefur áhyggjur af XSS árásum. |
staðsetningu | strengur | virka | 'topp' | Hvernig á að staðsetja tólið - efst | botn | vinstri | rétt | sjálfvirkt. Þegar fall er notað til að ákvarða staðsetninguna er það kallað með tooltip DOM hnútnum sem fyrstu röksemd og kveikjuþáttinn DOM hnút sem seinni. Samhengið |
veljara | strengur | rangt | Ef valkostur er til staðar verður verkfæravísahlutum úthlutað til tilgreindra skotmarka. Í reynd er þetta notað til að gera kleift að bæta við ábendingum um kvikt HTML efni. Sjá þetta og fróðlegt dæmi . |
sniðmát | strengur | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Grunn HTML til að nota þegar þú býrð til verkfæraábendingu. Verkfæraráðinu
Ysta umbúðaþátturinn ætti að hafa |
titill | strengur | virka | '' | Sjálfgefið titilgildi ef Ef fall er gefið upp verður það kallað með |
kveikja | strengur | 'sveima fókus' | Hvernig tólábending er kveikt - smelltu á | sveima | fókus | handbók. Þú gætir farið framhjá mörgum kveikjum; aðskilja þá með bili. manual ekki hægt að sameina með neinum öðrum kveikjum. |
útsýnissvæði | strengur | hlutur | virka | { selector: 'body', padding: 0 } | Heldur tóli innan marka þessa þáttar. Dæmi: Ef fall er gefið upp er það kallað með kveikjuþáttinn DOM hnút sem eina röksemd. Samhengið |
Að öðrum kosti er hægt að tilgreina valkosti fyrir einstakar verkfæraábendingar með því að nota gagnaeiginleika, eins og útskýrt er hér að ofan.
$().tooltip(options)
Hengir verkfæraleiðbeiningum við einingarsafn.
.tooltip('show')
Sýnir verkfæraábendingu frumefnis. Snýr aftur til þess sem hringir áður en verkfæraráðið hefur verið sýnt (þ.e. áður en shown.bs.tooltip
atburðurinn á sér stað). Þetta er talið „handvirk“ kveikja á tólabendingunni. Verkfæraleiðbeiningar með núlllengdar titlum birtast aldrei.
.tooltip('hide')
Felur ábendingu frumefnis. Snýr aftur til þess sem hringir áður en verkfæraráðið hefur verið falið (þ.e. áður en hidden.bs.tooltip
atburðurinn á sér stað). Þetta er talið „handvirk“ kveikja á tólabendingunni.
.tooltip('toggle')
Breytir ábendingum frumefnis. Snýr aftur til þess sem hringir áður en verkfæraábendingin hefur verið sýnd eða falin (þ.e. áður en atburðurinn shown.bs.tooltip
eða hidden.bs.tooltip
á sér stað). Þetta er talið „handvirk“ kveikja á tólabendingunni.
.tooltip('destroy')
Felur og eyðileggur ábendingu frumefnis. Verkfæraábendingar sem nota úthlutun (sem eru búnar til með valmöguleikanum selector
) er ekki hægt að eyða fyrir sig á afkvæma kveikjuþáttum.
Tegund atburðar | Lýsing |
---|---|
sýna.bs.tól | Þessi atburður ræsir strax þegar show tilviksaðferðin er kölluð. |
sýnd.bs.tákn | Þessi atburður er ræstur þegar verkfæraráðið hefur verið gert sýnilegt notandanum (bíður eftir að CSS umbreytingum ljúki). |
fela.bs.tól | Þessi atburður er ræstur strax þegar hide tilviksaðferðin hefur verið kölluð. |
falinn.bs.verkfæraráð | Þetta tilvik er ræst þegar tólaábendingin hefur lokið við að vera falin fyrir notandanum (bíður eftir að CSS umbreytingum ljúki). |
sett inn.bs.tól | Þessi atburður er ræstur eftir show.bs.tooltip atburðinn þegar sniðmát fyrir verkfæraleiðbeiningar hefur verið bætt við DOM. |
Bættu litlum yfirlagi af efni, eins og á iPad, við hvaða þátt sem er til að hýsa aukaupplýsingar.
Popovers þar sem bæði titill og innihald eru núll lengd birtast aldrei.
Popovers krefjast þess að tooltip viðbótin sé innifalin í útgáfunni þinni af Bootstrap.
Af frammistöðuástæðum eru Tooltip og Popover data-apis valin, sem þýðir að þú verður að frumstilla þau sjálfur .
Ein leið til að frumstilla alla sprettiglugga á síðu væri að velja þá eftir data-toggle
eiginleikum þeirra:
Þegar þú notar sprettiglugga á þætti innan .btn-group
eða .input-group
, eða á töflutengdum þáttum ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), þarftu að tilgreina valmöguleikann container: 'body'
(skráð hér að neðan) til að forðast óæskilegar aukaverkanir (svo sem að þátturinn stækkar og/ eða missa ávöl hornin þegar popover er sett af stað).
Til að bæta sprettiglugga við a disabled
eða .disabled
frumefni, settu frumefnið inn í a <div>
og notaðu sprettigluggann á það <div>
í staðinn.
Stundum vilt þú bæta sprettiglugga við stiklu sem umlykur margar línur. Sjálfgefin hegðun popover viðbótarinnar er að miðja hana lárétt og lóðrétt. Bættu white-space: nowrap;
við akkeri til að forðast þetta.
Fjórir valkostir eru í boði: efst, hægri, neðst og vinstri stillt.
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.
Notaðu focus
kveikjuna til að hafna sprettiglugga við næsta smell sem notandinn gerir.
Fyrir rétta hegðun milli vafra og vettvanga verður þú að nota <a>
merkið, ekki merkið <button>
, og þú verður líka að innihalda role="button"
og tabindex
eiginleikana.
Virkja popover í gegnum JavaScript:
Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-
, eins og í data-animation=""
.
Nafn | Tegund | Sjálfgefið | Lýsing |
---|---|---|---|
fjör | Boolean | satt | Notaðu CSS fade umskipti á popover |
ílát | strengur | rangt | rangt | Bætir sprettiglugganum við ákveðinn þátt. Dæmi: |
efni | strengur | virka | '' | Sjálfgefið innihaldsgildi ef Ef fall er gefið upp verður það kallað með |
seinkun | númer | mótmæla | 0 | Seinkun á að sýna og fela sprettigluggann (ms) - á ekki við um handvirka kveikjugerð Ef númer er gefið upp er seinkun beitt á bæði fela/sýna Uppbygging hlutar er: |
html | Boolean | rangt | Settu HTML inn í popover. Ef það er rangt verður text aðferð jQuery notuð til að setja efni inn í DOM. Notaðu texta ef þú hefur áhyggjur af XSS árásum. |
staðsetningu | strengur | virka | 'rétt' | Hvernig á að staðsetja popover - efst | botn | vinstri | rétt | sjálfvirkt. Þegar fall er notað til að ákvarða staðsetninguna er það kallað með popover DOM hnútinn sem fyrstu röksemd og kveikjuþáttinn DOM hnútinn sem seinni. Samhengið |
veljara | strengur | rangt | Ef valkostur er til staðar verða sprettigluggar hlutir framseldir til tilgreindra skotmarka. Í reynd er þetta notað til að gera kviku HTML efni kleift að bæta við sprettigluggum. Sjá þetta og fróðlegt dæmi . |
sniðmát | strengur | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Grunn HTML til að nota þegar þú býrð til popover. Popoverinu Popoverinu
Ysta umbúðaþátturinn ætti að hafa |
titill | strengur | virka | '' | Sjálfgefið titilgildi ef Ef fall er gefið upp verður það kallað með |
kveikja | strengur | 'smellur' | Hvernig popover er kveikt - smelltu á | sveima | fókus | handbók. Þú gætir farið framhjá mörgum kveikjum; aðskilja þá með bili. manual ekki hægt að sameina með neinum öðrum kveikjum. |
útsýnissvæði | strengur | hlutur | virka | { selector: 'body', padding: 0 } | Heldur popover innan marka þessa þáttar. Dæmi: Ef fall er gefið upp er það kallað með kveikjuþáttinn DOM hnút sem eina röksemd. Samhengið |
Að öðrum kosti er hægt að tilgreina valkosti fyrir einstaka sprettiglugga með því að nota gagnaeiginleika, eins og útskýrt er hér að ofan.
$().popover(options)
Frumstillir sprettiglugga fyrir þáttasafn.
.popover('show')
Sýnir popover frumefnis. Snýr aftur til þess sem hringir áður en sprettigluggan hefur verið sýnd (þ.e. áður en shown.bs.popover
atburðurinn á sér stað). Þetta er talið „handvirk“ kveikja á popover. Popovers þar sem bæði titill og innihald eru núll lengd birtast aldrei.
.popover('hide')
Felur sprettiglugga frumefnis. Snýr aftur til þess sem hringir áður en popover hefur verið falið (þ.e. áður en hidden.bs.popover
atburðurinn á sér stað). Þetta er talið „handvirk“ kveikja á popover.
.popover('toggle')
Kveikir á sprettiglugga frumefnis. Snýr aftur til þess sem hringir áður en sprettigluggan hefur verið sýnd eða falin (þ.e. áður en atburðurinn shown.bs.popover
eða hidden.bs.popover
á sér stað). Þetta er talið „handvirk“ kveikja á popover.
.popover('destroy')
Felur og eyðileggur popover frumefnis. Popovers sem nota úthlutun (sem eru búnar til með valmöguleikanum selector
) er ekki hægt að eyða hver fyrir sig á afkvæma kveikjuþáttum.
Tegund atburðar | Lýsing |
---|---|
show.bs.poppover | Þessi atburður ræsir strax þegar show tilviksaðferðin er kölluð. |
sýnd.bs.poppover | Þessi atburður er ræstur þegar sprettiglugginn hefur verið gerður sýnilegur notanda (mun bíða eftir að CSS umbreytingum ljúki). |
fela.bs.poppover | Þessi atburður er ræstur strax þegar hide tilviksaðferðin hefur verið kölluð. |
falinn.bs.poppover | Þessi atburður er ræstur þegar búið er að fela sprettigluggann fyrir notandanum (bíður eftir að CSS umbreytingum ljúki). |
settur.bs.poppover | Þessi atburður er rekinn eftir show.bs.popover atburðinn þegar popover sniðmátinu hefur verið bætt við DOM. |
Bættu við að hafna virkni við öll viðvörunarskilaboð með þessari viðbót.
Þegar .close
hnappur er notaður verður hann að vera fyrsta barnið .alert-dismissible
og ekkert textaefni má koma á undan honum í merkingunni.
Breyttu hinu og þessu og reyndu aftur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Bættu bara við data-dismiss="alert"
lokunarhnappinn þinn til að gefa sjálfkrafa viðvörunarlokunarvirkni. Lokun viðvörunar fjarlægir hana úr DOM.
Til að láta tilkynningar þínar nota hreyfimyndir við lokun skaltu ganga úr skugga um að þær hafi .fade
og .in
flokkar þegar notaðir fyrir þær.
$().alert()
Gerir viðvörun til að hlusta eftir smellaviðburðum á afkomandi þáttum sem hafa data-dismiss="alert"
eiginleikann. (Ekki nauðsynlegt þegar þú notar sjálfvirka frumstillingu gagnaforritsins.)
$().alert('close')
Lokar viðvörun með því að fjarlægja hana úr DOM. Ef .fade
og .in
flokkarnir eru til staðar á frumefninu mun viðvörunin hverfa áður en hún er fjarlægð.
Viðvörunarviðbót Bootstrap afhjúpar nokkra atburði til að tengjast viðvörunarvirkni.
Tegund atburðar | Lýsing |
---|---|
loka.bs.viðvörun | Þessi atburður ræsir strax þegar close tilviksaðferðin er kölluð. |
lokað.bs.viðvörun | Þessi atburður er ræstur þegar viðvöruninni hefur verið lokað (bíður eftir að CSS umskiptum ljúki). |
Gerðu meira með hnöppum. Stjórna hnappastöður eða búa til hópa af hnöppum fyrir fleiri hluti eins og tækjastikur.
Firefox heldur áfram formstýringarástandi (óvirkt og eftirlit) yfir síðuhleðslu . Lausn fyrir þessu er að nota autocomplete="off"
. Sjá Mozilla villu #654072 .
Bæta við data-loading-text="Loading..."
til að nota hleðsluástand á hnapp.
Þessi eiginleiki er úreltur frá v3.3.5 og hefur verið fjarlægður í v4.
Vegna þessarar sýnikennslu erum við að nota data-loading-text
og $().button('loading')
, en það er ekki eina ástandið sem þú getur notað. Sjá nánar um þetta hér að neðan í $().button(string)
skjölunum .
Bættu við data-toggle="button"
til að virkja kveikt á einum hnappi.
.active
ogaria-pressed="true"
Fyrir forstillta hnappa verður þú að bæta .active
bekknum og aria-pressed="true"
eigindinni við button
sjálfan þig.
Bættu data-toggle="buttons"
við .btn-group
gátreit sem inniheldur gátreit eða útvarpsinntak til að gera það kleift að skipta í viðkomandi stíl.
.active
Fyrir forvalna valkosti verður þú að bæta .active
bekknum við inntakið label
sjálfur.
Ef merkt ástand gátreitshnapps er uppfært án þess að kveikja á click
atburði á hnappnum (td með <input type="reset">
eða með því að stilla checked
eiginleika inntaksins), þarftu sjálfur að skipta um .active
flokk á inntakinu label
.
$().button('toggle')
Skiptir á ýtastöðu. Gefur hnappinum það útlit að hann hafi verið virkjaður.
$().button('reset')
Endurstillir stöðu hnapps - skiptir texta yfir í upprunalegan texta. Þessi aðferð er ósamstillt og skilar sér áður en endurstillingunni er í raun lokið.
$().button(string)
Skiptir texta í hvaða gagnaskilgreinda textastöðu sem er.
Sveigjanleg viðbót sem notar handfylli af flokkum til að auðvelda skiptahegðun.
Collapse krefst þess að umbreytingarviðbótin sé innifalin í útgáfunni þinni af Bootstrap.
Smelltu á hnappana hér að neðan til að sýna og fela annan þátt með bekkjarbreytingum:
.collapse
felur efni.collapsing
er beitt við umskipti.collapse.in
sýnir efniÞú getur notað tengil með href
eigindinni eða hnapp með data-target
eigindinni. Í báðum tilvikum data-toggle="collapse"
er krafist.
Framlengdu sjálfgefna fallhegðun til að búa til harmonikku með spjaldíhlutnum.
Það er líka hægt að skipta út .panel-body
s með .list-group
s.
Vertu viss um að bæta aria-expanded
við stjórnhlutanum. Þessi eiginleiki skilgreinir beinlínis núverandi stöðu samfellanlegs þáttar fyrir skjálesara og svipaða hjálpartækni. Ef fellanlegur þáttur er lokaður sjálfgefið ætti hann að hafa gildið aria-expanded="false"
. Ef þú hefur stillt fellanlega þáttinn þannig að hann sé opinn sjálfgefið með því að nota in
bekkinn, stilltuaria-expanded="true"
þá á stýringuna í staðinn. Viðbótin mun sjálfkrafa skipta um þennan eiginleika út frá því hvort sambrjótanlegur þáttur hefur verið opnaður eða lokaður.
Að auki, ef stjórneiningin þín miðar á einn samanbrjótanlegan þátt – þ.e. data-target
eigindin vísar á id
veljara – geturðu bætt viðbótareigind aria-controls
við stjórneininguna, sem inniheldur id
sambrjótanlega eininguna. Nútíma skjálesarar og svipuð hjálpartækni nýta sér þennan eiginleika til að veita notendum viðbótarflýtileiðir til að fletta beint að sjálfum samanbrjótanlegum þættinum.
Hrunviðbótin notar nokkra flokka til að takast á við þungar lyftingar:
.collapse
felur innihaldið.collapse.in
sýnir innihaldið.collapsing
er bætt við þegar umskiptin hefjast og fjarlægð þegar þeim lýkurÞessa flokka er að finna í component-animations.less
.
Bættu bara við data-toggle="collapse"
og a data-target
við þáttinn til að úthluta sjálfkrafa stjórn á fellanlegum þætti. Eigindin data-target
samþykkir CSS val til að beita hruninu á. Vertu viss um að bæta bekknum collapse
við samanbrjótanlega þáttinn. Ef þú vilt að það opni sjálfgefið skaltu bæta við viðbótarflokknum in
.
Til að bæta harmónikkulíkri hópstjórnun við samanbrjótanlega stýringu skaltu bæta við gagnaeigindinni data-parent="#selector"
. Skoðaðu kynninguna til að sjá þetta í aðgerð.
Virkja handvirkt með:
Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-
, eins og í data-parent=""
.
Nafn | tegund | sjálfgefið | lýsingu |
---|---|---|---|
foreldri | veljara | rangt | Ef valkostur er til staðar, þá verður öllum samanbrjótanlegum þáttum undir tilgreindu foreldri lokað þegar þetta samanbrjótanlega atriði er sýnt. (svipað og hefðbundin harmonikkuhegðun - þetta fer eftir panel bekknum) |
skipta | Boolean | satt | Kveikir á samanbrjótanlegu þættinum við ákall |
.collapse(options)
Virkjar efnið þitt sem samanbrjótanlegan þátt. Samþykkir valfrjálsa valkosti object
.
.collapse('toggle')
Skiptir um að fellanlegur þáttur sé sýndur eða falinn. Snýr aftur til þess sem hringir áður en fellanlegur þáttur hefur verið sýndur eða falinn (þ.e. áður en atburðurinn shown.bs.collapse
eða hidden.bs.collapse
á sér stað).
.collapse('show')
Sýnir samanbrjótanlegan þátt. Snýr aftur til þess sem hringir áður en fellanlegur þáttur hefur verið sýndur (þ.e. áður en shown.bs.collapse
atburðurinn á sér stað).
.collapse('hide')
Felur samanbrjótanlegt frumefni. Snýr aftur til þess sem hringir áður en fellanlegur þáttur hefur raunverulega verið falinn (þ.e. áður en hidden.bs.collapse
atburðurinn á sér stað).
Hrunflokkur Bootstrap afhjúpar nokkra atburði til að tengja sig við hrunvirkni.
Tegund atburðar | Lýsing |
---|---|
sýna.bs.hrun | Þessi atburður ræsir strax þegar show tilviksaðferðin er kölluð. |
sýnt.bs.hrun | Þessi atburður er ræstur þegar hrunþáttur hefur verið gerður sýnilegur notanda (mun bíða eftir að CSS umbreytingum ljúki). |
fela.bs.hrynja | Þessi atburður er ræstur strax þegar hide aðferðin hefur verið kölluð. |
falið.bs.hrun | Þessi atburður er ræstur þegar hrunþáttur hefur verið falinn fyrir notandanum (bíður eftir að CSS umbreytingum ljúki). |
Skyggnusýningarhluti til að hjóla í gegnum þætti, eins og hringekju. Hreiður hringekjur eru ekki studdar.
Hringekjuhluturinn er almennt ekki í samræmi við aðgengisstaðla. Ef þú þarft að vera í samræmi, vinsamlegast íhugaðu aðra valkosti til að kynna efnið þitt.
Bootstrap notar eingöngu CSS3 fyrir hreyfimyndir sínar, en Internet Explorer 8 og 9 styðja ekki nauðsynlegar CSS eiginleika. Þannig eru engar glærubreytingar hreyfimyndir þegar þessir vafrar eru notaðir. Við höfum viljandi ákveðið að taka ekki með jQuery-undirstaða fallbacks fyrir umbreytingarnar.
Bæta .active
þarf bekknum við eina af glærunum. Annars mun hringekjan ekki sjást.
Og flokkarnir .glyphicon .glyphicon-chevron-left
eru .glyphicon .glyphicon-chevron-right
ekki endilega nauðsynlegir fyrir stýringarnar. Bootstrap veitir .icon-prev
og .icon-next
sem látlaus unicode val.
Bættu texta við skyggnurnar þínar auðveldlega með .carousel-caption
þættinum í hvaða .item
. Settu næstum hvaða valfrjálsa HTML þar inn og það verður sjálfkrafa stillt og sniðið.
Hringekjur krefjast þess að notað sé id
ysta ílátið ( .carousel
) til að stjórntæki hringekjunnar virki rétt. Þegar þú bætir við mörgum hringekjum, eða þegar skipt er um hringekju id
, vertu viss um að uppfæra viðeigandi stýringar.
Notaðu gagnaeiginleika til að stjórna staðsetningu hringekjunnar auðveldlega. data-slide
samþykkir lykilorðin prev
eða next
, sem breytir staðsetningu skyggnunnar miðað við núverandi staðsetningu. Að öðrum kosti er hægt að nota data-slide-to
til að senda hráa skyggnuvísitölu í hringekjuna data-slide-to="2"
, sem færir skyggnustöðuna yfir á tiltekna vísitölu sem byrjar á 0
.
Eigindin data-ride="carousel"
er notuð til að merkja hringekju sem hreyfimynd frá og með hleðslu síðu. Það er ekki hægt að nota það ásamt (óþarfi og óþarfa) skýrri JavaScript frumstillingu á sömu hringekjunni.
Hringdu handvirkt í hringekju með:
Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-
, eins og í data-interval=""
.
Nafn | tegund | sjálfgefið | lýsingu |
---|---|---|---|
bil | númer | 5000 | Tíminn sem líður á milli þess að hlutur er hjólaður sjálfkrafa. Ef það er rangt mun hringekjan ekki ganga sjálfkrafa. |
hlé | strengur | núll | "sveima" | Ef stillt er á "hover" , gerir hlé á hjólreiðum hringekjunnar á mouseenter og heldur áfram að hjóla hringekjuna á mouseleave . Ef stillt er á null , mun það ekki gera hlé á hringekjunni með því að sveima yfir hringekjunni. |
vefja | Boolean | satt | Hvort hringekjan ætti að hjóla stöðugt eða hafa erfið stopp. |
lyklaborð | Boolean | satt | Hvort hringekjan eigi að bregðast við lyklaborðsviðburðum. |
.carousel(options)
Frumstillir hringekjuna með valkvæðum valkostum object
og byrjar að hjóla í gegnum hluti.
.carousel('cycle')
Hringur í gegnum hringekjuhlutina frá vinstri til hægri.
.carousel('pause')
Kemur í veg fyrir að hringekjan hjóli í gegnum hluti.
.carousel(number)
Hringir hringekjuna að tilteknum ramma (miðað við 0, svipað og fylki).
.carousel('prev')
Fer að fyrra atriði.
.carousel('next')
Fer í næsta atriði.
Hringekjuflokkur Bootstrap afhjúpar tvo atburði til að tengjast hringekjuvirkni.
Báðir viðburðir hafa eftirfarandi viðbótareiginleika:
direction
: Sú átt sem hringekjan rennur í (annaðhvort "left"
eða "right"
).relatedTarget
: DOM-einingunni sem verið er að renna á sinn stað sem virki hluturinn.Allir hringekjuviðburðir eru skotnir á hringekjuna sjálfa (þ.e. á <div class="carousel">
).
Tegund atburðar | Lýsing |
---|---|
rennibraut.bs.hringekja | Þessi atburður ræsir strax þegar slide tilviksaðferðin er kölluð fram. |
renna.bs.hringekja | Þessi atburður er ræstur þegar hringekjan hefur lokið rennibraut sinni. |
Kveikt og slökkt er á affix viðbótinni position: fixed;
og líkir eftir áhrifunum sem finnast með position: sticky;
. Undirleiðsögnin til hægri er lifandi kynning á affix viðbótinni.
Notaðu affix viðbótina í gegnum gagnaeiginleika eða handvirkt með þínu eigin JavaScript. Í báðum tilfellum verður þú að gefa upp CSS fyrir staðsetningu og breidd efnis sem þú festir á.
Athugið: Ekki nota festingarviðbótina á einingu sem er í tiltölulega staðsettri einingu, eins og dreginni eða ýttri dálki, vegna villu í Safari flutningi .
Affix viðbótin skiptir á milli þriggja flokka, sem hver táknar tiltekið ástand: .affix
, .affix-top
, og .affix-bottom
. Þú verður að útvega stílana, að undanskildum position: fixed;
á .affix
, fyrir þessa flokka sjálfur (óháð þessari viðbót) til að sjá um raunverulegar stöður.
Svona virkar affix viðbótin:
.affix-top
til að gefa til kynna að þátturinn sé í efstu stöðu sinni. Á þessum tímapunkti er ekki krafist CSS staðsetningar..affix
stað .affix-top
og setur position: fixed;
(veitt af CSS Bootstrap)..affix
út fyrir .affix-bottom
. Þar sem mótfærslur eru valfrjálsar, þarf að setja einn upp á að þú stillir viðeigandi CSS. Í þessu tilviki skaltu bæta við position: absolute;
þegar þörf krefur. Viðbótin notar gagnaeiginleikann eða JavaScript valkostinn til að ákvarða hvar á að staðsetja frumefnið þaðan.Fylgdu ofangreindum skrefum til að stilla CSS þinn fyrir annan hvorn af notkunarmöguleikunum hér að neðan.
Til að bæta við festuhegðun auðveldlega við hvaða þátt sem er, bættu bara við data-spy="affix"
þáttinn sem þú vilt njósna um. Notaðu frávik til að skilgreina hvenær á að skipta um festingu á þætti.
Hringdu í affix viðbótina í gegnum JavaScript:
Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-
, eins og í data-offset-top="200"
.
Nafn | tegund | sjálfgefið | lýsingu |
---|---|---|---|
á móti | númer | fall | mótmæla | 10 | Dílar til að vega á móti frá skjánum þegar reiknað er út stöðu skrununar. Ef ein tala er gefin upp verður offsetið beitt bæði í efri og neðri átt. Til að bjóða upp á einstakt, botn- og toppjöfnun gefðu bara upp hlut offset: { top: 10 } eða offset: { top: 10, bottom: 5 } . Notaðu aðgerð þegar þú þarft að reikna út offset á virkan hátt. |
skotmark | veljara | hnútur | jQuery þáttur | window hluturinn _ |
Tilgreinir markeining áfestingarinnar. |
.affix(options)
Virkjar efnið þitt sem ásætt efni. Samþykkir valfrjálsa valkosti object
.
.affix('checkPosition')
Endurreiknar stöðu festingarinnar út frá víddum, staðsetningu og skrunstöðu viðkomandi þátta. , .affix
, .affix-top
og .affix-bottom
flokkarnir eru bætt við eða fjarlægðir úr áfestu efninu samkvæmt nýju ástandi. Kalla þarf þessa aðferð í hvert sinn sem víddum áfesta efnisins eða markþáttar er breytt, til að tryggja rétta staðsetningu á áfestu efninu.
Bootstrap's fix tappi afhjúpar nokkra atburði til að tengja við affix virkni.
Tegund atburðar | Lýsing |
---|---|
festa.bs.festa | Þessi atburður kviknar strax áður en þátturinn hefur verið festur á. |
fest.bs.festa | Þessi atburður er ræstur eftir að þátturinn hefur verið festur á. |
festa-topp.bs.festa | Þessi atburður kviknar strax áður en þátturinn hefur verið festur efst. |
fest-topp.bs.festa | Þessi atburður er ræstur eftir að þátturinn hefur verið festur efst. |
festa-botn.bs.festa | Þessi atburður kviknar strax áður en þátturinn hefur verið festur-neðst. |
fest-botn.bs.áfesta | Þessi atburður er rekinn eftir að þátturinn hefur verið festur-neðst. |