JavaScript

Bring Bootstrap se komponente tot lewe - nou met 13 pasgemaakte jQuery-inproppe.

Individueel of saamgestel

Inproppe kan individueel ingesluit word (alhoewel sommige vereiste afhanklikhede het), of alles op een slag. Beide bootstrap.js en bootstrap.min.js bevat alle plugins in 'n enkele lêer.

Data eienskappe

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 liggaam wat met `'data-api'` gespasieer is, te ontbind. Dit lyk so:

  1. $ ( 'liggaam' ). af ( '.data-api' )

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:

  1. $ ( 'liggaam' ). af ( '.alert.data-api' )

Programmatiese API

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.

  1. $ ( ".btn.danger" ). knoppie ( "wissel" ). addClass ( "vet" )

Alle metodes moet 'n opsionele opsie-objek aanvaar, 'n string wat 'n spesifieke metode teiken, of niks (wat 'n inprop met verstekgedrag inisieer):

  1. $ ( "#myModal" ). modal () // geïnisialiseer met verstek
  2. $ ( "#myModal" ). modaal ({ sleutelbord : vals }) // geïnisialiseer met geen sleutelbord nie
  3. $ ( "#myModal" ). modal ( 'show' ) // inisialiseer en roep show onmiddellik op

Elke inprop stel ook sy rou konstruktor bloot op 'n 'Constructor'-eienskap: $.fn.popover.Constructor. As jy 'n spesifieke inprop-instansie wil kry, haal dit direk van 'n element af: $('[rel=popover]').data('popover').

Geen konflik nie

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 .noConflictdie inprop gebruik waarvan jy die waarde wil terugdraai.

  1. var bootstrapButton = $ . fn . knoppie . noConflict () // gee $.fn.button terug na voorheen toegekende waarde
  2. $ . fn . bootstrapBtn = bootstrapButton // gee $().bootstrapBtn die selflaai-funksie

Gebeurtenisse

Bootstrap bied pasgemaakte gebeurtenisse vir die meeste inprop se unieke aksies. Oor die algemeen kom dit in 'n infinitief en verlede deelwoordvorm - waar die infinitief (bv. show) aan die begin van 'n gebeurtenis geaktiveer word, en sy verlede deelwoordvorm (bv. shown) sneller word by die voltooiing van 'n aksie.

Alle infinitiewe gebeurtenisse bied preventDefault-funksionaliteit. Dit bied die vermoë om die uitvoering van 'n aksie te stop voordat dit begin.

  1. $ ( '#myModal' ). aan ( 'wys' , funksie ( e ) {
  2. indien (! data ) gee terug e . preventDefault () // keer dat modaal gewys word
  3. })

Oor oorgange

Vir eenvoudige oorgangseffekte, sluit bootstrap-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.

Gebruik gevalle

'n Paar voorbeelde van die oorgang-inprop:

  • Gly of vervaag in modale
  • Vervaag oortjies
  • Vervaag waarskuwings
  • Skuifkarrouselruite

Voorbeelde

Modale is vaartbelynde, maar buigsame, dialoogopdragte met die minimum vereiste funksionaliteit en slim verstekke.

Statiese voorbeeld

'n Weergegee modaal met kopskrif, liggaam en stel aksies in die voetskrif.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </knoppie>
  4. <h3> Modale kopskrif </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Een fyn lyf … </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Maak toe </a>
  11. <a href = "#" class = "btn btn-primêr" > Stoor veranderinge </a>
  12. </div>
  13. </div>

Regstreekse demo

Wissel 'n modaal via JavaScript deur op die knoppie hieronder te klik. Dit sal afgly en vervaag vanaf die bokant van die bladsy.

  1. <!-- Knoppie om modaal te aktiveer -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Begin demo modal </a>
  3.  
  4. <!-- Modaal -->
  5. <div id = "myModal" class = "modale versteek vervaag" tabindex = "-1" role = "dialoog" aria-labelledby = "myModalLabel" aria-hidden = "waar" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Modale kopskrif </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Een fyn lyf … </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Maak toe </button>
  15. <button class = "btn btn-primary" > Stoor veranderinge </button>
  16. </div>
  17. </div>

Gebruik

Via data-eienskappe

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.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Begin modaal </button>

Via JavaScript

Roep 'n modaal met ID myModalmet 'n enkele reël JavaScript:

  1. $ ( '#myModal' ). modaal ( opsies )

Opsies

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 waar Sluit 'n modale agtergrondelement in. Alternatiewelik, spesifiseer staticvir '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

