JavaSkript
Bring de komponinten fan Bootstrap ta libben mei mear as in tsiental oanpaste jQuery-plugins. Meitsje se allegear maklik op, of ien foar ien.
Bring de komponinten fan Bootstrap ta libben mei mear as in tsiental oanpaste jQuery-plugins. Meitsje se allegear maklik op, of ien foar ien.
Plugins kinne yndividueel opnommen wurde (mei de yndividuele *.js
bestannen fan Bootstrap), of allegear tagelyk (brûkend bootstrap.js
of de minifisearre bootstrap.min.js
).
Beide bootstrap.js
en bootstrap.min.js
befetsje alle plugins yn ien bestân. Meitsje mar ien yn.
Guon plugins en CSS-komponinten binne ôfhinklik fan oare plugins. As jo plugins yndividueel opnimme, soargje derfoar dat jo dizze ôfhinklikens kontrolearje yn 'e dokuminten. Tink derom ek dat alle plugins ôfhinklik binne fan jQuery (dit betsjut dat jQuery moat wurde opnommen foar de plugin-bestannen). Rieplachtsje úsbower.json
om te sjen hokker ferzjes fan jQuery wurde stipe.
Jo kinne alle Bootstrap-plugins suver brûke fia de markup API sûnder ien inkelde line fan JavaScript te skriuwen. Dit is de earste-klasse API fan Bootstrap en soe jo earste konsideraasje wêze moatte by it brûken fan in plugin.
Dat sei, yn guon situaasjes kin it winsklik wêze om dizze funksjonaliteit út te skeakeljen. Dêrom jouwe wy ek de mooglikheid om it data-attribút API út te skeakeljen troch alle eveneminten op it dokumint mei nammespaasje te ûntbinen data-api
. Dit sjocht der sa út:
As alternatyf, om in spesifyk plugin te rjochtsjen, befetsje gewoan de namme fan 'e plugin as in nammeromte tegearre mei de data-api nammeromte sa:
Brûk gjin gegevensattributen fan meardere plugins op itselde elemint. Bygelyks, in knop kin net beide in tooltip hawwe en in modaal wikselje. Om dit te berikken, brûk in wrapping elemint.
Wy leauwe ek dat jo alle Bootstrap-plugins moatte kinne brûke suver fia de JavaScript API. Alle iepenbiere APIs binne single, chainable metoaden, en werom de kolleksje hannele op.
Alle metoaden moatte in opsjoneel opsjeobjekt akseptearje, in tekenrige dy't in bepaalde metoade rjochtet, of neat (wat in plugin inisjearret mei standertgedrach):
Elke plugin bleatstelt ek syn rauwe konstruktor op in Constructor
eigendom $.fn.popover.Constructor
:. As jo in bepaalde plugin-eksimplaar wolle krije, helje it dan direkt fan in elemint op: $('[rel="popover"]').data('popover')
.
Jo kinne de standertynstellingen foar in plugin feroarje troch it Constructor.DEFAULTS
objekt fan 'e plugin te feroarjen:
Soms is it nedich om Bootstrap-plugins te brûken mei oare UI-kaders. Yn dizze omstannichheden kinne nammeromte botsingen soms foarkomme. As dit bart, kinne jo .noConflict
de plugin oanroppe wêrfan jo de wearde weromsette wolle.
Bootstrap leveret oanpaste eveneminten foar de unike aksjes fan de measte plugins. Yn 't algemien komme dizze yn in ynfinityf en doedestiidsfoarm - wêrby't de ynfinityf (bgl. show
) oan it begjin fan in barren ynskeakele wurdt, en syn doetiidsfoarm (bgl. shown
) wurdt aktivearre by it foltôgjen fan in aksje.
Fanôf 3.0.0 binne alle Bootstrap-eveneminten mei nammenamme.
Alle infinitive eveneminten jouwe preventDefault
funksjonaliteit. Dit jout de mooglikheid om de útfiering fan in aksje te stopjen foardat it begjint.
De ferzje fan elk fan Bootstrap's jQuery-plugins kin tagonklik wurde fia it VERSION
eigendom fan 'e plugin's konstruktor. Bygelyks foar de tooltip-plugin:
De plugins fan Bootstrap falle net bysûnder sierlik werom as JavaScript is útskeakele. As jo yn dit gefal soarch hawwe oer de brûkersûnderfining, brûk <noscript>
dan om de situaasje (en hoe't jo JavaScript opnij ynskeakelje kinne) oan jo brûkers út te lizzen, en/of jo eigen oanpaste fallbacks ta te foegjen.
Bootstrap stipet gjin offisjeel JavaScript-biblioteken fan tredden lykas Prototype of jQuery UI. Nettsjinsteande .noConflict
barrens mei nammen, kinne d'r kompatibiliteitsproblemen wêze dy't jo sels moatte reparearje.
Foar ienfâldige oergongseffekten, befetsje transition.js
ien kear njonken de oare JS-bestannen. As jo de kompilearre (of minifisearre) brûke bootstrap.js
, is it net nedich om dit op te nimmen - it is der al.
Transition.js is in basishelper foar transitionEnd
eveneminten en ek in CSS-oergongemulator. It wurdt brûkt troch de oare plugins om te kontrolearjen op CSS-oergongsstipe en om hingjende oergongen te fangen.
Transysjes kinne globaal útskeakele wurde mei it folgjende JavaScript-snippet, dat moat komme neidat transition.js
(of bootstrap.js
of bootstrap.min.js
, sa't it gefal kin wêze) is laden:
Modalen binne streamlined, mar fleksibel, dialoochprompts mei de minimale fereaske funksjonaliteit en tûke standerts.
Wês wis dat jo gjin modal iepenje wylst in oare noch sichtber is. It sjen litte fan mear as ien modal tagelyk fereasket oanpaste koade.
Besykje altyd de HTML-koade fan in modale op in topnivo-posysje yn jo dokumint te pleatsen om te foarkommen dat oare komponinten it uterlik en/of funksjonaliteit fan 'e modal beynfloedzje.
D'r binne wat warskôgingen oangeande it brûken fan modalen op mobile apparaten. Sjoch ús browser-stipedokuminten foar details.
Troch hoe't HTML5 syn semantyk definiearret, hat it autofocus
HTML-attribút gjin effekt yn Bootstrap-modalen. Om itselde effekt te berikken, brûk wat oanpast JavaScript:
In werjûn modaal mei koptekst, lichem en set aksjes yn 'e fuottekst.
Skeakelje in modaal fia JavaScript troch op de knop hjirûnder te klikken. It sil nei ûnderen glide en ferdwine fan 'e boppekant fan' e side.
Wês wis dat jo tafoegje role="dialog"
en aria-labelledby="..."
, ferwizend nei de modale titel, nei .modal
, en role="document"
nei it .modal-dialog
sels.
Derneist kinne jo in beskriuwing jaan fan jo modale dialooch mei aria-describedby
op .modal
.
Ynbêde fan YouTube-fideo's yn modalen fereasket ekstra JavaScript net yn Bootstrap om automatysk ôfspieljen en mear te stopjen. Sjoch dizze nuttige Stack Overflow-post foar mear ynformaasje.
Modals hawwe twa opsjoneel maten, beskikber fia modifier klassen wurde pleatst op in .modal-dialog
.
Foar modalen dy't gewoan ferskine ynstee fan ferdwine om te besjen, ferwiderje de .fade
klasse fan jo modale markup.
Foar in profitearje fan de Bootstrap grid systeem binnen in modale, krekt nêst .row
s binnen de .modal-body
en dan brûk de normale grid systeem klassen.
Hawwe jo in boskje knoppen dy't allegear deselde modaal triggerje, gewoan mei wat oare ynhâld? Brûk event.relatedTarget
en HTML data-*
attributen (mooglik fia jQuery ) foar in fariearje de ynhâld fan de modale ôfhinklik fan hokker knop waard oanklikt. Sjoch de Modal Events-dokuminten foar details oer relatedTarget
,
De modale plugin skeakelet jo ferburgen ynhâld op oanfraach, fia gegevensattributen of JavaScript. It foeget ek ta .modal-open
oan it <body>
te oerskriuwen standert rôlje gedrach en genereart in .modal-backdrop
foar in foarsjen in klik gebiet foar it ôfwizen fan sjen litten modals as jo klikke bûten de modale.
Aktivearje in modaal sûnder JavaScript te skriuwen. Set data-toggle="modal"
op in controller-elemint, lykas in knop, tegearre mei in data-target="#foo"
of href="#foo"
om in spesifike modaal te rjochtsjen om te wikseljen.
Rop in modaal mei id myModal
mei ien line fan JavaScript:
Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-
, lykas yn data-backdrop=""
.
Namme | type | standert | beskriuwing |
---|---|---|---|
eftergrûn | boolean of de snaar'static' |
wier | Omfettet in modale eftergrûnelemint. As alternatyf, spesifisearje static foar in eftergrûn dy't de modaal net slút by klik. |
toetseboerd | boolean | wier | Slút de modale as escape-toets wurdt yndrukt |
sjen litte | boolean | wier | Toant de modal as inisjalisearre. |
ôfstân | paad | falsk | Dizze opsje is ôfret sûnt v3.3.0 en is fuortsmiten yn v4. Wy riede ynstee in gebrûk client-side sjabloanen of in gegevens binende ramt, of calling jQuery.load sels. As in URL op ôfstân wurdt levere, sil ynhâld ien kear laden wurde fia jQuery's |
.modal(options)
Aktivearret jo ynhâld as modaal. Akseptearret in opsjonele opsjes object
.
.modal('toggle')
Wizigje manuell in modaal. Keart werom nei de beller foardat de modal feitlik werjûn of ferburgen is (dat wol sizze foardat it shown.bs.modal
of hidden.bs.modal
barren bart).
.modal('show')
Iepenet in modaal mei de hân. Keart werom nei de beller foardat de modal wirklik werjûn is (dus foardat it shown.bs.modal
evenemint bart).
.modal('hide')
Ferberget in modaal mei de hân. Keart werom nei de beller foardat de modal eins ferburgen is (dus foardat it hidden.bs.modal
barren bart).
.modal('handleUpdate')
Past de posysjonearring fan 'e modale op 'e nij oan om in skúfbalke tsjin te gean yn gefal dat ien soe ferskine, wat de modale nei lofts soe meitsje.
Allinnich nedich as de hichte fan 'e modale feroaret wylst it iepen is.
De modale klasse fan Bootstrap bleatsteld in pear eveneminten foar heakjen oan modale funksjonaliteit.
Alle modale eveneminten wurde ûntslein op 'e modal sels (dus by de <div class="modal">
).
Event Type | Beskriuwing |
---|---|
show.bs.modal | Dit evenemint fjoer fuortendaliks as de show eksimplaar metoade wurdt oanroppen. As feroarsake troch in klik, is it oanklikte elemint beskikber as relatedTarget eigendom fan it evenemint. |
shown.bs.modal | Dit evenemint wurdt ûntslein as de modal sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). As feroarsake troch in klik, is it oanklikte elemint beskikber as relatedTarget eigendom fan it evenemint. |
hide.bs.modal | Dit barren wurdt fuortendaliks ûntslein as de hide eksimplaarmetoade oanroppen is. |
hidden.bs.modal | Dit evenemint wurdt ûntslein as de modal klear is mei ferburgen te wurden foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). |
loaded.bs.modal | Dit evenemint wurdt ûntslein as de modal ynhâld hat laden mei de remote opsje. |
Foegje dropdown-menu's ta oan hast alles mei dizze ienfâldige plugin, ynklusyf de navbar, ljeppers en pillen.
Fia gegevensattributen of JavaSkript skeakelt de dropdown-plugin ferburgen ynhâld (útklapmenu's) troch de .open
klasse te wikseljen op it item fan 'e âlderlist.
Op mobile apparaten, it iepenjen fan in dropdown foeget in .dropdown-backdrop
as tapgebiet ta foar it sluten fan dropdown-menu's as jo bûten it menu tikje, in eask foar juste iOS-stipe. Dit betsjut dat it wikseljen fan in iepen útklapmenu nei in oar útklapmenu in ekstra tap op mobyl fereasket.
Opmerking: it data-toggle="dropdown"
attribút wurdt fertroud foar it sluten fan dropdown-menu's op in applikaasjenivo, dus it is in goed idee om it altyd te brûken.
Taheakje data-toggle="dropdown"
oan in keppeling of knop om in dropdown te wikseljen.
Om URL's yntakt te hâlden mei keppelingsknoppen, brûk it data-target
attribút ynstee fan href="#"
.
Rop de dropdowns fia JavaScript:
data-toggle="dropdown"
noch nedichNettsjinsteande of jo jo dropdown fia JavaScript neame of ynstee de data-api brûke, data-toggle="dropdown"
is altyd fereaske om oanwêzich te wêzen op it trigger-elemint fan 'e dropdown.
Gjin
$().dropdown('toggle')
Skeakelt it dellûkmenu fan in opjûne navigaasjebalke of navigaasje mei ljeppers.
Alle dropdown-eveneminten wurde ûntslein op it âlderelemint fan .dropdown-menu
'e.
Alle dropdown-eveneminten hawwe in relatedTarget
eigenskip, waans wearde it wikseljende anker-elemint is.
Event Type | Beskriuwing |
---|---|
show.bs.dropdown | Dit evenemint fjoer fuortendaliks as de show eksimplaar metoade wurdt oanroppen. |
shown.bs.dropdown | Dit evenemint wurdt ûntslein as de dellûk sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen, om te foltôgjen). |
hide.bs.dropdown | Dit barren wurdt fuortendaliks ûntslein as de hide-eksimplaarmetoade oanroppen is. |
hidden.bs.dropdown | Dit barren wurdt ûntslein as it útklapmenu klear is ferburgen foar de brûker (sil wachtsje op CSS-oergongen, om te foltôgjen). |
De ScrollSpy-plugin is foar it automatysk bywurkjen fan nav-doelen basearre op scrollposysje. Rôlje it gebiet ûnder de navigaasjebalke en besjoch de aktive klasse feroarje. De dellûk-subitems sille ek markearre wurde.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi foardat se útferkocht qui. Tumblr pleats-tot-tafel fyts rjochten wat dan ek. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui jo hawwe wierskynlik net heard fan harren en cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa snor skateboard, adipisicing fugiat velit pitchfork baard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat fjouwer loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles net estetyske oefening quis gentrify. Brooklyn adipisicing craft bier vice keytar deserunt.
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard 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 est adipisicing. Consectetur nisi DIY minim messenger tas. Cred ex in, duorsume 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 irony, thundercats jo nei alle gedachten hawwe net heard fan harren consequat hoodie glutenfrije lo-fi fap aliquip. Labore elit placeat foardat se útferkocht binne, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft bier seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Navbar-keppelings moatte oplossbere id-doelen hawwe. Bygelyks, in <a href="#home">home</a>
moat oerienkomme mei wat yn 'e DOM lykas <div id="home"></div>
.
:visible
negearreDoel eleminten dy't net :visible
neffens jQuery sille wurde negearre en harren byhearrende nav items sille nea wurde markearre.
Nettsjinsteande de ymplemintaasjemetoade, scrollspy fereasket it gebrûk fan position: relative;
op it elemint wêrop jo bespionearje. Yn 'e measte gefallen is dit de <body>
. As scrollspying op oare eleminten as de <body>
, wês wis dat jo in height
set hawwe en overflow-y: scroll;
tapast.
Om maklik scrollspy-gedrach ta te foegjen oan jo topbalke-navigaasje, foegje data-spy="scroll"
jo ta oan it elemint wêrop jo wolle bispiede (meast typysk soe dit de <body>
). Foegje dan it data-target
attribút ta mei de ID of klasse fan it âlderelemint fan elke Bootstrap .nav
-komponint.
Nei it tafoegjen position: relative;
fan jo CSS, skilje de scrollspy fia JavaScript:
.scrollspy('refresh')
By it brûken fan scrollspy yn kombinaasje mei it tafoegjen of ferwiderjen fan eleminten út 'e DOM, moatte jo de ferfarskingsmetoade sa neame:
Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-
, lykas yn data-offset=""
.
Namme | type | standert | beskriuwing |
---|---|---|---|
offset | nûmer | 10 | Pixels om fan boppen ôf te kompensearjen by it berekkenjen fan posysje fan scroll. |
Event Type | Beskriuwing |
---|---|
activate.bs.scrollspy | Dit evenemint ûntspringt as in nij item wurdt aktivearre troch de scrollspy. |
Foegje rappe, dynamyske ljepperfunksjes ta oan oergong troch ruten fan lokale ynhâld, sels fia dellûkmenu's. Neste ljeppers wurde net stipe.
Raw denim jo nei alle gedachten hawwe net heard fan harren jeans shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip plak foar salvia cillum iphone. Seitan aliquip quis cardigan american apparel, slachter 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.
Dizze plugin wreidet de ljepblêdnavigaasjekomponint út om ljepperbere gebieten ta te foegjen.
Ljepblêden ynskeakelje fia JavaScript (elke ljepper moat yndividueel aktivearre wurde):
Jo kinne yndividuele ljeppers op ferskate manieren aktivearje:
Jo kinne in ljepper of pilnavigaasje aktivearje sûnder JavaScript te skriuwen troch gewoan oan te jaan data-toggle="tab"
of data-toggle="pill"
op in elemint. It tafoegjen fan de klassen nav
en nav-tabs
oan it ljepblêd sil de stylingul
fan it ljepblêd Bootstrap tapasse , wylst it tafoegjen fan de en klassen sil pilstyling tapasse .nav
nav-pills
Om ljeppers yn te ferdwinen, foegje .fade
jo ta oan elk .tab-pane
. It earste ljepblêd moat ek .in
de earste ynhâld sichtber meitsje moatte.
$().tab
Aktivearret in ljepper elemint en ynhâld container. De ljepper moat in data-target
of in href
rjochte op in kontenerknooppunt hawwe yn 'e DOM. Yn 'e boppesteande foarbylden binne de ljeppers de <a>
s mei data-toggle="tab"
attributen.
.tab('show')
Selekteart de opjûne ljepper en lit de byhearrende ynhâld sjen. Elke oare ljepper dy't earder selektearre is wurdt net selektearre en de byhearrende ynhâld wurdt ferburgen. Keart werom nei de beller foardat it ljepblêd wirklik werjûn is (dus foardat it shown.bs.tab
barren bart).
By it werjaan fan in nije ljepper, de barrens fjoer yn 'e folgjende folchoarder:
hide.bs.tab
(op it aktive ljepblêd)show.bs.tab
(op it te sjen ljepblêd)hidden.bs.tab
(op 'e foarige aktive ljepper, deselde as foar it hide.bs.tab
evenemint)shown.bs.tab
(op it krekt-aktive ljepblêd, deselde as foar it show.bs.tab
evenemint)As der gjin ljepper wie al aktyf, dan sil de hide.bs.tab
en hidden.bs.tab
eveneminten net ûntslein wurde.
Event Type | Beskriuwing |
---|---|
show.bs.tab | Dit evenemint ûntspringt op ljeppershow, mar foardat de nije ljepper is werjûn. Brûk event.target en event.relatedTarget om respektivelik de aktive ljepper en de foarige aktive ljepper (as beskikber) te rjochtsjen. |
shown.bs.tab | Dit evenemint ûntspringt op ljepper sjen nei in ljepper is werjûn. Brûk event.target en event.relatedTarget om respektivelik de aktive ljepper en de foarige aktive ljepper (as beskikber) te rjochtsjen. |
hide.bs.tab | Dit barren ûntspringt as in nije ljepper werjûn wurde moat (en dus moat de foarige aktive ljepper ferburgen wurde). Brûk event.target en event.relatedTarget om respektivelik de aktive ljepper te rjochtsjen en de nije ljepper dy't gau aktyf is. |
hidden.bs.tab | Dit barren ûntspringt neidat in nije ljepper wurdt werjûn (en dus is de foarige aktive ljepper ferburgen). Brûk event.target en event.relatedTarget om respektivelik de foarige aktive ljepper en de nije aktive ljepper te rjochtsjen. |
Ynspirearre troch de treflike jQuery.tipsy plugin skreaun troch Jason Frame; Tooltips binne in bywurke ferzje, dy't net fertrouwe op ôfbyldings, CSS3 brûke foar animaasjes, en data-attributen foar lokale titelopslach.
Tooltips mei titels fan nul lingte wurde nea werjûn.
Hoverje oer de keppelings hjirûnder om tooltips te sjen:
Strakke broek folgjende nivo keffiyeh jo hawwe wierskynlik net heard fan harren. Photo booth baard rau denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie duorsume quinoa 8-bit Amerikaanske klean hawwe in terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fjouwer loko mcsweeney's reinigje vegan chambray. In echt iroanysk ambachtsman wat keytar , scenester farm-to-table banksy Austin twitter handle freegan cred rauwe denim single-origin kofje virale.
Fjouwer opsjes binne beskikber: boppe, rjochts, ûnder, en lofts rjochte.
Foar prestaasjesredenen binne de Tooltip en Popover data-apis opt-in, wat betsjut dat jo se sels moatte inisjalisearje .
Ien manier om alle tooltips op in side te inisjalisearjen soe wêze om se te selektearjen troch har data-toggle
attribút:
De tooltip-plugin genereart ynhâld en markearring op fraach, en pleatst standert tooltips nei har trigger-elemint.
Trigger de tooltip fia JavaScript:
De fereaske markup foar in tooltip is allinich in data
attribút en title
op it HTML-elemint wolle jo in tooltip hawwe. De generearre markup fan in tooltip is frij ienfâldich, hoewol it in posysje fereasket (standert, ynsteld top
troch de plugin).
Soms wolle jo in tooltip tafoegje oan in hyperlink dy't meardere rigels omslacht. It standertgedrach fan 'e tooltip-plugin is om it horizontaal en fertikaal te sintrum. Foegje white-space: nowrap;
oan jo ankers om dit te foarkommen.
By it brûken fan tooltips op eleminten binnen in .btn-group
of in .input-group
, of op tabel-relatearre eleminten ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, <tfoot>
), moatte jo de opsje spesifisearje container: 'body'
(dokumintearre hjirûnder) om net winske side-effekten te foarkommen (lykas it elemint dat breder groeit en/ of syn rûne hoeken ferlieze as de tooltip wurdt aktivearre).
Foar brûkers dy't navigearje mei in toetseboerd, en yn it bysûnder brûkers fan assistinte technologyen, moatte jo allinich tooltips tafoegje oan toetseboerd-fokusbere eleminten lykas keppelings, formulierkontrôles, of in willekeurige elemint mei in tabindex="0"
attribút.
Om in tooltip ta te foegjen oan in disabled
of .disabled
elemint, set it elemint yn in <div>
en tapasse de tooltip dêrop yn <div>
plak.
Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-
, lykas yn data-animation=""
.
Namme | Type | Standert | Beskriuwing |
---|---|---|---|
animaasje | boolean | wier | Tapasse in CSS-fade-oergong op de tooltip |
kontener | string | falsk | falsk | Foegje de tooltip ta oan in spesifyk elemint. Foarbyld |
fertraging | nûmer | objekt | 0 | Fertrage it sjen en ferbergjen fan de tooltip (ms) - jildt net foar manuele triggertype As in nûmer wurdt levere, wurdt fertraging tapast op sawol hide / show Objektstruktuer is: |
html | boolean | falsk | Foegje HTML yn 'e tooltip. As it falsk is, text sil de metoade fan jQuery brûkt wurde om ynhâld yn 'e DOM yn te foegjen. Brûk tekst as jo soargen meitsje oer XSS-oanfallen. |
pleatsing | string | funksje | 'top' | Hoe kinne jo de tooltip pleatse - top | ûnderen | lofts | rjochts | auto. As in funksje brûkt wurdt om de pleatsing te bepalen, wurdt it neamd mei de tooltip DOM-knooppunt as syn earste argumint en it triggerelemint DOM-knooppunt as syn twadde. De |
selector | string | falsk | As in selector wurdt foarsjoen, sil tooltip objekten wurde delegearre oan de oantsjutte doelen. Yn 'e praktyk wurdt dit brûkt om dynamyske HTML-ynhâld yn te skeakeljen om tooltips tafoege te hawwen. Sjoch dit en in ynformatyf foarbyld . |
sjabloan | string | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Basis HTML om te brûken by it meitsjen fan de tooltip. De tooltip's
De bûtenste wrapper elemint moat hawwe de |
titel | string | funksje | '' | Standert titelwearde as As in funksje wurdt jûn, wurdt it neamd mei syn |
trekker | string | 'fokus fokus' | Hoe tooltip wurdt aktivearre - klik | sweef | fokus | hantlieding. Jo kinne meardere triggers trochjaan; skiede se mei in romte. manual kin net wurde kombinearre mei in oare trigger. |
viewport | string | objekt | funksje | { selector: 'body', padding: 0 } | Hâldt de tooltip binnen de grinzen fan dit elemint. Foarbyld: As in funksje wurdt jûn, wurdt it neamd mei it triggerelemint DOM-knooppunt as syn ienige argumint. De |
Opsjes foar yndividuele tooltips kinne alternatyf wurde oantsjutte troch it brûken fan gegevensattributen, lykas hjirboppe útlein.
$().tooltip(options)
Hechtet in tooltip handler oan in elemint kolleksje.
.tooltip('show')
Iepenet de tooltip fan in elemint. Keart werom nei de beller foardat de tooltip wirklik werjûn is (dus foardat it shown.bs.tooltip
barren bart). Dit wurdt beskôge as in "hânlieding" triggering fan de tooltip. Tooltips mei titels fan nul lingte wurde nea werjûn.
.tooltip('hide')
Ferberget de tooltip fan in elemint. Keart werom nei de beller foardat de tooltip eins ferburgen is (dus foardat it hidden.bs.tooltip
barren bart). Dit wurdt beskôge as in "hânlieding" triggering fan de tooltip.
.tooltip('toggle')
Skeakelt de tooltip fan in elemint. Keart werom nei de beller foardat de tooltip wirklik werjûn of ferburgen is (dus foardat it barren shown.bs.tooltip
of hidden.bs.tooltip
bart). Dit wurdt beskôge as in "hânlieding" triggering fan de tooltip.
.tooltip('destroy')
Ferberget en ferneatiget de tooltip fan in elemint. Tooltips dy't delegaasje brûke (dy't makke binne mei de selector
opsje ) kinne net yndividueel ferneatige wurde op ôfstammende trigger-eleminten.
Event Type | Beskriuwing |
---|---|
show.bs.tooltip | Dit evenemint fjoer fuortendaliks as de show eksimplaar metoade wurdt oanroppen. |
shown.bs.tooltip | Dit evenemint wurdt ûntslein as de tooltip sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). |
hide.bs.tooltip | Dit barren wurdt fuortendaliks ûntslein as de hide eksimplaarmetoade oanroppen is. |
hidden.bs.tooltip | Dit evenemint wurdt ûntslein as de tooltip klear is ferburgen foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). |
ynfoege.bs.tooltip | Dit evenemint wurdt ûntslein nei it show.bs.tooltip barren as de tooltip-sjabloan is tafoege oan de DOM. |
Foegje lytse overlays fan ynhâld ta, lykas dy op 'e iPad, oan elk elemint foar húsfesting fan sekundêre ynformaasje.
Popovers wêrfan sawol de titel as de ynhâld gjin lingte hawwe, wurde nea werjûn.
Popovers fereaskje dat de tooltip-plugin opnommen is yn jo ferzje fan Bootstrap.
Foar prestaasjesredenen binne de Tooltip en Popover data-apis opt-in, wat betsjut dat jo se sels moatte inisjalisearje .
Ien manier om alle popovers op in side te initialisearjen soe wêze om se te selektearjen troch har data-toggle
attribút:
By it brûken fan popovers op eleminten binnen in .btn-group
of in .input-group
, of op tabel-relatearre eleminten ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, <tfoot>
), moatte jo de opsje spesifisearje container: 'body'
(dokumintearre hjirûnder) om net winske side-effekten te foarkommen (lykas it elemint dat breder groeit en/ of syn rûne hoeken ferlieze as de popover wurdt trigger).
Om in popover ta te foegjen oan in disabled
of .disabled
elemint, set it elemint yn in <div>
en tapasse de popover dêr yn <div>
plak.
Soms wolle jo in popover tafoegje oan in hyperlink dy't meardere rigels wraps. It standertgedrach fan 'e popover-plugin is om it horizontaal en fertikaal te sintrum. Foegje white-space: nowrap;
oan jo ankers om dit te foarkommen.
Fjouwer opsjes binne beskikber: boppe, rjochts, ûnder, en lofts rjochte.
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.
Brûk de focus
trigger om popovers te ferwiderjen by de folgjende klik dy't de brûker makket.
Foar goed cross-browser en cross-platform gedrach moatte jo de <a>
tag brûke, net de <button>
tag, en jo moatte ek de role="button"
en tabindex
attributen opnimme.
Popovers ynskeakelje fia JavaScript:
Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-
, lykas yn data-animation=""
.
Namme | Type | Standert | Beskriuwing |
---|---|---|---|
animaasje | boolean | wier | Tapasse in CSS-fade-oergong op 'e popover |
kontener | string | falsk | falsk | Foegje de popover ta oan in spesifyk elemint. Foarbyld |
ynhâld | string | funksje | '' | Standert ynhâldwearde as As in funksje wurdt jûn, wurdt it neamd mei syn |
fertraging | nûmer | objekt | 0 | Fertraging fan it sjen en ferbergjen fan de popover (ms) - jildt net foar manuele triggertype As in nûmer wurdt levere, wurdt fertraging tapast op sawol hide / show Objektstruktuer is: |
html | boolean | falsk | Foegje HTML yn 'e popover. As it falsk is, text sil de metoade fan jQuery brûkt wurde om ynhâld yn 'e DOM yn te foegjen. Brûk tekst as jo soargen meitsje oer XSS-oanfallen. |
pleatsing | string | funksje | 'rjochts' | Hoe te pleatsen de popover - top | ûnderen | lofts | rjochts | auto. As in funksje brûkt wurdt om de pleatsing te bepalen, wurdt it neamd mei de popover DOM-knooppunt as earste argumint en it triggerelemint DOM-knooppunt as twadde. De |
selector | string | falsk | As in selector wurdt foarsjoen, sil popover objekten wurde delegearre oan de oantsjutte doelen. Yn 'e praktyk wurdt dit brûkt om dynamyske HTML-ynhâld yn te skeakeljen om popovers tafoege te hawwen. Sjoch dit en in ynformatyf foarbyld . |
sjabloan | string | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Basis HTML om te brûken by it meitsjen fan de popover. De popover's De popover's
De bûtenste wrapper elemint moat hawwe de |
titel | string | funksje | '' | Standert titelwearde as As in funksje wurdt jûn, wurdt it neamd mei syn |
trekker | string | 'klik' | Hoe popover wurdt aktivearre - klik | sweef | fokus | hantlieding. Jo kinne meardere triggers trochjaan; skiede se mei in romte. manual kin net wurde kombinearre mei in oare trigger. |
viewport | string | objekt | funksje | { selector: 'body', padding: 0 } | Hâldt de popover binnen de grinzen fan dit elemint. Foarbyld: As in funksje wurdt jûn, wurdt it neamd mei it triggerelemint DOM-knooppunt as syn ienige argumint. De |
Opsjes foar yndividuele popovers kinne alternatyf wurde oantsjutte troch it brûken fan gegevensattributen, lykas hjirboppe útlein.
$().popover(options)
Inisjalisearje popovers foar in elemint kolleksje.
.popover('show')
Bliuwt in popover fan in elemint. Keart werom nei de beller foardat de popover wirklik werjûn is (dus foardat it shown.bs.popover
evenemint bart). Dit wurdt beskôge as in "hânlieding" triggering fan 'e popover. Popovers wêrfan sawol de titel as de ynhâld gjin lingte hawwe, wurde nea werjûn.
.popover('hide')
Ferberget de popover fan in elemint. Keart werom nei de beller foardat de popover eins ferburgen is (dus foardat it hidden.bs.popover
barren plakfynt). Dit wurdt beskôge as in "hânlieding" triggering fan 'e popover.
.popover('toggle')
Skeakelt de popover fan in elemint. Keart werom nei de beller foardat de popover feitlik werjûn of ferburgen is (dus foardat it barren shown.bs.popover
of hidden.bs.popover
bart). Dit wurdt beskôge as in "hânlieding" triggering fan 'e popover.
.popover('destroy')
Ferberget en ferneatiget popover fan in elemint. Popovers dy't delegaasje brûke (dy't makke binne mei de selector
opsje ) kinne net yndividueel ferneatige wurde op neikommende trigger-eleminten.
Event Type | Beskriuwing |
---|---|
show.bs.popover | Dit evenemint fjoer fuortendaliks as de show eksimplaar metoade wurdt oanroppen. |
shown.bs.popover | Dit evenemint wurdt ûntslein as de popover sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). |
hide.bs.popover | Dit barren wurdt fuortendaliks ûntslein as de hide eksimplaarmetoade oanroppen is. |
hidden.bs.popover | Dit evenemint wurdt ûntslein as de popover klear is ferburgen foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). |
ynfoege.bs.popover | Dit evenemint wurdt ûntslein nei it show.bs.popover evenemint as it popover-sjabloan is tafoege oan de DOM. |
Foegje ûntslachfunksjonaliteit ta oan alle warskôgingsberjochten mei dizze plugin.
By it brûken fan in .close
knop, it moat wêze it earste bern fan de .alert-dismissible
en gjin tekst ynhâld meie komme foar it yn de markup.
Feroarje dit en dat en besykje it nochris. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Foegje gewoan ta data-dismiss="alert"
oan jo slute knop om automatysk in warskôging slute funksjonaliteit te jaan. It sluten fan in warskôging ferwideret it út de DOM.
Om jo warskôgings animaasje te brûken by it sluten, soargje derfoar dat se de .fade
en .in
klassen al op har tapast hawwe.
$().alert()
Makket in warskôging te harkjen nei klik-eveneminten op ôfstammende eleminten dy't it data-dismiss="alert"
attribút hawwe. (Net nedich by it brûken fan de automatyske inisjalisaasje fan de data-api.)
$().alert('close')
Slút in warskôging troch it te ferwiderjen fan 'e DOM. As de .fade
en .in
klassen binne oanwêzich op it elemint, de warskôging sil fade út foardat it wurdt fuortsmiten.
De warskôgingsplugin fan Bootstrap bleatstelt in pear eveneminten foar heakjen oan warskôgingsfunksjonaliteit.
Event Type | Beskriuwing |
---|---|
close.bs.alert | Dit evenemint fjoer fuortendaliks as de close eksimplaar metoade wurdt oanroppen. |
closed.bs.alert | Dit evenemint wurdt ûntslein as de warskôging is sletten (sil wachtsje op CSS-oergongen om te foltôgjen). |
Doch mear mei knoppen. Kontrolearje knop steaten of meitsje groepen fan knoppen foar mear komponinten lykas arkbalken.
Firefox bliuwt formulier kontrôle steaten (útskeakele en kontrolearre) oer sideladen . In oplossing foar dit is te brûken autocomplete="off"
. Sjoch Mozilla bug #654072 .
Taheakje data-loading-text="Loading..."
om in laden steat te brûken op in knop.
Dizze funksje is ôfret sûnt v3.3.5 en is fuortsmiten yn v4.
Om 'e wille fan dizze demonstraasje brûke wy data-loading-text
en $().button('loading')
, mar dat is net de ienige steat dy't jo brûke kinne. Sjoch mear hjiroer hjirûnder yn de $().button(string)
dokumintaasje .
Foegje data-toggle="button"
ta om wikseljen op ien knop te aktivearjen.
.active
enaria-pressed="true"
Foar foarôf wiksele knoppen moatte jo de .active
klasse en it aria-pressed="true"
attribút tafoegje oan button
josels.
Foegje ta data-toggle="buttons"
oan in .btn-group
karfakje of radio-ynputs om te wikseljen yn har respektive stilen.
.active
Foar foarselekteare opsjes moatte jo de .active
klasse sels tafoegje oan 'e ynfier label
.
As de kontrolearre steat fan in karfakje knop wurdt bywurke sûnder sjitten in click
evenemint op de knop (bgl. fia <input type="reset">
of fia it ynstellen fan it checked
eigendom fan de ynfier), Jo moatte wikselje de .active
klasse op de ynfier label
sels.
$().button('toggle')
Wizigje push-status. Jout de knop it uterlik dat it is aktivearre.
$().button('reset')
Reset knopstatus - wikselt tekst nei orizjinele tekst. Dizze metoade is asynchronous en komt werom foardat de weromsette eins foltôge is.
$().button(string)
Ruilet tekst nei alle gegevens definieare teksttastân.
Fleksibele plugin dy't in hânfol klassen brûkt foar maklik wikselgedrach.
Ynstoarten fereasket dat de transysje-plugin opnommen is yn jo ferzje fan Bootstrap.
Klikje op de knoppen hjirûnder om in oar elemint te sjen en te ferbergjen fia klassewizigingen:
.collapse
ferberget ynhâld.collapsing
wurdt tapast by oergongen.collapse.in
toant ynhâldJo kinne in keppeling brûke mei it href
attribút, of in knop mei it data-target
attribút. Yn beide gefallen data-toggle="collapse"
is it nedich.
Wreidzje it standert ynstoartgedrach út om in akkordeon te meitsjen mei it panielkomponint.
It is ek mooglik om s te wikseljen .panel-body
mei .list-group
s.
Wês wis dat jo tafoegje aria-expanded
oan it kontrôle elemint. Dit attribút definiearret eksplisyt de hjoeddeistige tastân fan it ynklapbere elemint oan skermlêzers en ferlykbere assistintetechnologyen. As it ynklapbere elemint standert sletten is, moat it in wearde hawwe fan aria-expanded="false"
. As jo it ynklapbere elemint ynsteld hawwe om standert iepen te wêzen mei de in
klasse, set aria-expanded="true"
dan op 'e kontrôle ynstee. De plugin sil dit attribút automatysk wikselje op basis fan oft it ynklapbere elemint al of net iepene of sluten is.
Derneist, as jo kontrôleelemint op in inkeld ynklapber elemint rjochtet - dws it data-target
attribút wiist nei in id
selektor - kinne jo in ekstra aria-controls
attribút tafoegje oan it kontrôleelemint, mei de id
fan it ynklapbere elemint. Moderne skermlêzers en ferlykbere assistinte technologyen meitsje gebrûk fan dit attribút om brûkers ekstra fluchtoetsen te jaan om direkt nei it ynklapbere elemint sels te navigearjen.
It ynstoartplugin brûkt in pear klassen om it swiere opheffing te behanneljen:
.collapse
ferberget de ynhâld.collapse.in
toant de ynhâld.collapsing
wurdt tafoege as de oergong begjint, en fuortsmiten as it klear isDizze klassen kinne fûn wurde yn component-animations.less
.
Foegje gewoan data-toggle="collapse"
en in data-target
oan it elemint ta om automatysk kontrôle fan in ynklapber elemint ta te jaan. It data-target
attribút akseptearret in CSS-selektor om de ynstoarting oan te passen. Wês wis dat jo de klasse tafoegje collapse
oan it ynklapbere elemint. As jo wolle dat it standert iepen is, foegje dan de ekstra klasse tain
.
Om akkordeon-like groepbehear ta te foegjen oan in ynklapbere kontrôle, foegje it data-attribút ta data-parent="#selector"
. Ferwize nei de demo om dit yn aksje te sjen.
Ynskeakelje manuell mei:
Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-
, lykas yn data-parent=""
.
Namme | type | standert | beskriuwing |
---|---|---|---|
âlder | selector | falsk | As in selector wurdt levere, dan sille alle ynklapbere eleminten ûnder de oantsjutte âlder wurde sletten as dit ynklapbere item wurdt werjûn. (fergelykber mei tradisjoneel akkordeongedrach - dit is ôfhinklik fan 'e panel klasse) |
wikselje | boolean | wier | Skeakelt it ynklapbere elemint by oprop |
.collapse(options)
Aktivearret jo ynhâld as in ynklapber elemint. Akseptearret in opsjonele opsjes object
.
.collapse('toggle')
Skeakelt in ynklapber elemint nei werjûn of ferburgen. Keart werom nei de beller foardat it ynklapbere elemint feitlik werjûn of ferburgen is (dus foardat it barren shown.bs.collapse
of hidden.bs.collapse
bart).
.collapse('show')
Toant in ynklapber elemint. Keart werom nei de beller foardat it ynklapbere elemint feitlik werjûn is (dus foardat it shown.bs.collapse
evenemint bart).
.collapse('hide')
Ferberget in ynklapber elemint. Keart werom nei de beller foardat it ynklapbere elemint eins ferburgen is (dus foardat it hidden.bs.collapse
barren bart).
De ynstoartingsklasse fan Bootstrap bleatstelt in pear eveneminten foar heakjen oan ynstoartingsfunksjonaliteit.
Event Type | Beskriuwing |
---|---|
show.bs.collapse | Dit evenemint fjoer fuortendaliks as de show eksimplaar metoade wurdt oanroppen. |
shown.bs.collapse | Dit barren wurdt ûntslein as in ynstoartelemint sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). |
hide.bs.collapse | Dit evenemint wurdt ûntslein fuortendaliks as de hide metoade is oanroppen. |
hidden.bs.collapse | Dit barren wurdt ûntslein as in ynstoartelemint is ferburgen foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). |
In slideshow-komponint foar it fytsen troch eleminten, lykas in karrousel. Neste carrousels wurde net stipe.
De karrouselkomponint foldocht oer it algemien net oan tagonklikheidsnoarmen. As jo konform moatte wêze, beskôgje dan oare opsjes foar it presintearjen fan jo ynhâld.
Bootstrap brûkt eksklusyf CSS3 foar har animaasjes, mar Internet Explorer 8 & 9 stypje de nedige CSS-eigenskippen net. Sa binne d'r gjin animaasjes foar slide-oergong by it brûken fan dizze browsers. Wy hawwe mei opsetsin besletten gjin jQuery-basearre fallbacks op te nimmen foar de oergongen.
De .active
klasse moat tafoege wurde oan ien fan de dia's. Oars sil de karrousel net sichtber wêze.
De .glyphicon .glyphicon-chevron-left
en .glyphicon .glyphicon-chevron-right
klassen binne net needsaaklik nedich foar de kontrôles. Bootstrap biedt .icon-prev
en .icon-next
as gewoane unicode-alternativen.
Foegje maklik titels ta oan jo dia's mei it .carousel-caption
elemint yn elke .item
. Plak sawat elke opsjonele HTML dêryn en it sil automatysk ôfstimd en opmakke wurde.
Carousels fereaskje it brûken fan in id
op 'e bûtenste kontener (de .carousel
) foar carousel kontrôles in funksjonearje goed. As jo meardere carrousels tafoegje, of as jo in karrousel feroarje id
, wês wis dat jo de relevante kontrôles bywurkje.
Brûk gegevensattributen om de posysje fan 'e karrousel maklik te kontrolearjen. data-slide
akseptearret de kaaiwurden prev
of next
, dy't de slideposysje feroaret relatyf oan syn hjoeddeistige posysje. As alternatyf, brûk data-slide-to
om in rûge dia-yndeks troch te jaan oan de karrousel data-slide-to="2"
, dy't de dia-posysje ferpleatst nei in bepaalde yndeks dy't begjint mei0
.
It data-ride="carousel"
attribút wurdt brûkt om in karrousel te markearjen as animaasje te begjinnen by it laden fan siden. It kin net brûkt wurde yn kombinaasje mei (oerstallige en net nedich) eksplisite JavaSkript inisjalisaasje fan deselde carousel.
Rop karrousel manuell mei:
Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-
, lykas yn data-interval=""
.
Namme | type | standert | beskriuwing |
---|---|---|---|
tuskenskoft | nûmer | 5000 | De hoemannichte tiid om te fertrage tusken it automatysk fytsen fan in item. As falsk, sil carousel net automatysk fytse. |
skoft | string | null | "sweve" | As ynsteld op "hover" , stopet it fytsen fan 'e karrousel oan mouseenter en ferfetsje it fytsen fan' e karrousel op mouseleave . As ynsteld op null , sil it hoverjen oer de karrousel it net ûnderbrekke. |
wrap | boolean | wier | Oft de karrousel kontinu fytse moat of hurde stops hawwe. |
toetseboerd | boolean | wier | Oft de karrousel moat reagearje op toetseboerdeveneminten. |
.carousel(options)
Inisjalisearret de karrousel mei in opsjonele opsjes object
en begjint te fytsen troch items.
.carousel('cycle')
Cycles troch de karrousel items fan links nei rjochts.
.carousel('pause')
Stopt de karrousel fan it fytsen troch items.
.carousel(number)
Sylt de karrousel nei in bepaald frame (0 basearre, fergelykber mei in array).
.carousel('prev')
Cycles nei it foarige item.
.carousel('next')
Cycles nei it folgjende item.
De karrouselklasse fan Bootstrap bleatstelt twa eveneminten foar heakjen oan karrouselfunksjonaliteit.
Beide eveneminten hawwe de folgjende ekstra eigenskippen:
direction
: De rjochting wêryn't de karrousel glydt (of "left"
of "right"
).relatedTarget
: It DOM-elemint dat op syn plak wurdt glide as it aktive item.Alle karrouseleveneminten wurde op de karrousel sels ûntslein (dus by de <div class="carousel">
).
Event Type | Beskriuwing |
---|---|
slide.bs.carousel | Dit evenemint ûntspringt fuortendaliks as de slide eksimplaarmetoade wurdt oproppen. |
slid.bs.carrousel | Dit evenemint wurdt ûntslein as de karrousel syn slide-oergong foltôge hat. |
De affix-plugin skeakelt position: fixed;
oan en út, emulearret it effekt fûn mei position: sticky;
. De subnavigaasje oan de rjochterkant is in live demo fan de affix plugin.
Brûk de affix-plugin fia gegevensattributen of manuell mei jo eigen JavaScript. Yn beide situaasjes moatte jo CSS leverje foar de posysje en breedte fan jo oanbrochte ynhâld.
Opmerking: Brûk de affix-plugin net op in elemint befette yn in relatyf gepositioneerd elemint, lykas in lutsen of triuwe kolom, fanwegen in Safari-rendering-bug .
De affix-plugin wikselt tusken trije klassen, elk foar in bepaalde steat: .affix
, .affix-top
, en .affix-bottom
. Jo moatte de stilen leverje, mei útsûndering fan position: fixed;
op .affix
, foar dizze klassen sels (ûnôfhinklik fan dizze plugin) om de eigentlike posysjes te behanneljen.
Hjir is hoe't de affix-plugin wurket:
.affix-top
om oan te jaan dat it elemint yn syn boppeste posysje is. Op dit punt is gjin CSS-posisjonearring fereaske..affix
ferfangt .affix-top
en sets position: fixed;
(fersoarge troch Bootstrap's CSS)..affix
mei .affix-bottom
. Sûnt offsets binne opsjoneel, it ynstellen fan ien fereasket dat jo de passende CSS ynstelle. Yn dit gefal, foegje position: absolute;
as it nedich is. De plugin brûkt it data-attribút as JavaScript-opsje om te bepalen wêr't it elemint fan dêrút pleatst wurdt.Folgje de boppesteande stappen om jo CSS yn te stellen foar ien fan 'e gebrûksopsjes hjirûnder.
Om maklik affixgedrach ta te foegjen oan elk elemint, foegje gewoan ta data-spy="affix"
oan it elemint wêrop jo wolle bispiede. Brûk offsets om te definiearjen wannear't de pinning fan in elemint wikselje moat.
Rop de affix-plugin fia JavaScript:
Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-
, lykas yn data-offset-top="200"
.
Namme | type | standert | beskriuwing |
---|---|---|---|
offset | nûmer | funksje | objekt | 10 | Pixels om te kompensearjen fan it skerm by it berekkenjen fan posysje fan scroll. As in inkeld nûmer wurdt levere, sil de offset tapast wurde yn sawol boppe- as ûnderrjochtings. Om foarsjen in unyk, ûnder- en top offset gewoan in foarwerp offset: { top: 10 } of offset: { top: 10, bottom: 5 } . Brûk in funksje as jo moatte dynamysk berekkenje in offset. |
doel | kiezer | noat | jQuery elemint | it window objekt |
Spesifiseart it doelelemint fan 'e affix. |
.affix(options)
Aktivearret jo ynhâld as taheakke ynhâld. Akseptearret in opsjonele opsjes object
.
.affix('checkPosition')
Berekkenet de tastân fan 'e affix op' e nij op basis fan 'e dimensjes, posysje en rôljeposysje fan' e oanbelangjende eleminten. De .affix
, .affix-top
, en .affix-bottom
klassen wurde tafoege oan of fuortsmiten fan de oanbrochte ynhâld neffens de nije steat. Dizze metoade moat wurde oanroppen as de ôfmjittings fan 'e befestige ynhâld as it doelelemint wurde feroare, om de juste posysje fan 'e befestige ynhâld te garandearjen.
Bootstrap's affix-plugin bleatsteld in pear eveneminten foar heakjen oan affix-funksjonaliteit.
Event Type | Beskriuwing |
---|---|
affix.bs.affix | Dit evenemint fjoer fuortendaliks foardat it elemint is oanbrocht. |
affixed.bs.affix | Dit evenemint wurdt ûntslein neidat it elemint is oanbrocht. |
affix-top.bs.affix | Dit evenemint ûntspringt fuortendaliks foardat it elemint is oanbrocht-top. |
affixed-top.bs.affix | Dit evenemint wurdt ûntslein neidat it elemint is oanbrocht-top. |
affix-bottom.bs.affix | Dit barren fjoer fuort foardat it elemint is oanbrocht-ûnder. |
affixed-bottom.bs.affix | Dit evenemint wurdt ûntslein neidat it elemint is oanbrocht-ûnder. |