Bring Bootstrap se komponente tot lewe - nou met 12 pasgemaakte jQuery - inproppe.
'n Gestroomlynde, maar buigsame, gebruik die tradisionele javascript-modale inprop met slegs die minimum vereiste funksionaliteit en slim verstekke.
Aflaai leêrHieronder is 'n staties weergegee modaal.
Een fyn lyf...
Wissel 'n modaal via javascript deur op die knoppie hieronder te klik. Dit sal afgly en vervaag vanaf die bokant van die bladsy.
Begin demo modaalBel die modaal via javascript:
$('#myModal').modal(opsies)
Naam | tipe | verstek | beskrywing |
---|---|---|---|
agtergrond | boolean | waar | Sluit 'n modale agtergrondelement in |
sleutelbord | boolean | waar | Maak die modaal toe wanneer escape-sleutel gedruk word |
Jy kan maklik modale op jou bladsy aktiveer sonder om 'n enkele reël JavaScript te hoef te skryf. Stel net data-toggle="modal"
op 'n kontroleerderelement met 'n data-target="#foo"
of href="#foo"
wat ooreenstem met 'n modale element-ID, en wanneer daarop geklik word, sal dit jou modaal begin.
Om ook opsies by jou modale instansie te voeg, sluit dit net as bykomende data-kenmerke in op óf die beheerelement óf die modale opmaak self.
<a class="btn" data-toggle="modal" href="#myModal" >Begin Modal</a>
<div class="modal"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Modale kopskrif</h3> </div> <div class="modal-body"> <p>Een fyn lyf...</p> </div> <div class="modal-footer"> <a href="#" class="btn btn-primary">Stoor veranderinge</a> <a href="#" class="btn">Sluit</a> </div> </div>
.fade
klas by die
.modal
element (verwys na die demo om dit in aksie te sien) en sluit bootstrap-transition.js in.
Aktiveer jou inhoud as 'n modaal. Aanvaar 'n opsionele opsie object
.
$('#myModal').modal({ sleutelbord: vals })
Wissel 'n modaal handmatig.
$('#myModal').modal('toggle')
Maak 'n modaal handmatig oop.
$('#myModal').modal('show')
Versteek 'n modaal handmatig.
$('#myModal').modal('versteek')
Bootstrap se modale klas stel 'n paar gebeurtenisse bloot om by modale funksionaliteit in te skakel.
Gebeurtenis | Beskrywing |
---|---|
Wys | Hierdie gebeurtenis begin onmiddellik wanneer die show instansiemetode geroep word. |
gewys | Hierdie gebeurtenis word afgevuur wanneer die modaal vir die gebruiker sigbaar gemaak is (sal wag vir css-oorgange om te voltooi). |
wegsteek | Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hide instansiemetode geroep is. |
versteek | Hierdie gebeurtenis word afgevuur wanneer die modaal klaar versteek is vir die gebruiker (sal wag vir css-oorgange om te voltooi). |
$('#myModal').on('hidden', function () { // doen iets… })
Voeg aftrekkieslys by byna enigiets in Bootstrap met hierdie eenvoudige inprop. Bootstrap het volledige aftreklysondersteuning in die navigasiebalk, oortjies en pille.
Aflaai leêrKlik op die aftreklys nav-skakels in die navigasiebalk en pille hieronder om aftreklys te toets.
Bel die dropdowns via javascript:
$('.dropdown-toggle').dropdown()
Om aftrekfunksies vinnig by enige element te voeg , voeg net by data-toggle="dropdown"
en enige geldige selflaai-aftreklys sal outomaties geaktiveer word.
data-target="#fat"
of
te gebruik href="#fat"
.
<ul class="nav pille"> <li class="active"><a href="#">Gereelde skakel</a></li> <li class="dropdown" id="menu1"> <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> Aftreklys <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Optrede</a></li> <li><a href="#">Nog 'n handeling</a></li> <li><a href="#">Iets anders hier</a></li> <li class="divider"></li> <li><a href="#">Geskeide skakel</a></li> </ul> </li> ... </ul>
'n Programmatiese API vir die aktivering van spyskaarte vir 'n gegewe navigasiebalk of navigasie met oortjies.
Die ScrollSpy-inprop is vir die outomatiese opdatering van navigasieteikens gebaseer op rolposisie.
Aflaai leêrBlaai deur die area hieronder en kyk na die navigasieopdatering. Die aftrek-subitems sal ook uitgelig word. Probeer dit!
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, oficia deserunt mcsweeney se proident master reinig thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum handwerkbier. Enkel-oorsprong koffie wayfarers irure vier loko, cupidatat terry richardson master cleanse. Assumenda jy het seker nog nie van hulle gehoor nie art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi volhoubare. Elit wolf voluptate, lo-fi ea portland voordat hulle vier loko uitverkoop het. Locavore enim nostrud mlkshk brooklyn nesciunt.
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.
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.
Bel die scrollspy via javascript:
$('#navbar').scrollspy()
Om maklik scrollspy-gedrag by jou bobalknavigasie te voeg, voeg net by data-spy="scroll"
die element waarop jy wil spioeneer (meestal sal dit die liggaam wees).
<body data-spy="scroll" >...</body>
<a href="#home">home</a>
moet ooreenstem met iets in die dom soos
<div id="home"></div>
.
Naam | tipe | verstek | beskrywing |
---|---|---|---|
verreken | nommer | 10 | Pixels om van bo af te verreken wanneer die posisie van rolberekening bereken word. |
Hierdie inprop voeg vinnige, dinamiese oortjie- en pilfunksies by om deur plaaslike inhoud oor te skakel.
Aflaai leêrKlik op die oortjies hieronder om tussen versteekte ruite te wissel, selfs via aftrekkieslyste.
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 se marfa nulla enkel-oorsprong koffie inkvis. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko plaas-tot-tafel handwerk bier twee. Qui fotohokkie boekdruk, commodo enim handwerk bier mlkshk aliquip jean kortbroek ullamco ad vinyl cillum PBR. Homo nostrud organiese, assumenda labore estetiese magna delectus mollit. Keytar helvetica VHS salvia jr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bis, volhoubare jeans kortbroek baard en DIY etiese culpa terry richardson biodiesel. Art party scenester stumptown, tumblr slagter vero sint qui sapiente accusamus getatoeëer eggo park.
Etsy mixtape wayfarers, etiese Wes anderson tofu voordat hulle Mcsweeney se organiese lomo retro fanny pack lo-fi plaas-tot-tafel klaargemaak uitverkoop het. Messenger bag gentrify pitchfork getatoeëer handwerkbier, iphone skaatsplank locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy ironie. Leggings gentrify inkvis 8-bit cred hooivurk. Williamsburg banh mi wat ook al glutenvry, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred jy het waarskynlik nog nie van hulle gehoor nie, vinyl craft beer blog stumptown. Pitchfork volhoubare tofu synth chambray jr.
Trustfonds seitan letterpress, keytar rou denim keffiyeh etsy kunspartytjie voordat hulle uitverkoop het master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, kunspartytjie locavore wolf cliche high life eggo park Austin. Cred viniel keffiyeh DIY salvia PBR, banh mi voordat hulle plaas-tot-tafel VHS virale locavore cosby-trui uitverkoop het. Lomo wolf virale, snor klaargemaakte donderkatte keffiyeh handwerkbier marfa eties. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Aktiveer tabbare oortjies via Javascript:
$('#myTab').tab('wys')
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.
<ul class="tabs"> <li><a href="#home" data-toggle="tab">Tuis</a></li> <li><a href="#profile" data-toggle="tab">Profiel</a></li> <li><a href="#messages" data-toggle="tab">Boodskappe</a></li> <li><a href="#ettings" data-toggle="tab">Instellings</a></li> </ul>
Aktiveer 'n oortjie-element en inhoudhouer. Oortjie moet óf 'n 'data-teiken' óf 'n 'href' hê wat 'n houernodus in die dom teiken.
<ul class="tabs"> <li class="active"><a href="#home">Tuis</a></li> <li><a href="#profile">Profiel</a></li> <li><a href="#messages">Boodskappe</a></li> <li><a href="#settings">Instellings</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home">...</div> <div class="tab-pane" id="profile">...</div> <div class="tab-pane" id="boodskappe">...</div> <div class="tab-pane" id="settings">...</div> </div> <skrif> $(funksie () { $('.tabs a:last').tab('show') }) </script>
Gebeurtenis | Beskrywing |
---|---|
Wys | 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. |
gewys | 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. |
$('a[data-toggle="tab"]').on('getoon', funksie (e) { e.target // geaktiveerde blad e.relatedTarget // vorige oortjie })
Geïnspireer deur die uitstekende jQuery.tipsy-inprop geskryf deur Jason Frame; Tooltips is 'n opgedateerde weergawe wat nie op beelde staatmaak nie, uss css3 vir animasies en data-kenmerke vir plaaslike titelberging.
Aflaai leêrBeweeg 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 hanteer freegan cred rou denim enkel-oorsprong koffie virale.
Aktiveer die nutswenk via javascript:
$('#voorbeeld').tooltip(opsies)
Naam | tipe | verstek | beskrywing |
---|---|---|---|
animasie | boolean | waar | pas 'n css-vervaag-oorgang op die nutswenk toe |
plasing | string | 'Top' | hoe om die nutswenk te posisioneer - bo | onderste | links | reg |
keurder | string | onwaar | As 'n kieser verskaf word, sal tooltip-objekte na die gespesifiseerde teikens gedelegeer word. |
titel | tou | funksie | '' | verstek titelwaarde as `title`-merker nie teenwoordig is nie |
sneller | string | 'sweef' | hoe tooltip geaktiveer word - beweeg | fokus | handleiding |
vertraging | nommer | voorwerp | 0 | vertraag wys en verberg die nutswenk (ms) As 'n nommer verskaf word, word vertraging toegepas op beide versteek/wys Voorwerpstruktuur is: |
Vir prestasie redes, is die Tooltip en Popover data-api's intekening. As jy dit wil gebruik, spesifiseer net 'n kieser opsie.
Heg 'n nutswenk-hanteerder aan 'n elementversameling.
Onthul 'n elementnutswenk.
$('#element').tooltip('wys')
Versteek 'n elementnutswenk.
$('#element').tooltip('versteek')
Wissel 'n elementnutswenk.
$('#element').tooltip('toggle')
Voeg klein oorlegsels van inhoud, soos dié op die iPad, by enige element om sekondêre inligting te huisves.
* Vereis Tooltip om ingesluit te word
Aflaai leêrBeweeg oor die knoppie om die popover te aktiveer.
Aktiveer popovers via javascript:
$('#voorbeeld').popover(opsies)
Naam | tipe | verstek | beskrywing |
---|---|---|---|
animasie | boolean | waar | pas 'n css-vervaag-oorgang op die nutswenk toe |
plasing | string | 'reg' | hoe om die popover te plaas - bo | onderste | links | reg |
keurder | string | onwaar | as 'n kieser verskaf word, sal tooltip-objekte na die gespesifiseerde teikens gedelegeer word |
sneller | string | 'sweef' | hoe tooltip geaktiveer word - beweeg | fokus | handleiding |
titel | tou | funksie | '' | verstek titelwaarde as `titel`-kenmerk nie teenwoordig is nie |
inhoud | tou | funksie | '' | verstek inhoudwaarde as `data-inhoud`-kenmerk nie teenwoordig is nie |
vertraging | nommer | voorwerp | 0 | vertraag wys en verberg die popover (ms) As 'n nommer verskaf word, word vertraging toegepas op beide versteek/wys Voorwerpstruktuur is: |
Vir prestasie redes, is die Tooltip en Popover data-api's ingeteken. As jy dit wil gebruik, spesifiseer net 'n die keurder opsie.
Inisialiseer popovers vir 'n elementversameling.
Onthul 'n element-oorspring.
$('#element').popover('show')
Versteek 'n element-opspringer.
$('#element').popover('versteek')
Wissel 'n element-opspringer.
$('#element').popover('toggle')
Die waarskuwing-inprop is 'n klein klas om noue funksionaliteit by waarskuwings te voeg.
AflaaiDie waarskuwings-inprop werk op gereelde waarskuwingsboodskappe en blokkeer boodskappe.
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.
Aktiveer afwysing van 'n waarskuwing via javascript:
$(".alert-boodskap").alert()
Voeg net data-dismiss="alert"
by jou toemaakknoppie om outomaties 'n waarskuwingssluitingfunksie te gee.
<a class="close" data-dismiss="alert" href="#">&tye;</a>
Omvou alle waarskuwings met noue funksionaliteit. Om jou waarskuwings te laat animeer wanneer dit gesluit is, maak seker dat die .fade
en .in
klas reeds op hulle toegepas is.
Maak 'n waarskuwing toe.
$(".alert-boodskap").alert('close')
Bootstrap se waarskuwingsklas ontbloot 'n paar gebeurtenisse om by waarskuwingsfunksionaliteit in te skakel.
Gebeurtenis | Beskrywing |
---|---|
naby | Hierdie gebeurtenis begin onmiddellik wanneer die close instansiemetode geroep word. |
gesluit | Hierdie gebeurtenis word afgevuur wanneer die waarskuwing gesluit is (sal wag vir css-oorgange om te voltooi). |
$('#my-alert').bind('closed', function () { // doen iets… })
Kry basisstyle en buigsame ondersteuning vir opvoubare komponente soos trekklaviere en navigasie.
Aflaai leêrMet behulp van die ineenvou-inprop het ons 'n eenvoudige trekklavierstyl-legstuk gebou:
Aktiveer via javascript:
$(".collapse").collapse()
Naam | tipe | verstek | beskrywing |
---|---|---|---|
ouer | keurder | onwaar | As kieser dan sal alle opvoubare elemente onder die gespesifiseerde ouer gesluit word wanneer hierdie saamvoubare item gewys word. (soortgelyk aan tradisionele trekklaviergedrag) |
wissel | boolean | waar | Wissel die opvoubare element by aanroep |
Voeg net by data-toggle="collapse"
en 'n data-target
by-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
.
<button class="btn btn-danger" data-toggle="collapse" data-target="#demo"> eenvoudig opvoubaar </knoppie> <div id="demo" class="collapse in"> … </div>
data-parent="#selector"
. Verwys na die demo om dit in aksie te sien.
Aktiveer jou inhoud as 'n opvoubare element. Aanvaar 'n opsionele opsie object
.
$('#myCollapsible').collapse({ wissel: vals })
Wissel 'n opvoubare element na gewys of versteek.
Toon 'n opvoubare element.
Versteek 'n opvoubare element.
Bootstrap se ineenstortingsklas ontbloot 'n paar gebeurtenisse vir inskakeling by ineenstortingsfunksionaliteit.
Gebeurtenis | Beskrywing |
---|---|
Wys | Hierdie gebeurtenis begin onmiddellik wanneer die show instansiemetode geroep word. |
gewys | Hierdie gebeurtenis word afgevuur wanneer 'n invou-element vir die gebruiker sigbaar gemaak is (sal wag vir css-oorgange om te voltooi). |
wegsteek | Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hide metode geroep is. |
versteek | Hierdie gebeurtenis word afgevuur wanneer 'n invou-element vir die gebruiker versteek is (sal wag vir css-oorgange om te voltooi). |
$('#myCollapsible').on('hidden', function () { // doen iets… })
Kyk na die skyfievertoning hieronder.
Bel via javascript:
$('.carousel').carousel()
Naam | tipe | verstek | beskrywing |
---|---|---|---|
interval | nommer | 5000 | Die tyd om te vertraag tussen die outomatiese fietsry van 'n item. |
Data-kenmerke is 'n integrale deel van die karrousel-inprop. Kyk na die voorbeeldkode hieronder vir die verskillende opmaaktipes.
<div class="carousel"> <!-- Karrousel items --> <div class="carousel-inner"> ... </div> <!-- Carrousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div>
Inisialiseer die karrousel met 'n opsionele opsies object
en begin deur items ry.
$('.myCarousel').carousel({ interval: 2000 })
Blaai deur die karrousel-items van links na regs.
Stop die karrousel om deur items te fiets.
Sit die karrousel na 'n spesifieke raam (0 gebaseer, soortgelyk aan 'n skikking).
Blaai na die vorige item.
Blaai na die volgende item.
Bootstrap se modale klas stel 'n paar gebeurtenisse bloot om by modale funksionaliteit in te skakel.
Gebeurtenis | Beskrywing |
---|---|
gly | Hierdie gebeurtenis brand onmiddellik wanneer die slide instansiemetode aangeroep word. |
gly | Hierdie gebeurtenis word afgevuur wanneer die karrousel sy skyfie-oorgang voltooi het. |
'n Basiese, maklik uitgebreide inprop vir vinnige skep van elegante tikkoppe met enige vorm teksinvoer.
Aflaai leêrBegin tik in die veld hieronder om die tikvooruit-resultate te wys.
Bel die tikvooruit via javascript:
$('.typeahead').typeahead()
Naam | tipe | verstek | beskrywing |
---|---|---|---|
bron | skikking | [ ] | Die databron waarteen navraag gedoen moet word. |
items | nommer | 8 | Die maksimum aantal items om in die aftreklys te vertoon. |
pasmaat | funksie | geval onsensitiewe | Die metode wat gebruik word om te bepaal of 'n navraag by 'n item pas. Aanvaar 'n enkele argument, item waarteen die navraag getoets moet word. Toegang tot die huidige navraag met this.query . Gee 'n boolean terug true as navraag 'n passing is. |
sorteerder | funksie | presiese pasmaat, hooflettersensitief, hoofletteronsensitief |
Metode wat gebruik word om outovoltooi-resultate te sorteer. Aanvaar 'n enkele argument items en het die omvang van die typeahead-instansie. Verwys na die huidige navraag met this.query . |
verligter | funksie | beklemtoon alle verstek passings | Metode wat gebruik word om outovoltooi-resultate uit te lig. Aanvaar 'n enkele argument item en het die omvang van die typeahead-instansie. Moet html terugstuur. |
Voeg data-kenmerke by om 'n element met tikvooraf-funksionaliteit te registreer.
<input type="text" data-provide="typeahead">
Inisialiseer 'n invoer met 'n tikkop.