As 'n afgeleë url verskaf word, sal inhoud via jQuery se loadmetode gelaai word en in die .modal-body. As jy die data-API gebruik, kan jy alternatiewelik die hrefmerker gebruik om die afgeleë bron te spesifiseer. 'n Voorbeeld hiervan word hieronder getoon:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Metodes

.modal(opsies)

Aktiveer jou inhoud as 'n modaal. Aanvaar 'n opsionele opsie object.

  1. $ ( '#myModal' ). modaal ({
  2. sleutelbord : vals
  3. })

.modal('toggle')

Wissel 'n modaal handmatig.

  1. $ ( '#myModal' ). modaal ( 'wissel' )

.modal('show')

Maak 'n modaal handmatig oop.

  1. $ ( '#myModal' ). modaal ( 'wys' )

.modal('versteek')

Versteek 'n modaal handmatig.

  1. $ ( '#myModal' ). modaal ( 'versteek' )

Gebeurtenisse

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 showinstansiemetode 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 hideinstansiemetode geroep is.
versteek Hierdie gebeurtenis word afgevuur wanneer die modaal klaar versteek is vir die gebruiker (sal wag vir css-oorgange om te voltooi).
  1. $ ( '#myModal' ). aan ( 'versteek' , funksie () {
  2. // doen iets…
  3. })

Voorbeeld in navbar

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.

@vet

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.

@mdo

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.

een

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.

twee

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.

three

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.


Gebruik

Via data-eienskappe

Om scrollspy-gedrag maklik by jou bobalknavigasie te voeg, voeg net by data-spy="scroll"die element waarna jy wil spioeneer (meestal sal dit die liggaam wees) en data-target=".navbar"om te kies watter nav om te gebruik. Jy sal scrollspy met 'n .navkomponent wil gebruik.

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

Via JavaScript

Bel die scrollspy via JavaScript:

  1. $ ( '#navbar' ). scrollspy ()
Let op! 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>.

Metodes

.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:

  1. $ ( '[data-spy="scroll"]' ). elk ( funksie () {
  2. var $spioen = $ ( hierdie ). scrollspy ( 'verfris' )
  3. });

Opsies

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.

Gebeurtenisse

Gebeurtenis Beskrywing
aktiveer Hierdie gebeurtenis brand wanneer 'n nuwe item deur die scrollspy geaktiveer word.

Voorbeeld oortjies

Voeg vinnige, dinamiese oortjie-funksionaliteit by om deur vensters van plaaslike inhoud oor te skakel, 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'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.


Gebruik

Aktiveer tabbare oortjies via JavaScript (elke oortjie moet individueel geaktiveer word):

  1. $ ( '#myTab a' ). klik ( funksie ( e ) {
  2. e . verhoedDefault ();
  3. $ ( hierdie ). tab ( 'wys' );
  4. })

Jy kan individuele oortjies op verskeie maniere aktiveer:

  1. $ ( '#myTab a[href="#profiel"]' ). tab ( 'wys' ); // Kies oortjie volgens naam
  2. $ ( '#myTab a:eerste' ). tab ( 'wys' ); // Kies eerste oortjie
  3. $ ( '#myTab a:laaste' ). tab ( 'wys' ); // Kies laaste oortjie
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'wys' ); // Kies derde oortjie (0-geïndexeer)

Opmerk

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. Deur die naven nav-tabsklasse by die oortjie te voeg ul, sal die Bootstrap-oortjiestilering toepas.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Tuis </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profiel </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Boodskappe </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Instellings </a></li>
  6. </ul>

Metodes

$().tab

Aktiveer 'n oortjie-element en inhoudhouer. Tab moet óf 'n data-targetóf 'n hrefteiken 'n houer nodus in die DOM hê.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li klas = "aktief" ><a href = "#huis" > Tuis </a></li>
  3. <li><a href = "#profile" > Profiel </a></li>
  4. <li><a href = "#messages" > Boodskappe </a></li>
  5. <li><a href = "#settings" > Instellings </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-inhoud" >
  9. <div class = "tab-pane active" id = "tuis" > ... </div>
  10. <div class = "tab-pane" id = "profiel" > ... </div>
  11. <div class = "tab-pane" id = "boodskappe" > ... </div>
  12. <div class = "tab-pane" id = "instellings" > ... </div>
  13. </div>
  14.  
  15. <skrif>
  16. $ ( funksie () {
  17. $ ( '#myTab a:laaste' ). tab ( 'wys' );
  18. })
  19. </script>

