JavaScript
Bring Bootstrap se komponente tot lewe met meer as 'n dosyn pasgemaakte jQuery-inproppe. Sluit hulle almal maklik in, of een vir een.
Bring Bootstrap se komponente tot lewe met meer as 'n dosyn pasgemaakte jQuery-inproppe. Sluit hulle almal maklik in, of een vir een.
Inproppe kan individueel ingesluit word (met Bootstrap se individuele *.js
lêers), of alles op een slag (met bootstrap.js
of die verkleinde bootstrap.min.js
).
Beide bootstrap.js
en bootstrap.min.js
bevat alle plugins in 'n enkele lêer. Sluit slegs een in.
Sommige inproppe en CSS-komponente is afhanklik van ander inproppe. As jy plugins individueel insluit, maak seker dat jy vir hierdie afhanklikhede in die dokumente kyk. Let ook daarop dat alle inproppe afhanklik is van jQuery (dit beteken jQuery moet voor die inproplêers ingesluit word). Raadpleeg onsbower.json
om te sien watter weergawes van jQuery ondersteun word.
U kan alle Bootstrap-inproppe suiwer deur die markup API gebruik sonder om 'n enkele reël JavaScript te skryf. Dit is Bootstrap se eersteklas API en behoort u eerste oorweging te wees wanneer u 'n inprop gebruik.
Dit gesê, in sommige situasies kan dit wenslik wees om hierdie funksionaliteit af te skakel. Daarom bied ons ook die vermoë om die data-kenmerk API te deaktiveer deur alle gebeurtenisse op die dokument wat met 'n naamspasie is, te ontbind data-api
. Dit lyk so:
Alternatiewelik, om 'n spesifieke inprop te teiken, sluit net die inprop se naam as 'n naamspasie saam met die data-api naamspasie soos volg in:
Moenie data-kenmerke van veelvuldige inproppe op dieselfde element gebruik nie. Byvoorbeeld, 'n knoppie kan nie beide 'n nutswenk hê en 'n modaal wissel nie. Om dit te bereik, gebruik 'n wikkelelement.
Ons glo ook dat u alle Bootstrap-inproppe bloot deur die JavaScript API moet kan gebruik. Alle publieke API's is enkelvoudige, kettingbare metodes, en gee die versameling waarop gereageer is, terug.
Alle metodes moet 'n opsionele opsie-objek aanvaar, 'n string wat 'n spesifieke metode teiken, of niks (wat 'n inprop met verstekgedrag inisieer):
Elke inprop stel ook sy rou konstruktor bloot op 'n Constructor
eiendom: $.fn.popover.Constructor
. As jy 'n spesifieke inprop-instansie wil kry, haal dit direk van 'n element af: $('[rel="popover"]').data('popover')
.
Jy kan die verstekinstellings vir 'n inprop verander deur die inprop se Constructor.DEFAULTS
voorwerp te wysig:
Soms is dit nodig om Bootstrap-inproppe met ander UI-raamwerke te gebruik. In hierdie omstandighede kan naamruimtebotsings soms voorkom. As dit gebeur, kan jy .noConflict
die inprop gebruik waarvan jy die waarde wil terugdraai.
Bootstrap bied pasgemaakte gebeurtenisse vir die meeste inproppe se unieke aksies. Oor die algemeen kom dit in 'n infinitief en verlede deelwoordvorm - waar die infinitief (bv. show
) geaktiveer word aan die begin van 'n gebeurtenis, en sy verlede deelwoordvorm (bv. shown
) geaktiveer word by die voltooiing van 'n aksie.
Vanaf 3.0.0 is alle Bootstrap-geleenthede met name gespasieer.
Alle infinitiewe gebeurtenisse bied preventDefault
funksionaliteit. Dit bied die vermoë om die uitvoering van 'n aksie te stop voordat dit begin.
Die weergawe van elk van Bootstrap se jQuery-inproppe kan verkry word via die VERSION
eiendom van die inprop se konstruktor. Byvoorbeeld, vir die tooltip-inprop:
Bootstrap se inproppe val nie besonder grasieus terug wanneer JavaScript gedeaktiveer is nie. As jy omgee vir die gebruikerservaring in hierdie geval, gebruik <noscript>
om die situasie (en hoe om JavaScript te heraktiveer) aan jou gebruikers te verduidelik, en/of voeg jou eie gepasmaakte terugval by.
Bootstrap ondersteun nie amptelik JavaScript-biblioteke van derdepartye soos Prototype of jQuery UI nie. Ten spyte .noConflict
van gebeurtenisse wat deur die naam gespasieer is, kan daar versoenbaarheidsprobleme wees wat u op u eie moet regstel.
Vir eenvoudige oorgangseffekte, sluit transition.js
een keer langs die ander JS-lêers in. As jy die saamgestelde (of verkleinde) bootstrap.js
gebruik, hoef jy dit nie in te sluit nie – dit is reeds daar.
Transition.js is 'n basiese helper vir transitionEnd
geleenthede sowel as 'n CSS-oorgangemulator. Dit word deur die ander inproppe gebruik om te kyk vir CSS-oorgangondersteuning en om hangende oorgange op te vang.
Oorgange kan wêreldwyd gedeaktiveer word deur die volgende JavaScript-brokkie te gebruik, wat moet kom nadat transition.js
(of bootstrap.js
of bootstrap.min.js
, na gelang van die geval) gelaai is:
Modale is vaartbelynde, maar buigsame, dialoogopdragte met die minimum vereiste funksionaliteit en slim verstekke.
Maak seker dat jy nie 'n modaal oopmaak terwyl 'n ander nog sigbaar is nie. Om meer as een modaal op 'n slag te wys, vereis gepasmaakte kode.
Probeer altyd om 'n modaal se HTML-kode op 'n topvlakposisie in jou dokument te plaas om te verhoed dat ander komponente die modaal se voorkoms en/of funksionaliteit beïnvloed.
Daar is 'n paar waarskuwings oor die gebruik van modale op mobiele toestelle. Sien ons blaaierondersteuningsdokumente vir besonderhede.
As gevolg van hoe HTML5 sy semantiek definieer, het die autofocus
HTML-kenmerk geen effek in Bootstrap-modale nie. Om dieselfde effek te bereik, gebruik 'n paar persoonlike JavaScript:
'n Weergegee modaal met kopskrif, liggaam en stel aksies in die voetskrif.
Wissel 'n modaal via JavaScript deur op die knoppie hieronder te klik. Dit sal afgly en vervaag vanaf die bokant van die bladsy.
Maak seker dat jy role="dialog"
en aria-labelledby="..."
, met verwysing na die modale titel, by .modal
, en role="document"
na die .modal-dialog
self byvoeg.
Daarbenewens kan jy 'n beskrywing van jou modale dialoog gee met aria-describedby
op .modal
.
Om YouTube-video's in modale in te sluit, vereis bykomende JavaScript wat nie in Bootstrap is nie om outomaties afspeel te stop en meer. Sien hierdie nuttige Stack Overflow-plasing vir meer inligting.
Modale het twee opsionele groottes, beskikbaar via wysigerklasse om op 'n .modal-dialog
.
Vir modale wat bloot verskyn eerder as om in te vervaag om te sien, verwyder die .fade
klas van jou modale opmaak.
Om voordeel te trek uit die Bootstrap-roosterstelsel binne 'n modale, maak net .row
s binne die .modal-body
en gebruik dan die normale roosterstelselklasse.
Het jy 'n klomp knoppies wat almal dieselfde modaal aktiveer, net met effens verskillende inhoud? Gebruik event.relatedTarget
en HTML- data-*
kenmerke (moontlik via jQuery ) om die inhoud van die modaal te verander na gelang van watter knoppie geklik is. Sien die Modal Events-dokumente vir besonderhede oor relatedTarget
,
Die modale inprop skakel jou verborge inhoud op aanvraag, via data-kenmerke of JavaScript. Dit dra ook by .modal-open
tot die <body>
om verstek blaai-gedrag te ignoreer en genereer 'n .modal-backdrop
om 'n klikarea te verskaf om gewysde modale te verwyder wanneer daar buite die modaal geklik word.
Aktiveer 'n modaal sonder om JavaScript te skryf. Stel data-toggle="modal"
op 'n beheerderelement, soos 'n knoppie, saam met 'n data-target="#foo"
of href="#foo"
om 'n spesifieke modaal te rig om te wissel.
Roep 'n modaal met ID myModal
met 'n enkele reël JavaScript:
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-
, soos in data-backdrop=""
.
Naam | tipe | verstek | beskrywing |
---|---|---|---|
agtergrond | boolean of die snaar'static' |
waar | Sluit 'n modale agtergrondelement in. Alternatiewelik, spesifiseer static vir 'n agtergrond wat nie die modaal toemaak met klik nie. |
sleutelbord | boolean | waar | Maak die modaal toe wanneer escape-sleutel gedruk word |
Wys | boolean | waar | Toon die modaal wanneer geïnisialiseer. |
afgeleë | pad | onwaar | Hierdie opsie is opgeskort sedert v3.3.0 en is verwyder in v4. Ons beveel aan om eerder kliënt-kant-sjablone of 'n databindingsraamwerk te gebruik, of om self jQuery.load te bel . As 'n afgeleë URL verskaf word, sal inhoud een keer via jQuery se metode gelaai word en in die div |
.modal(options)
Aktiveer jou inhoud as 'n modaal. Aanvaar 'n opsionele opsie object
.
.modal('toggle')
Wissel 'n modaal handmatig. Keer terug na die oproeper voordat die modaal werklik gewys of versteek is (dws voordat die shown.bs.modal
of hidden.bs.modal
gebeurtenis plaasvind).
.modal('show')
Maak 'n modaal handmatig oop. Keer terug na die oproeper voordat die modaal werklik gewys is (dws voor die shown.bs.modal
gebeurtenis plaasvind).
.modal('hide')
Versteek 'n modaal handmatig. Keer terug na die oproeper voordat die modaal eintlik versteek is (dws voor die hidden.bs.modal
gebeurtenis plaasvind).
.modal('handleUpdate')
Herstel die modaal se posisionering om 'n skuifbalk teen te werk indien een sou verskyn, wat die modaal na links sou laat spring.
Slegs nodig wanneer die hoogte van die modaal verander terwyl dit oop is.
Bootstrap se modale klas stel 'n paar gebeurtenisse bloot om by modale funksionaliteit in te skakel.
Alle modale gebeurtenisse word op die modaal self afgevuur (dws by die <div class="modal">
).
Soort gebeurtenis | Beskrywing |
---|---|
wys.bs.modaal | Hierdie gebeurtenis begin onmiddellik wanneer die show instansiemetode geroep word. As dit deur 'n klik veroorsaak word, is die geklikte element beskikbaar as die relatedTarget eienskap van die gebeurtenis. |
getoon.bs.modaal | Hierdie gebeurtenis word afgevuur wanneer die modaal vir die gebruiker sigbaar gemaak is (sal wag vir CSS-oorgange om te voltooi). As dit deur 'n klik veroorsaak word, is die geklikte element beskikbaar as die relatedTarget eienskap van die gebeurtenis. |
verberg.bs.modaal | Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hide instansiemetode geroep is. |
verborge.bs.modale | Hierdie gebeurtenis word afgevuur wanneer die modaal klaar vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi). |
gelaai.bs.modaal | Hierdie gebeurtenis word afgevuur wanneer die modaal inhoud gelaai het deur die remote opsie te gebruik. |
Voeg aftrekkieslys by byna enigiets met hierdie eenvoudige inprop, insluitend die navigasiebalk, oortjies en pille.
.open
Via data-kenmerke of JavaScript skakel die aftrek-inprop verborge inhoud (aftrekkieslyste) deur die klas op die ouerlysitem te wissel .
Op mobiele toestelle, die opening van 'n aftreklys voeg 'n .dropdown-backdrop
as 'n tikarea by om aftrekkieslyste toe te maak wanneer buite die spyskaart getik word, 'n vereiste vir behoorlike iOS-ondersteuning. Dit beteken dat die oorskakeling van 'n oop aftreklys na 'n ander aftreklys 'n ekstra tik op die selfoon vereis.
Let wel: Daar data-toggle="dropdown"
word op die kenmerk staatgemaak vir die sluiting van aftrekkieslys op 'n toepassingsvlak, so dit is 'n goeie idee om dit altyd te gebruik.
Voeg data-toggle="dropdown"
by 'n skakel of knoppie om 'n aftreklys te wissel.
Om URL's ongeskonde te hou met skakelknoppies, gebruik die data-target
kenmerk in plaas van href="#"
.
Bel die aftrekkies via JavaScript:
data-toggle="dropdown"
steeds benodigOngeag of jy jou aftreklys via JavaScript oproep of eerder die data-api gebruik, data-toggle="dropdown"
moet altyd teenwoordig wees op die aftreklys se sneller-element.
Geen
$().dropdown('toggle')
Wissel die aftreklys van 'n gegewe navigasiebalk of navigasie met oortjies.
Alle aftrek-gebeurtenisse word afgevuur by die .dropdown-menu
se ouerelement.
Alle aftrek-gebeurtenisse het 'n relatedTarget
eienskap waarvan die waarde die wissel-ankerelement is.
Soort gebeurtenis | Beskrywing |
---|---|
wys.bs.aftreklys | Hierdie gebeurtenis begin onmiddellik wanneer die wys-instansie-metode geroep word. |
gewys.bs.aftreklys | Hierdie gebeurtenis word afgevuur wanneer die aftreklys vir die gebruiker sigbaar gemaak is (sal wag vir CSS-oorgange om te voltooi). |
versteek.bs.aftreklys | Hierdie gebeurtenis word onmiddellik afgevuur wanneer die versteek instansie metode geroep is. |
versteekte.bs.aftreklys | Hierdie gebeurtenis word afgevuur wanneer die aftreklys klaar vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi). |
Die ScrollSpy-inprop is vir die outomatiese opdatering van navigasieteikens gebaseer op rolposisie. Blaai deur die area onder die navigasiebalk en kyk hoe die aktiewe klas verander. Die aftrek-subitems sal ook uitgelig word.
Advertensie leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi voor hulle uitverkoop qui. Tumblr plaas-tot-tafel fiets regte wat ook al. Anim keffiyeh carles cardigan. Velit seitan mcsweeney se fotohokkie 3 wolf maan irure. Cosby trui lomo jean kortbroek, williamsburg hoodie minim qui jy het seker nog nie van hulle gehoor nie en cardigan trust fund culpa biodiesel Wes anderson estetiese. Nihil getatoeëer accusamus, cred ironie biodiesel keffiyeh ambagsman ullamco consequat.
Veniam Marfa snorskaatsplank, vetterige fugiat velit hooi-baard. Freegan baard aliqua cupidatat mcsweeney se vero. Cupidatat vier loko nisi, ea helvetica nulla carles. Getatoeëerde cosby-trui-kosvragmotor, Mcsweeney's quis non-freegan-viniel. Lo-fi wes anderson +1 sartorial. Carles nie-estetiese oefening quis gentrify. Brooklyn adipiserende handwerkbier vise keytar deserunt.
Occaecat commodo aliqua delectus. Fap handwerk bier deserunt skaatsplank ea. Lomo fiets regte adipisicing banh mi, velit ea sunt next level locavore enkeloorsprong koffie in magna veniam. High life id vinyl, eggo park consequat quis aliquip banh mi pitchfork. Vero VHS is adipisicing. Consectetur nisi DIY mini boodskapper sak. Cred ex in, volhoubare delectus consectetur fanny pack iphone.
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche ironie, thundercats wat jy waarskynlik nie van hulle gehoor het nie consequat hoodie glutenvrye lo-fi fap aliquip. Labore elit placeat voordat hulle uitverkoop het, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan handwerk bier seitan klaargemaakte velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Navbar-skakels moet oplosbare ID-teikens hê. Byvoorbeeld, 'n <a href="#home">home</a>
moet ooreenstem met iets in die DOM soos <div id="home"></div>
.
:visible
-teikenelemente geïgnoreerTeikenelemente wat nie :visible
volgens jQuery is nie , sal geïgnoreer word en hul ooreenstemmende navigasie-items sal nooit uitgelig word nie.
Ongeag die implementeringsmetode, scrollspy vereis die gebruik van position: relative;
op die element waarop jy spioeneer. In die meeste gevalle is dit die <body>
. Wanneer u op ander elemente as die blaai <body>
, maak seker dat u 'n height
stel het en overflow-y: scroll;
toegepas het.
Om maklik scrollspy-gedrag by jou bobalknavigasie te voeg, voeg data-spy="scroll"
by die element waarop jy wil spioeneer (meestal sal dit die <body>
). Voeg dan die data-target
kenmerk by met die ID of klas van die ouerelement van enige Bootstrap- .nav
komponent.
Nadat jy position: relative;
jou CSS bygevoeg het, bel die scrollspy via JavaScript:
.scrollspy('refresh')
Wanneer jy scrollspy gebruik in samewerking met die byvoeging of verwydering van elemente uit die DOM, moet jy die herlaaimetode soos volg noem:
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-
, soos in data-offset=""
.
Naam | tipe | verstek | beskrywing |
---|---|---|---|
verreken | nommer | 10 | Pixels om van bo af te verreken wanneer die posisie van rolberekening bereken word. |
Soort gebeurtenis | Beskrywing |
---|---|
aktiveer.bs.scrollspy | Hierdie gebeurtenis brand wanneer 'n nuwe item deur die scrollspy geaktiveer word. |
Voeg vinnige, dinamiese oortjie-funksionaliteit by om deur vensters van plaaslike inhoud oor te skakel, selfs via aftrekkieslyste. Geneste oortjies word nie ondersteun nie.
Rou denim jy het seker nog nie van daardie jean kortbroek Austin gehoor nie. Nesciunt tofu stumptown aliqua, retro synth meester skoonmaak. Snor cliche tempor, williamsburg carles vegan helvetica. Reprehenderit slagter retro keffiyeh dreamcatcher synth. Cosby-trui eu banh mi, qui irure terry richardson ex inkvis. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan Amerikaanse klere, slagter 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.
Hierdie inprop brei die navigasiekomponent met oortjies uit om tabbare areas by te voeg.
Aktiveer tabbare oortjies via JavaScript (elke oortjie moet individueel geaktiveer word):
Jy kan individuele oortjies op verskeie maniere aktiveer:
Jy kan 'n oortjie- of pilnavigasie aktiveer sonder om enige JavaScript te skryf deur bloot 'n element te spesifiseer data-toggle="tab"
of data-toggle="pill"
op 'n element. Die byvoeging van die nav
en nav-tabs
klasse by die oortjie ul
sal die Bootstrap-oortjiestilering toepas , terwyl die byvoeging van die nav
en nav-pills
klasse pilstilering sal toepas .
Om oortjies te laat vervaag, voeg .fade
by elke .tab-pane
. Die eerste oortjiepaneel moet ook .in
die aanvanklike inhoud sigbaar maak.
$().tab
Aktiveer 'n oortjie-element en inhoudhouer. Tab moet óf 'n data-target
óf 'n href
teiken 'n houer nodus in die DOM hê. In die bogenoemde voorbeelde is die oortjies die <a>
s met data-toggle="tab"
eienskappe.
.tab('show')
Kies die gegewe oortjie en wys die verwante inhoud daarvan. Enige ander oortjie wat voorheen gekies is, word ongekies en die geassosieerde inhoud daarvan word versteek. Keer terug na die beller voordat die oortjie-venster werklik gewys is (dws voor die shown.bs.tab
gebeurtenis plaasvind).
Wanneer 'n nuwe oortjie gewys word, begin die gebeure in die volgende volgorde:
hide.bs.tab
(op die huidige aktiewe oortjie)show.bs.tab
(op die om te wys-oortjie)hidden.bs.tab
(op die vorige aktiewe oortjie, dieselfde een as vir die hide.bs.tab
geleentheid)shown.bs.tab
(op die nuut-aktiewe oortjie wat pas gewys is, dieselfde een as vir die show.bs.tab
geleentheid)As geen oortjie reeds aktief was nie, sal die hide.bs.tab
en hidden.bs.tab
gebeure nie geaktiveer word nie.
Soort gebeurtenis | Beskrywing |
---|---|
show.bs.tab | Hierdie gebeurtenis begin op oortjievertoning, maar voordat die nuwe oortjie gewys is. Gebruik event.target en event.relatedTarget om onderskeidelik die aktiewe oortjie en die vorige aktiewe oortjie (indien beskikbaar) te teiken. |
getoon.bs.tab | Hierdie gebeurtenis begin op oortjievertoning nadat 'n oortjie gewys is. Gebruik event.target en event.relatedTarget om onderskeidelik die aktiewe oortjie en die vorige aktiewe oortjie (indien beskikbaar) te teiken. |
versteek.bs.tab | Hierdie gebeurtenis begin wanneer 'n nuwe oortjie gewys moet word (en dus moet die vorige aktiewe oortjie versteek word). Gebruik event.target en event.relatedTarget om onderskeidelik die huidige aktiewe oortjie en die nuwe wat binnekort aktief sal wees te teiken. |
verborge.bs.tab | Hierdie gebeurtenis begin nadat 'n nuwe oortjie gewys is (en dus word die vorige aktiewe oortjie versteek). Gebruik event.target en event.relatedTarget om onderskeidelik die vorige aktiewe oortjie en die nuwe aktiewe oortjie te teiken. |
Geïnspireer deur die uitstekende jQuery.tipsy-inprop geskryf deur Jason Frame; Tooltips is 'n opgedateerde weergawe wat nie op beelde staatmaak nie, gebruik CSS3 vir animasies en data-kenmerke vir plaaslike titelberging.
Gereedskapwenke met titels van geen lengte word nooit vertoon nie.
Beweeg oor die skakels hieronder om nutswenke te sien:
Styf broek volgende vlak keffiyeh jy het seker nog nie van hulle gehoor nie. Fotohokkie baard rou denim boekdruk vegan messenger bag stumptown. Plaas-tot-tafel seitan, mcsweeney's fixie volhoubare quinoa 8-bis Amerikaanse klere het 'n terry richardson viniel chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, vier loko mcsweeney's reinig vegan chambray. 'n Werklik ironiese ambagsman wat ook al keytar , scenester plaas-tot-tafel banksy Austin twitter handvat freegan cred rou denim enkel-oorsprong koffie virale.
Vier opsies is beskikbaar: bo-, regs-, onder- en linksbelyn.
Vir prestasieredes is die Tooltip en Popover-data-api's ingeskryf, wat beteken dat jy dit self moet inisialiseer .
Een manier om alle gereedskapwenke op 'n bladsy te inisialiseer, is om hulle volgens hul data-toggle
kenmerk te kies:
Die tooltip-inprop genereer inhoud en opmaak op aanvraag, en plaas by verstek gereedskapwenke na hul snellerelement.
Aktiveer die nutswenk via JavaScript:
Die vereiste opmaak vir 'n nutswenk is slegs 'n data
kenmerk en title
op die HTML-element wil jy 'n nutswenk hê. Die gegenereerde opmaak van 'n nutswenk is redelik eenvoudig, alhoewel dit 'n posisie vereis (by verstek gestel top
deur die inprop).
Soms wil jy 'n nutswenk by 'n hiperskakel voeg wat verskeie reëls omvou. Die standaardgedrag van die tooltip-inprop is om dit horisontaal en vertikaal te sentreer. Voeg white-space: nowrap;
by jou ankers om dit te vermy.
Wanneer u gereedskapwenke op elemente binne 'n .btn-group
of 'n .input-group
, of op tabelverwante elemente ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, <tfoot>
) gebruik, sal u die opsie (hieronder gedokumenteer) moet spesifiseer container: 'body'
om ongewenste newe-effekte te vermy (soos die element wat wyer word en/ of sy afgeronde hoeke verloor wanneer die nutswenk geaktiveer word).
Vir gebruikers wat met 'n sleutelbord navigeer, en in die besonder gebruikers van ondersteunende tegnologieë, moet jy slegs gereedskapwenke by sleutelbordfokusbare elemente soos skakels, vormkontroles of enige arbitrêre element met 'n tabindex="0"
kenmerk voeg.
Om 'n nutswenk by 'n disabled
of .disabled
element te voeg, plaas die element binne-in 'n <div>
en pas die nutswenk <div>
eerder daarop toe.
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-
, soos in data-animation=""
.
Naam | Tik | Verstek | Beskrywing |
---|---|---|---|
animasie | boolean | waar | Pas 'n CSS-vervaag-oorgang toe op die nutswenk |
houer | tou | onwaar | onwaar | Voeg die nutswenk by 'n spesifieke element. Voorbeeld: |
vertraging | nommer | voorwerp | 0 | Vertraag om die nutswenk (ms) te wys en weg te steek - is nie van toepassing op handmatige snellertipe nie As 'n nommer verskaf word, word vertraging toegepas op beide versteek/wys Voorwerpstruktuur is: |
html | boolean | onwaar | Voeg HTML in die nutswenk in. Indien onwaar, sal jQuery se text metode gebruik word om inhoud in die DOM in te voeg. Gebruik teks as jy bekommerd is oor XSS-aanvalle. |
plasing | tou | funksie | 'Top' | Hoe om die nutswenk te posisioneer - bo | onderste | links | regs | outo. Wanneer 'n funksie gebruik word om die plasing te bepaal, word dit genoem met die tooltip DOM node as sy eerste argument en die sneller element DOM node as sy tweede. Die |
keurder | string | onwaar | As 'n kieser verskaf word, sal tooltip-objekte na die gespesifiseerde teikens gedelegeer word. In die praktyk word dit gebruik om dinamiese HTML-inhoud in staat te stel om nutswenke by te voeg. Sien hierdie en 'n insiggewende voorbeeld . |
sjabloon | string | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Baseer HTML om te gebruik wanneer die nutswenk geskep word. Die tooltip's
Die buitenste omhulselelement moet die |
titel | tou | funksie | '' | Verstek titelwaarde as As 'n funksie gegee word, sal dit opgeroep word met sy |
sneller | string | 'sweef fokus' | Hoe tooltip geaktiveer word - klik | beweeg | fokus | handleiding. Jy kan verskeie snellers slaag; skei hulle met 'n spasie. manual kan nie met enige ander sneller gekombineer word nie. |
uitsigpoort | tou | voorwerp | funksie | { selector: 'liggaam', opvulling: 0 } | Hou die nutswenk binne die grense van hierdie element. Voorbeeld: As 'n funksie gegee word, word dit opgeroep met die snellerelement DOM-node as sy enigste argument. Die |
Opsies vir individuele gereedskapwenke kan alternatiewelik gespesifiseer word deur die gebruik van data-kenmerke, soos hierbo verduidelik.
$().tooltip(options)
Heg 'n nutswenk-hanteerder aan 'n elementversameling.
.tooltip('show')
Onthul 'n element se nutswenk. Keer terug na die oproeper voordat die nutswenk werklik gewys is (dws voor die shown.bs.tooltip
gebeurtenis plaasvind). Dit word beskou as 'n "handmatige" aktiveer van die nutswenk. Gereedskapwenke met titels van geen lengte word nooit vertoon nie.
.tooltip('hide')
Versteek 'n element se nutswenk. Keer terug na die oproeper voordat die nutswenk eintlik versteek is (dws voor die hidden.bs.tooltip
gebeurtenis plaasvind). Dit word beskou as 'n "handmatige" aktiveer van die nutswenk.
.tooltip('toggle')
Wissel 'n element se nutswenk. Keer terug na die oproeper voordat die nutswenk werklik gewys of versteek is (dws voordat die shown.bs.tooltip
of hidden.bs.tooltip
gebeurtenis plaasvind). Dit word beskou as 'n "handmatige" aktiveer van die nutswenk.
.tooltip('destroy')
Versteek en vernietig 'n element se nutswenk. Gereedskapwenke wat delegering gebruik (wat met die selector
opsie geskep word ) kan nie individueel op afstammelinge-snellerelemente vernietig word nie.
Soort gebeurtenis | Beskrywing |
---|---|
wys.bs.nutspunt | Hierdie gebeurtenis begin onmiddellik wanneer die show instansiemetode geroep word. |
gewys.bs.nutspunt | Hierdie gebeurtenis word afgevuur wanneer die nutswenk vir die gebruiker sigbaar gemaak is (sal wag vir CSS-oorgange om te voltooi). |
versteek.bs.nutspunt | Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hide instansiemetode geroep is. |
versteekte.bs.nutspunt | Hierdie gebeurtenis word afgevuur wanneer die nutswenk klaar vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi). |
ingevoeg.bs.nutstip | Hierdie gebeurtenis word afgevuur na die show.bs.tooltip gebeurtenis wanneer die nutswenk-sjabloon by die DOM gevoeg is. |
Voeg klein oorlegsels van inhoud, soos dié op die iPad, by enige element om sekondêre inligting te huisves.
Popovers waarvan beide titel en inhoud geen lengte het nie, word nooit vertoon nie.
Popovers vereis dat die tooltip-inprop by jou weergawe van Bootstrap ingesluit moet word.
Vir prestasieredes is die Tooltip en Popover-data-api's ingeskryf, wat beteken dat jy dit self moet inisialiseer .
Een manier om alle opspringers op 'n bladsy te inisialiseer, is om hulle volgens hul data-toggle
kenmerk te kies:
Wanneer u opspringers op elemente binne 'n .btn-group
of 'n .input-group
, of op tabelverwante elemente ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
) gebruik, moet u die opsie container: 'body'
(hieronder gedokumenteer) spesifiseer om ongewenste newe-effekte te vermy (soos die element wat wyer word en/ of sy afgeronde hoeke verloor wanneer die popover geaktiveer word).
Om 'n pop-over by 'n disabled
of .disabled
element te voeg, plaas die element binne-in 'n <div>
en pas die popover daarop toe <div>
.
Soms wil jy 'n popover by 'n hiperskakel voeg wat verskeie reëls omvou. Die standaardgedrag van die popover-inprop is om dit horisontaal en vertikaal te sentreer. Voeg white-space: nowrap;
by jou ankers om dit te vermy.
Vier opsies is beskikbaar: bo-, regs-, onder- en linksbelyn.
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.
Gebruik die focus
sneller om popovers af te maak met die volgende klik wat die gebruiker maak.
Vir behoorlike kruisblaaier- en kruisplatformgedrag, moet jy die <a>
merker gebruik, nie die <button>
merker nie, en jy moet ook die role="button"
en - tabindex
kenmerke insluit.
Aktiveer popovers via JavaScript:
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-
, soos in data-animation=""
.
Naam | Tik | Verstek | Beskrywing |
---|---|---|---|
animasie | boolean | waar | Pas 'n CSS-vervaag-oorgang toe op die popover |
houer | tou | onwaar | onwaar | Voeg die popover by 'n spesifieke element. Voorbeeld: |
inhoud | tou | funksie | '' | Verstek inhoudwaarde as As 'n funksie gegee word, sal dit genoem word met sy |
vertraging | nommer | voorwerp | 0 | Vertraag wys en verberg die popover (ms) - is nie van toepassing op handmatige snellertipe nie As 'n nommer verskaf word, word vertraging toegepas op beide versteek/wys Voorwerpstruktuur is: |
html | boolean | onwaar | Voeg HTML in die popover. Indien onwaar, sal jQuery se text metode gebruik word om inhoud in die DOM in te voeg. Gebruik teks as jy bekommerd is oor XSS-aanvalle. |
plasing | tou | funksie | 'reg' | Hoe om die popover te plaas - bo | onderste | links | regs | outo. Wanneer 'n funksie gebruik word om die plasing te bepaal, word dit opgeroep met die popover DOM-nodus as sy eerste argument en die snellerelement DOM-nodus as sy tweede. Die |
keurder | string | onwaar | As 'n kieser verskaf word, sal opspring-objekte na die gespesifiseerde teikens gedelegeer word. In die praktyk word dit gebruik om dinamiese HTML-inhoud in staat te stel om popovers by te voeg. Sien hierdie en 'n insiggewende voorbeeld . |
sjabloon | string | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Baseer HTML om te gebruik wanneer die popover geskep word. Die popover's Die popover's
Die buitenste omhulselelement moet die |
titel | tou | funksie | '' | Verstek titelwaarde as As 'n funksie gegee word, sal dit genoem word met sy |
sneller | string | 'klik' | Hoe popover geaktiveer word - klik | beweeg | fokus | handleiding. Jy kan verskeie snellers slaag; skei hulle met 'n spasie. manual kan nie met enige ander sneller gekombineer word nie. |
uitsigpoort | tou | voorwerp | funksie | { selector: 'liggaam', opvulling: 0 } | Hou die popover binne die grense van hierdie element. Voorbeeld: As 'n funksie gegee word, word dit opgeroep met die snellerelement DOM-node as sy enigste argument. Die |
Opsies vir individuele popovers kan alternatiewelik gespesifiseer word deur die gebruik van data-kenmerke, soos hierbo verduidelik.
$().popover(options)
Inisialiseer popovers vir 'n elementversameling.
.popover('show')
Onthul 'n element se popover. Keer terug na die oproeper voordat die popover werklik gewys is (dws voor die shown.bs.popover
gebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die popover. Popovers waarvan beide titel en inhoud geen lengte het nie, word nooit vertoon nie.
.popover('hide')
Versteek 'n element se popover. Keer terug na die beller voordat die popover eintlik versteek is (dws voor die hidden.bs.popover
gebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die popover.
.popover('toggle')
Wissel 'n element se popover. Keer terug na die beller voordat die popover werklik gewys of versteek is (dws voordat die shown.bs.popover
of hidden.bs.popover
gebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die popover.
.popover('destroy')
Versteek en vernietig 'n element se popover. Popovers wat delegering gebruik (wat met die selector
opsie geskep word ) kan nie individueel op afstammelinge-snellerelemente vernietig word nie.
Soort gebeurtenis | Beskrywing |
---|---|
show.bs.popover | Hierdie gebeurtenis begin onmiddellik wanneer die show instansiemetode geroep word. |
gewys.bs.popover | Hierdie gebeurtenis word afgevuur wanneer die opspringer sigbaar gemaak is vir die gebruiker (sal wag vir CSS-oorgange om te voltooi). |
versteek.bs.popover | Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hide instansiemetode geroep is. |
versteekte.bs.popover | Hierdie gebeurtenis word afgevuur wanneer die popover klaar vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi). |
ingevoeg.bs.popover | Hierdie gebeurtenis word afgevuur na die show.bs.popover gebeurtenis wanneer die popover-sjabloon by die DOM gevoeg is. |
Voeg afwysfunksionaliteit by alle waarskuwingsboodskappe met hierdie inprop.
Wanneer 'n .close
knoppie gebruik word, moet dit die eerste kind van die wees .alert-dismissible
en geen teksinhoud mag daarvoor in die opmaak kom nie.
Verander dit en dat en probeer weer. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Voeg net data-dismiss="alert"
by jou toemaakknoppie om outomaties 'n waarskuwingssluitingfunksie te gee. Die sluiting van 'n waarskuwing verwyder dit uit die DOM.
Om jou waarskuwings animasie te laat gebruik wanneer hulle toemaak, maak seker dat die .fade
en .in
klasse reeds op hulle toegepas is.
$().alert()
Laat 'n waarskuwing luister vir klikgebeurtenisse op afstammelinge elemente wat die data-dismiss="alert"
kenmerk het. (Nie nodig wanneer die data-api se outo-initialisasie gebruik word nie.)
$().alert('close')
Maak 'n waarskuwing toe deur dit uit die DOM te verwyder. As die .fade
en .in
klasse op die element teenwoordig is, sal die waarskuwing vervaag voordat dit verwyder word.
Bootstrap se waarskuwing-inprop stel 'n paar gebeurtenisse bloot om by waarskuwingsfunksies in te skakel.
Soort gebeurtenis | Beskrywing |
---|---|
sluit.bs.waarskuwing | Hierdie gebeurtenis begin onmiddellik wanneer die close instansiemetode geroep word. |
gesluit.bs.waarskuwing | Hierdie gebeurtenis word afgevuur wanneer die waarskuwing gesluit is (sal wag vir CSS-oorgange om te voltooi). |
Doen meer met knoppies. Beheer knoppie state of skep groepe knoppies vir meer komponente soos nutsbalke.
Firefox bly in beheertoestande (gestremdheid en kontrolering) oor bladsyvragte . 'n Oplossing hiervoor is om te gebruik autocomplete="off"
. Sien Mozilla fout #654072 .
Voeg data-loading-text="Loading..."
by om 'n laaitoestand op 'n knoppie te gebruik.
Hierdie kenmerk is opgeskort sedert v3.3.5 en is in v4 verwyder.
Ter wille van hierdie demonstrasie gebruik ons data-loading-text
en $().button('loading')
, maar dit is nie die enigste toestand wat jy kan gebruik nie. Sien meer hieroor hieronder in die $().button(string)
dokumentasie .
Voeg data-toggle="button"
by om skakeling op 'n enkele knoppie te aktiveer.
.active
enaria-pressed="true"
Vir vooraf-geskakelde knoppies moet jy die .active
klas en die aria-pressed="true"
kenmerk by die button
jouself voeg.
Voeg data-toggle="buttons"
by 'n .btn-group
bevat-merkblokkie of radio-insette om skakeling in hul onderskeie style moontlik te maak.
.active
Vir voorafgeselekteerde opsies moet jy self die .active
klas by die insette voeg label
.
As die gemerkte toestand van 'n merkblokkie-knoppie opgedateer word sonder om 'n click
gebeurtenis op die knoppie af te vuur (bv. via <input type="reset">
of deur die checked
eienskap van die invoer te stel), sal jy self die .active
klas op die invoer's moet skakel label
.
$().button('toggle')
Wissel stootstatus. Gee die knoppie die voorkoms dat dit geaktiveer is.
$().button('reset')
Stel knoppiestatus terug - ruil teks na oorspronklike teks. Hierdie metode is asynchronies en keer terug voordat die terugstelling werklik voltooi is.
$().button(string)
Ruil teks om na enige data-gedefinieerde tekstoestand.
Buigsame inprop wat 'n handvol klasse gebruik vir maklike wisselgedrag.
Invou vereis dat die oorgang-inprop by jou weergawe van Bootstrap ingesluit moet word.
Klik op die knoppies hieronder om 'n ander element te wys en te versteek via klasveranderinge:
.collapse
verberg inhoud.collapsing
word tydens oorgange toegepas.collapse.in
inhoud toonJy kan 'n skakel met die href
kenmerk gebruik, of 'n knoppie met die data-target
kenmerk. In beide gevalle word die data-toggle="collapse"
vereis.
Brei die verstek invougedrag uit om 'n trekklavier met die paneelkomponent te skep.
Dit is ook moontlik om s uit te ruil .panel-body
met .list-group
s.
Maak seker dat jy aria-expanded
by die kontrole-element voeg. Hierdie kenmerk definieer eksplisiet die huidige toestand van die opvoubare element aan skermlesers en soortgelyke hulptegnologieë. As die opvoubare element by verstek gesluit is, moet dit 'n waarde van aria-expanded="false"
. As jy die opvoubare element gestel het om by verstek oop te wees deur die in
klas te gebruik, stel aria-expanded="true"
eerder op die kontrole. Die inprop sal hierdie kenmerk outomaties wissel op grond van of die opvoubare element oop of toegemaak is of nie.
Verder, as jou beheerelement 'n enkele opvoubare element teiken – dws die data-target
kenmerk wys na 'n id
keurder - kan jy 'n bykomende aria-controls
kenmerk by die beheerelement voeg, wat die id
van die opvoubare element bevat. Moderne skermlesers en soortgelyke ondersteunende tegnologieë maak gebruik van hierdie kenmerk om gebruikers van bykomende kortpaaie te voorsien om direk na die opvoubare element self te navigeer.
Die ineenstorting-inprop gebruik 'n paar klasse om die swaar opheffing te hanteer:
.collapse
verberg die inhoud.collapse.in
wys die inhoud.collapsing
word bygevoeg wanneer die oorgang begin, en verwyder wanneer dit klaar isHierdie klasse kan gevind word in component-animations.less
.
Voeg net data-toggle="collapse"
en a data-target
by die element om outomaties beheer van 'n opvoubare element toe te ken. Die data-target
kenmerk aanvaar 'n CSS-kieser om die ineenstorting op toe te pas. Maak seker dat jy die klas collapse
by die opvoubare element voeg. As jy wil hê dit moet verstek oopmaak, voeg die bykomende klas by in
.
Om trekklavieragtige groepbestuur by 'n opvoubare kontrole te voeg, voeg die data-kenmerk by data-parent="#selector"
. Verwys na die demo om dit in aksie te sien.
Aktiveer handmatig met:
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-
, soos in data-parent=""
.
Naam | tipe | verstek | beskrywing |
---|---|---|---|
ouer | keurder | onwaar | As 'n kieser verskaf word, sal alle opvoubare elemente onder die gespesifiseerde ouer gesluit word wanneer hierdie opvoubare item gewys word. (soortgelyk aan tradisionele trekklaviergedrag - dit hang af van die panel klas) |
wissel | boolean | waar | Wissel die opvoubare element by aanroep |
.collapse(options)
Aktiveer jou inhoud as 'n opvoubare element. Aanvaar 'n opsionele opsie object
.
.collapse('toggle')
Wissel 'n opvoubare element na gewys of versteek. Keer terug na die oproeper voordat die opvoubare element werklik gewys of versteek is (dws voordat die shown.bs.collapse
of hidden.bs.collapse
gebeurtenis plaasvind).
.collapse('show')
Toon 'n opvoubare element. Keer terug na die oproeper voordat die opvoubare element werklik gewys is (dws voor die shown.bs.collapse
gebeurtenis plaasvind).
.collapse('hide')
Versteek 'n opvoubare element. Keer terug na die oproeper voordat die opvoubare element werklik versteek is (dws voor die hidden.bs.collapse
gebeurtenis plaasvind).
Bootstrap se ineenstortingsklas ontbloot 'n paar gebeurtenisse vir inskakeling by ineenstortingsfunksionaliteit.
Soort gebeurtenis | Beskrywing |
---|---|
show.bs.ineenstorting | Hierdie gebeurtenis begin onmiddellik wanneer die show instansiemetode geroep word. |
gewys.bs.ineenstorting | Hierdie gebeurtenis word afgevuur wanneer 'n invou-element vir die gebruiker sigbaar gemaak is (sal wag vir CSS-oorgange om te voltooi). |
versteek.bs.ineenstort | Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hide metode geroep is. |
verborge.bs.ineenstorting | Hierdie gebeurtenis word afgevuur wanneer 'n invou-element vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi). |
'n Skyfievertoning-komponent vir fietsry deur elemente, soos 'n karrousel. Geneste karrousels word nie ondersteun nie.
Die karrousel-komponent voldoen oor die algemeen nie aan toeganklikheidstandaarde nie. As jy aan voldoening moet voldoen, oorweeg asseblief ander opsies om jou inhoud aan te bied.
Bootstrap gebruik uitsluitlik CSS3 vir sy animasies, maar Internet Explorer 8 en 9 ondersteun nie die nodige CSS-eienskappe nie. Daar is dus geen skyfie-oorgangsanimasies wanneer hierdie blaaiers gebruik word nie. Ons het doelbewus besluit om nie jQuery-gebaseerde terugval vir die oorgange in te sluit nie.
Die .active
klas moet by een van die skyfies gevoeg word. Andersins sal die karrousel nie sigbaar wees nie.
Die .glyphicon .glyphicon-chevron-left
en .glyphicon .glyphicon-chevron-right
klasse is nie noodwendig nodig vir die kontroles nie. Bootstrap bied .icon-prev
en .icon-next
as gewone unicode-alternatiewe.
Voeg byskrifte maklik by jou skyfies met die .carousel-caption
element binne enige .item
. Plaas omtrent enige opsionele HTML daarin en dit sal outomaties in lyn gebring en geformateer word.
Karrousels vereis die gebruik van 'n id
op die buitenste houer (die .carousel
) vir karrouselkontroles om behoorlik te funksioneer. Wanneer u veelvuldige karrousels byvoeg, of wanneer u 'n karrousel se verander id
, moet u die relevante kontroles opdateer.
Gebruik data-kenmerke om die posisie van die karrousel maklik te beheer. data-slide
aanvaar die sleutelwoorde prev
of next
, wat die skuifposisie relatief tot sy huidige posisie verander. Alternatiewelik, gebruik data-slide-to
om 'n rou skyfie-indeks na die karrousel deur te data-slide-to="2"
gee, wat die skyfieposisie verskuif na 'n spesifieke indeks wat begin met 0
.
Die data-ride="carousel"
kenmerk word gebruik om 'n karrousel as animasie te merk vanaf bladsy laai. Dit kan nie in kombinasie met (oortollige en onnodige) eksplisiete JavaScript-inisialisering van dieselfde karrousel gebruik word nie.
Bel karrousel handmatig met:
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-
, soos in data-interval=""
.
Naam | tipe | verstek | beskrywing |
---|---|---|---|
interval | nommer | 5000 | Die tyd om te vertraag tussen die outomatiese fietsry van 'n item. As dit vals is, sal die karrousel nie outomaties loop nie. |
pouse | tou | nul | "sweef" | As dit op gestel is "hover" , onderbreek die fietsry van die karrousel aan mouseenter en hervat die fietsry van die karrousel aan mouseleave . As dit op gestel is null , sal dit nie onderbreek word deur oor die karrousel te beweeg nie. |
toevou | boolean | waar | Of die karrousel aanhoudend moet fietsry of harde stops moet hê. |
sleutelbord | boolean | waar | Of die karrousel op sleutelbordgebeure moet reageer. |
.carousel(options)
Inisialiseer die karrousel met 'n opsionele opsies object
en begin deur items ry.
.carousel('cycle')
Blaai deur die karrousel-items van links na regs.
.carousel('pause')
Stop die karrousel om deur items te fiets.
.carousel(number)
Sit die karrousel na 'n spesifieke raam (0 gebaseer, soortgelyk aan 'n skikking).
.carousel('prev')
Blaai na die vorige item.
.carousel('next')
Blaai na die volgende item.
Bootstrap se karrouselklas stel twee gebeurtenisse bloot vir inhaak by karrouselfunksionaliteit.
Albei geleenthede het die volgende bykomende eienskappe:
direction
: Die rigting waarin die karrousel gly (óf "left"
óf "right"
).relatedTarget
: Die DOM-element wat in plek geskuif word as die aktiewe item.Alle karrouselgebeurtenisse word op die karrousel self afgevuur (dws by die <div class="carousel">
).
Soort gebeurtenis | Beskrywing |
---|---|
slide.bs.karrousel | Hierdie gebeurtenis brand onmiddellik wanneer die slide instansiemetode aangeroep word. |
gly.bs.karrousel | Hierdie gebeurtenis word afgevuur wanneer die karrousel sy skyfie-oorgang voltooi het. |
Die affix-inprop position: fixed;
skakel aan en af, wat die effek wat met position: sticky;
. Die subnavigasie aan die regterkant is 'n lewendige demonstrasie van die affix-inprop.
Gebruik die affix-inprop via data-kenmerke of handmatig met jou eie JavaScript. In beide situasies moet jy CSS verskaf vir die posisionering en breedte van jou aangehegte inhoud.
Let wel: Moenie die aanbring-inprop gebruik op 'n element wat in 'n relatief geposisioneerde element voorkom nie, soos 'n getrekte of gedrukte kolom, as gevolg van 'n Safari-weergawe fout .
Die affix-inprop wissel tussen drie klasse, wat elkeen 'n spesifieke toestand verteenwoordig: .affix
, .affix-top
, en .affix-bottom
. Jy moet self die style verskaf, met die uitsondering van position: fixed;
op .affix
, vir hierdie klasse (onafhanklik van hierdie inprop) om die werklike posisies te hanteer.
Hier is hoe die affix-inprop werk:
.affix-top
om aan te dui dat die element in sy boonste posisie is. Op hierdie stadium is geen CSS-posisionering nodig nie..affix
vervang .affix-top
en stel position: fixed;
(verskaf deur Bootstrap se CSS)..affix
met .affix-bottom
. Aangesien afwykings opsioneel is, vereis die instelling van een dat u die toepaslike CSS instel. In hierdie geval, voeg by position: absolute;
wanneer nodig. Die inprop gebruik die data-kenmerk of JavaScript-opsie om te bepaal waar die element van daar af geplaas moet word.Volg die stappe hierbo om jou CSS vir enige van die gebruiksopsies hieronder te stel.
Om maklik aanbringgedrag by enige element te voeg, voeg net by data-spy="affix"
die element waarna jy wil spioeneer. Gebruik afwykings om te definieer wanneer om die vaspen van 'n element te wissel.
Bel die affix-inprop via JavaScript:
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-
, soos in data-offset-top="200"
.
Naam | tipe | verstek | beskrywing |
---|---|---|---|
verreken | nommer | funksie | voorwerp | 10 | Pixels om van die skerm af te verreken wanneer die posisie van rolberekening bereken word. As 'n enkele nommer verskaf word, sal die verrekening in beide bo- en onderrigtings toegepas word. Om 'n unieke, onderste en boonste offset te verskaf, verskaf net 'n voorwerp offset: { top: 10 } of offset: { top: 10, bottom: 5 } . Gebruik 'n funksie wanneer jy 'n offset dinamies moet bereken. |
teiken | kieser | node | jQuery element | die window voorwerp |
Spesifiseer die teikenelement van die aanhegsel. |
.affix(options)
Aktiveer jou inhoud as aangehegte inhoud. Aanvaar 'n opsionele opsie object
.
.affix('checkPosition')
Herbereken die toestand van die aanhegting gebaseer op die afmetings, posisie en rolposisie van die relevante elemente. Die .affix
, .affix-top
, en .affix-bottom
klasse word bygevoeg by of verwyder van die aangehegte inhoud volgens die nuwe toestand. Hierdie metode moet aangeroep word wanneer die afmetings van die aangehegte inhoud of die teikenelement verander word, om die korrekte posisionering van die aangehegte inhoud te verseker.
Bootstrap se affix-inprop stel 'n paar gebeurtenisse bloot om by affix-funksionaliteit in te skakel.
Soort gebeurtenis | Beskrywing |
---|---|
aanbring.bs.aanbring | Hierdie gebeurtenis brand onmiddellik voordat die element aangebring is. |
aangebring.bs.aanbring | Hierdie gebeurtenis word afgevuur nadat die element aangebring is. |
aanbring-top.bs.affix | Hierdie gebeurtenis brand onmiddellik voordat die element bo-aan aangebring is. |
aangebring-top.bs.affix | Hierdie gebeurtenis word afgevuur nadat die element bo-aan aangebring is. |
aanbring-bottom.bs.affix | Hierdie gebeurtenis brand onmiddellik voordat die element aangebring is-onder. |
aangebring-bottom.bs.affix | Hierdie gebeurtenis word afgevuur nadat die element onderaan aangebring is. |