Gebeurtenisse

Gebeurtenis Beskrywing
Wys Hierdie gebeurtenis begin op oortjievertoning, maar voordat die nuwe oortjie gewys is. Gebruik event.targeten event.relatedTargetom 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.targeten event.relatedTargetom onderskeidelik die aktiewe oortjie en die vorige aktiewe oortjie (indien beskikbaar) te teiken.
  1. $ ( 'a[data-toggle="tab"]' ). aan ( 'getoon' , funksie ( e ) {
  2. e . teiken // geaktiveerde blad
  3. e . relatedTarget // vorige oortjie
  4. })

Voorbeelde

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.

Vir prestasieredes word die nutswenk en popover-data-api's ingeskryf, wat beteken dat jy dit self moet inisialiseer .

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 hanteer freegan cred rou denim enkel-oorsprong koffie virale.

Vier rigtings

Gereedskapwenke in invoergroepe

Wanneer u gereedskapwenke en popovers met die Bootstrap-invoergroepe gebruik, moet u die containeropsie (hieronder gedokumenteer) stel om ongewenste newe-effekte te vermy.


Gebruik

Aktiveer die nutswenk via JavaScript:

  1. $ ( '#voorbeeld' ). nutswenk ( opsies )

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-animation="".

Naam tipe verstek beskrywing
animasie boolean waar pas 'n css-vervaag-oorgang op die nutswenk toe
html boolean onwaar Voeg html in die nutswenk in. As dit vals is, sal jquery se textmetode 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 | reg
keurder string onwaar As 'n kieser verskaf word, sal tooltip-objekte na die gespesifiseerde teikens gedelegeer word.
titel tou | funksie '' verstek titelwaarde as `titel`-merker nie teenwoordig is nie
sneller string 'sweef fokus' hoe tooltip geaktiveer word - klik | beweeg | fokus | handleiding. Let daarop dat jou geval slaag sneller veelvoudig, spasie geskei, sneller tipes.
vertraging nommer | voorwerp 0

vertraging om die nutswenk (ms) te wys en te verberg - is nie van toepassing op handmatige snellertipe nie

As 'n nommer verskaf word, word vertraging toegepas op beide versteek/wys

Voorwerpstruktuur is:delay: { show: 500, hide: 100 }

houer tou | onwaar onwaar

Voeg die nutswenk by 'n spesifieke elementcontainer: 'body'

Let op! Opsies vir individuele gereedskapwenke kan alternatiewelik gespesifiseer word deur die gebruik van data-kenmerke.

Opmerk

  1. <a href = "#" data-toggle = "tooltip" title = "eerste tooltip" > beweeg oor my </a>

Metodes

$().tooltip(opsies)

Heg 'n nutswenk-hanteerder aan 'n elementversameling.

.tooltip('wys')

Onthul 'n element se nutswenk.

  1. $ ( '#element' ). nutswenk ( 'wys' )

.tooltip('versteek')

Versteek 'n element se nutswenk.

  1. $ ( '#element' ). tooltip ( 'versteek' )

.tooltip('toggle')

Wissel 'n element se nutswenk.

  1. $ ( '#element' ). nutswenk ( 'wissel' )

.tooltip('vernietig')

Versteek en vernietig 'n element se nutswenk.

  1. $ ( '#element' ). tooltip ( 'vernietig' )

Voorbeelde

Voeg klein oorlegsels van inhoud, soos dié op die iPad, by enige element om sekondêre inligting te huisves. Beweeg oor die knoppie om die popover te aktiveer. Vereis Tooltip om ingesluit te word.

Statiese popover

Vier opsies is beskikbaar: bo-, regs-, onder- en linksbelyn.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover regs

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover onderkant

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover links

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Geen opmaak wat as opspringers gewys word, word uit JavaScript en inhoud binne 'n datakenmerk gegenereer nie.

Regstreekse demo

Vier rigtings


Gebruik

Aktiveer popovers via JavaScript:

  1. $ ( '#voorbeeld' ). popover ( opsies )

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-animation="".

Naam tipe verstek beskrywing
animasie boolean waar pas 'n css-vervaag-oorgang op die nutswenk toe
html boolean onwaar Voeg html in die popover. As dit vals is, sal jquery se textmetode 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 | reg
keurder string onwaar as 'n kieser verskaf word, sal tooltip-objekte na die gespesifiseerde teikens gedelegeer word
sneller string 'klik' hoe popover geaktiveer word - klik | 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

vertraging wys en verberg die popover (ms) - is nie van toepassing op handmatige sneller tipe nie

As 'n nommer verskaf word, word vertraging toegepas op beide versteek/wys

Voorwerpstruktuur is:delay: { show: 500, hide: 100 }

houer tou | onwaar onwaar

Voeg die opspringer by 'n spesifieke elementcontainer: 'body'

Let op! Opsies vir individuele popovers kan alternatiewelik gespesifiseer word deur die gebruik van data-kenmerke.

Opmerk

Vir prestasieredes word die Tooltip en Popover-data-api's ingeskryf. As jy dit wil gebruik, spesifiseer net 'n kieseropsie.

Metodes

$().popover(opsies)

Inisialiseer popovers vir 'n elementversameling.

.popover('wys')

Onthul 'n element-opspringer.

  1. $ ( '#element' ). popover ( 'wys' )

.popover('versteek')

Versteek 'n element-opspringer.

  1. $ ( '#element' ). popover ( 'versteek' )

.popover('toggle')

Wissel 'n element-opspringer.

  1. $ ( '#element' ). popover ( 'wissel' )

.popover('vernietig')

Versteek en vernietig 'n element se popover.

  1. $ ( '#element' ). popover ( 'vernietig' )

Voorbeeld waarskuwings

Voeg afwysfunksionaliteit by alle waarskuwingsboodskappe met hierdie inprop.

Heilige guacamole! Beste kyk self, jy lyk nie te goed nie.

O snap! Jy het 'n fout!

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.

Neem hierdie aksie Of doen dit


Gebruik

Aktiveer afwysing van 'n waarskuwing via JavaScript:

  1. $ ( ".alert" ). waarskuwing ()

Opmerk

Voeg net data-dismiss="alert"by jou toemaakknoppie om outomaties 'n waarskuwingssluitingfunksie te gee.

  1. <a class = "close" data-dismiss = "alert" href = "#" > &tye; </a>

Metodes

$().alert()

Omvou alle waarskuwings met noue funksionaliteit. Om jou waarskuwings te laat animeer wanneer dit gesluit is, maak seker dat die .fadeen .inklas reeds op hulle toegepas is.

.alert('close')

Maak 'n waarskuwing toe.

  1. $ ( ".alert" ). waarskuwing ( 'toe' )

Gebeurtenisse

Bootstrap se waarskuwingsklas ontbloot 'n paar gebeurtenisse om by waarskuwingsfunksionaliteit in te skakel.

Gebeurtenis Beskrywing
naby Hierdie gebeurtenis begin onmiddellik wanneer die closeinstansiemetode geroep word.
gesluit Hierdie gebeurtenis word afgevuur wanneer die waarskuwing gesluit is (sal wag vir css-oorgange om te voltooi).
  1. $ ( '#my-waarskuwing' ). bind ( 'geslote' , funksie () {
  2. // doen iets…
  3. })

Voorbeeld gebruike

Doen meer met knoppies. Beheer knoppietoestande of skep groepe knoppies vir meer komponente soos nutsbalke.

Statig

Voeg data-loading-text="Loading..."by om 'n laaitoestand op 'n knoppie te gebruik.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Laai tans..." > Laai toestand </button>

Enkelwissel

Voeg data-toggle="button"by om skakeling op 'n enkele knoppie te aktiveer.

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Enkelwisseling </button>

Merkblokkie

Voeg by data-toggle="buttons-checkbox"vir merkblokkiestyl-wisseling op btn-groep.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Links </button>
  3. <button type = "button" class = "btn btn-primary" > Middel </button>
  4. <button type = "button" class = "btn btn-primary" > Regs </button>
  5. </div>

Radio

Voeg by data-toggle="buttons-radio"vir radiostyl-wisseling op btn-groep.

  1. <div class = "btn-group" data-toggle = "knoppies-radio" >
  2. <button type = "button" class = "btn btn-primary" > Links </button>
  3. <button type = "button" class = "btn btn-primary" > Middel </button>
  4. <button type = "button" class = "btn btn-primary" > Regs </button>
  5. </div>

Gebruik

Aktiveer knoppies via JavaScript:

  1. $ ( '.nav-tabs' ). knoppie ()

Opmerk

Data-kenmerke is 'n integrale deel van die knoppie-inprop. Kyk na die voorbeeldkode hieronder vir die verskillende opmaaktipes.

Opsies

Geen

Metodes

$().button('toggle')

Wissel stootstatus. Gee die knoppie die voorkoms dat dit geaktiveer is.

Let op! Jy kan outomatiese skakel van 'n knoppie aktiveer deur die data-togglekenmerk te gebruik.
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

$().button('laaiing')

Stel knoppiestatus na laai - deaktiveer knoppie en ruil teks om na laai teks. Laaiteks moet op die knoppie-element gedefinieer word deur die data-kenmerk te gebruik data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "laai goed..." > ... </button>
Let op! Firefox behou die gedeaktiveerde toestand oor bladsyvragte . 'n Oplossing hiervoor is om te gebruik autocomplete="off".

$().button('reset')

Stel knoppiestatus terug - ruil teks na oorspronklike teks.

$().button(string)

Stel knoppiestatus terug - ruil teks na enige data-gedefinieerde tekstoestand.

  1. <button type = "button" class = "btn" data-complete-text = "klaar!" > ... </knoppie>
  2. <skrif>
  3. $ ( '.btn' ). knoppie ( 'voltooi' )
  4. </script>

Oor

Kry basisstyle en buigsame ondersteuning vir opvoubare komponente soos trekklaviere en navigasie.

* Vereis dat die Transitions-inprop ingesluit moet word.

Voorbeeld trekklavier

Met behulp van die ineenvou-inprop het ons 'n eenvoudige trekklavierstyl-legstuk gebou:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad inkvis. 3 wolf maan officia Aute, nie cupidatat skaatsplank dolor brunch. Kos vragmotor quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sit 'n voël daarop inkvis enkel-oorsprong koffie nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat handwerk bier plaas-tot-tafel, rou denim estetiese sinth nesciunt jy het waarskynlik nog nie gehoor van hulle accusamus labore volhoubare VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad inkvis. 3 wolf maan officia Aute, nie cupidatat skaatsplank dolor brunch. Kos vragmotor quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sit 'n voël daarop inkvis enkel-oorsprong koffie nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat handwerk bier plaas-tot-tafel, rou denim estetiese sinth nesciunt jy het waarskynlik nog nie gehoor van hulle accusamus labore volhoubare VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad inkvis. 3 wolf maan officia Aute, nie cupidatat skaatsplank dolor brunch. Kos vragmotor quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sit 'n voël daarop inkvis enkel-oorsprong koffie nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat handwerk bier plaas-tot-tafel, rou denim estetiese sinth nesciunt jy het waarskynlik nog nie gehoor van hulle accusamus labore volhoubare VHS.
  1. <div klas = "trekklavier" id = "trekklavier2" >
  2. <div klas = "trekklaviergroep" >
  3. <div class = "trekklavier-opskrif" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Opvoubare groepitem #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "trekklavier-liggaam val in" >
  9. <div class = "trekklavier-binne" >
  10. Animal pariatur cliche...
  11. </div>
  12. </div>
  13. </div>
  14. <div klas = "trekklaviergroep" >
  15. <div class = "trekklavier-opskrif" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Opvoubare groepitem #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "trekklavier-liggaam ineenstorting" >
  21. <div class = "trekklavier-binne" >
  22. Animal pariatur cliche...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

U kan ook die inprop gebruik sonder die trekklavieropmerk. Maak 'n knoppie om die uitbreiding en ineenstorting van 'n ander element te wissel.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. eenvoudig opvoubaar
  3. </knoppie>
  4.  
  5. <div id = "demo" class = "vou in" > </div>

Gebruik

Via data-eienskappe

Voeg net by data-toggle="collapse"en 'n data-targetby-element om outomaties beheer van 'n opvoubare element toe te ken. Die data-targetkenmerk aanvaar 'n css-kieser om die ineenstorting op toe te pas. Maak seker dat jy die klas collapseby 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.

Via JavaScript

Aktiveer handmatig met:

  1. $ ( ".collapse" ). ineenstort ()

Opsies

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 kieser dan sal alle opvoubare elemente onder die gespesifiseerde ouer gesluit word wanneer hierdie opvoubare item gewys word. (soortgelyk aan tradisionele trekklaviergedrag)
wissel boolean waar Wissel die opvoubare element by aanroep

Metodes

.collapse(opsies)

Aktiveer jou inhoud as 'n opvoubare element. Aanvaar 'n opsionele opsie object.

  1. $ ( '#myOpvoubaar' ). ineenstort ({
  2. wissel : vals
  3. })

.collapse('toggle')

Wissel 'n opvoubare element na gewys of versteek.

.collapse('wys')

Toon 'n opvoubare element.

.collapse('versteek')

Versteek 'n opvoubare element.

Gebeurtenisse

Bootstrap se ineenstortingsklas ontbloot 'n paar gebeurtenisse vir inhaak by ineenstortingsfunksionaliteit.

Gebeurtenis Beskrywing
Wys Hierdie gebeurtenis begin onmiddellik wanneer die showinstansiemetode 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 hidemetode geroep is.
versteek Hierdie gebeurtenis word afgevuur wanneer 'n invou-element vir die gebruiker versteek is (sal wag vir css-oorgange om te voltooi).
  1. $ ( '#myOpvoubaar' ). aan ( 'versteek' , funksie () {
  2. // doen iets…
  3. })

Voorbeeld

'n Basiese, maklik uitgebreide inprop vir vinnige skep van elegante tikkoppe met enige vorm teksinvoer.

  1. <input type = "text" data-provide = "typeahead" >

Jy sal wil instel autocomplete="off"om te verhoed dat verstekblaaier-kieslyste oor die Bootstrap-tipe-aftreklys verskyn.


Gebruik

Via data-eienskappe

Voeg data-kenmerke by om 'n element met tikvooraf-funksionaliteit te registreer soos in die voorbeeld hierbo getoon.

Via JavaScript

Bel die voorskrif handmatig met:

  1. $ ( '.typeahead' ). tik voor ()

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-source="".

Naam tipe verstek beskrywing
bron skikking, funksie [ ] Die databron waarteen navraag gedoen moet word. Kan 'n reeks stringe of 'n funksie wees. Die funksie word deur twee argumente deurgegee, die querywaarde in die invoerveld en die processterugbel. Die funksie kan sinchronies gebruik word deur die databron direk of asinchronies terug te stuur via die processterugbel se enkele argument.
items nommer 8 Die maksimum aantal items om in die aftreklys te vertoon.
min Lengte nommer 1 Die minimum karakterlengte wat benodig word voordat outovoltooivoorstelle geaktiveer word
pasmaat funksie geval onsensitiewe Die metode wat gebruik word om te bepaal of 'n navraag by 'n item pas. Aanvaar 'n enkele argument, itemwaarteen die navraag getoets moet word. Toegang tot die huidige navraag met this.query. Wys 'n boolean trueas navraag 'n passing is.
sorteerder funksie presiese passing,
hooflettersensitief,
hoofletteronsensitief
Metode wat gebruik word om outovoltooi-resultate te sorteer. Aanvaar 'n enkele argument itemsen het die omvang van die typeahead-instansie. Verwys na die huidige navraag met this.query.
bywerker funksie gee geselekteerde item terug Die metode wat gebruik word om geselekteerde item terug te gee. Aanvaar 'n enkele argument, die itemen het die omvang van die typeahead-instansie.
verligter funksie beklemtoon alle verstek passings Metode wat gebruik word om outovoltooi-resultate uit te lig. Aanvaar 'n enkele argument itemen het die omvang van die typeahead-instansie. Moet html terugstuur.

Metodes

.typeahead(opsies)

Inisialiseer 'n invoer met 'n voorsprong.

Voorbeeld

Die subnavigasie aan die linkerkant is 'n lewendige demonstrasie van die affix-inprop.


Gebruik

Via data-eienskappe

Om maklik aanbringgedrag by enige element te voeg, voeg net by data-spy="affix"die element waarna jy wil spioeneer. Gebruik dan offsets om te definieer wanneer om die vaspen van 'n element aan en af ​​te skakel.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Let op! Jy moet die posisie van 'n vasgespelde element en die gedrag van sy onmiddellike ouer bestuur. Posisie word beheer deur affix, affix-top, en affix-bottom. Onthou om te kyk vir 'n potensieel ineengestorte ouer wanneer die aanhangsel inskop, aangesien dit inhoud uit die normale vloei van die bladsy verwyder.

Via JavaScript

Bel die affix-inprop via JavaScript:

  1. $ ( '#navbar' ). aanbring ()

Opsies

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 verskuiwing in beide bo- en linksrigtings toegepas word. Om te luister vir 'n enkele rigting, of verskeie unieke afwykings, verskaf net 'n voorwerp offset: { x: 10 }. Gebruik 'n funksie wanneer jy dinamies 'n offset moet verskaf (nuttig vir sommige responsiewe ontwerpe).