JavaScript

Bring Bootstraps komponenter til live - nu med 13 brugerdefinerede jQuery-plugins.

Heads up! Disse dokumenter er til v2.3.2, som ikke længere er officielt understøttet. Tjek den seneste version af Bootstrap!

Individuelt eller samlet

Plugins kan inkluderes individuelt (selvom nogle har nødvendige afhængigheder), eller alle på én gang. Både bootstrap.js og bootstrap.min.js indeholder alle plugins i en enkelt fil.

Data attributter

Du kan bruge alle Bootstrap-plugins udelukkende gennem markup-API'en uden at skrive en enkelt linje JavaScript. Dette er Bootstraps førsteklasses API og bør være din første overvejelse, når du bruger et plugin.

Når det er sagt, kan det i nogle situationer være ønskeligt at slå denne funktionalitet fra. Derfor giver vi også mulighed for at deaktivere dataattributten API ved at ophæve alle hændelser på kroppen med navneafstand med `'data-api'`. Dette ser sådan ud:

  1. $ ( 'krop' ). off ( '.data-api' )

Alternativt, for at målrette mod et specifikt plugin, skal du blot inkludere plugin's navn som et navneområde sammen med data-api navneområdet som dette:

  1. $ ( 'krop' ). slukket ( '.alert.data-api' )

Programmatisk API

Vi mener også, at du skal være i stand til at bruge alle Bootstrap-plugins udelukkende gennem JavaScript API. Alle offentlige API'er er enkeltstående, kædebare metoder og returnerer den indsamling, der blev handlet på.

  1. $ ( ".btn.danger" ). knap ( "skift" ). addClass ( "fedt" )

Alle metoder bør acceptere et valgfrit option-objekt, en streng, der er målrettet mod en bestemt metode, eller ingenting (som starter et plugin med standardadfærd):

  1. $ ( "#myModal" ). modal () // initialiseret med standardindstillinger
  2. $ ( "#myModal" ). modal ({ keyboard : false }) // initialiseret uden tastatur
  3. $ ( "#myModal" ). modal ( 'show' ) // initialiserer og påkalder show med det samme

Hvert plugin afslører også sin rå konstruktør på en `Constructor`-egenskab: $.fn.popover.Constructor. Hvis du gerne vil have en bestemt plugin-instans, skal du hente den direkte fra et element: $('[rel=popover]').data('popover').

Ingen konflikt

Nogle gange er det nødvendigt at bruge Bootstrap-plugins med andre UI-rammer. Under disse omstændigheder kan navneområdekollisioner lejlighedsvis forekomme. Hvis dette sker, kan du ringe .noConflicttil det plugin, du ønsker at gendanne værdien af.

  1. var bootstrapButton = $ . fn . knap . noConflict () // returner $.fn.button til tidligere tildelt værdi
  2. $ . fn . bootstrapBtn = bootstrapButton // give $().bootstrapBtn bootstrap-funktionaliteten

Begivenheder

Bootstrap leverer tilpassede begivenheder til de fleste plugins unikke handlinger. Generelt kommer disse i en infinitiv og past participium form - hvor infinitiv (eks. show) udløses i starten af ​​en begivenhed, og dens participium form (ex. shown) udløses ved afslutningen af ​​en handling.

Alle infinitive hændelser giver preventDefault-funktionalitet. Dette giver mulighed for at stoppe udførelsen af ​​en handling, før den starter.

  1. $ ( '#myModal' ). on ( 'vis' , funktion ( e ) {
  2. hvis (! data ) returnerer e . preventDefault () // forhindrer modal i at blive vist
  3. })

Om overgange

For simple overgangseffekter skal du inkludere bootstrap-transition.js én gang sammen med de andre JS-filer. Hvis du bruger den kompilerede (eller minificerede) bootstrap.js , er der ingen grund til at inkludere dette – det er der allerede.

Brug cases

Et par eksempler på overgangsplugin:

  • Glider eller falmer i modaler
  • Udtonede faner
  • Fading-out advarsler
  • Skydekarruselruder

Eksempler

Modalerne er strømlinede, men fleksible, dialogmeddelelser med den mindst nødvendige funktionalitet og smarte standardindstillinger.

Statisk eksempel

En gengivet modal med sidehoved, brødtekst og sæt handlinger i sidefoden.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "sand" > × </button>
  4. <h3> Modal overskrift </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Én fin krop... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Luk </a>
  11. <a href = "#" class = "btn btn-primary" > Gem ændringer </a>
  12. </div>
  13. </div>

Live demo

Skift en modal via JavaScript ved at klikke på knappen nedenfor. Det vil glide ned og fade ind fra toppen af ​​siden.

  1. <!-- Knap til at udløse modal -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Start demomodal </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Modal header </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Én fin krop... </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Luk </button>
  15. <button class = "btn btn-primary" > Gem ændringer </button>
  16. </div>
  17. </div>

Brug

Via dataattributter

Aktiver en modal uden at skrive JavaScript. Indstil data-toggle="modal"på et controller-element, som en knap, sammen med et data-target="#foo"eller href="#foo"for at målrette en bestemt modal til at skifte.

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

Via JavaScript

Kald en modal med id myModalmed en enkelt linje JavaScript:

  1. $ ( '#myModal' ). modal ( valgmuligheder )

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-backdrop="".

Navn type Standard beskrivelse
baggrund boolesk rigtigt Indeholder et modalt baggrundselement. Alternativt kan du angive staticfor en baggrund, som ikke lukker modalen ved klik.
tastatur boolesk rigtigt Lukker modalen, når der trykkes på escape-tasten
at vise boolesk rigtigt Viser modal ved initialisering.
fjern sti falsk

Hvis en ekstern url er angivet, indlæses indholdet via jQuerys loadmetode og injiceres i .modal-body. Hvis du bruger data-API'et, kan du alternativt bruge hreftagget til at angive fjernkilden. Et eksempel på dette er vist nedenfor:

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

Metoder

.modal(valgmuligheder)

Aktiverer dit indhold som en modal. Accepterer en valgfri indstilling object.

  1. $ ( '#myModal' ). modal ({
  2. tastatur : falsk
  3. })

.modal('toggle')

Skifter manuelt en modal.

  1. $ ( '#myModal' ). modal ( 'skift' )

.modal('show')

Åbner manuelt en modal.

  1. $ ( '#myModal' ). modal ( 'vis' )

.modal('skjul')

Skjuler manuelt en modal.

  1. $ ( '#myModal' ). modal ( 'skjul' )

Begivenheder

Bootstraps modal-klasse afslører nogle få hændelser for tilslutning til modal funktionalitet.

Begivenhed Beskrivelse
at vise Denne hændelse udløses med det samme, når showinstansmetoden kaldes.
vist Denne hændelse udløses, når modalen er blevet gjort synlig for brugeren (vil vente på, at css-overgange er fuldført).
skjule Denne hændelse udløses straks, når hideinstansmetoden er blevet kaldt.
skjult Denne hændelse udløses, når modalen er færdig med at blive skjult for brugeren (vil vente på, at css-overgange er fuldført).
  1. $ ( '#myModal' ). on ( 'skjult' , funktion () {
  2. // gør noget…
  3. })

Eksempel i navbar

ScrollSpy-plugin'et er til automatisk opdatering af nav-mål baseret på rulleposition. Rul gennem området under navigeringslinjen, og se den aktive klasse ændre sig. Underelementerne i rullemenuen vil også blive fremhævet.

@fed

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi før de udsolgte qui. Tumblr cykelrettigheder fra jord til bord uanset hvad. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hættetrøje minim qui du sandsynligvis ikke har hørt om dem og cardigan trust fund culpa biodiesel wes anderson æstetiske. Nihil tatoveret accusamus, cred ironi biodiesel keffiyeh håndværker ullamco consequat.

@mdo

Veniam marfa overskæg skateboard, adipisicing fugiat velit pitchfork skæg. Freegan skæg aliqua cupidatat mcsweeney's vero. Cupidatat fire loko nisi, ea helvetica nulla carles. Tatoveret cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles ikke-æstetisk øvelse quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

en

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 er adipisicing. Consectetur nisi DIY minim messenger taske. Cred ex in, sustainable delectus consectetur fanny pack iphone.

to

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 ironi, thundercats du sikkert ikke har hørt om dem consequat hættetrøje glutenfri lo-fi fap aliquip. Labore elit placeat før de solgte ud, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Brug

Via dataattributter

For nemt at tilføje scrollspy-adfærd til din topbjælke-navigation, skal du blot tilføje data-spy="scroll"til det element, du vil spionere på (det vil oftest være kroppen) og data-target=".navbar"vælge hvilken nav, der skal bruges. Du vil gerne bruge scrollspy med en .navkomponent.

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

Via JavaScript

Ring til scrollspy via JavaScript:

  1. $ ( '#navbar' ). scrollspy ()
Heads up! Navbar-links skal have opløselige id-mål. For eksempel skal et <a href="#home">home</a>must svare til noget i dom som <div id="home"></div>.

Metoder

.scrollspy('refresh')

Når du bruger scrollspy i forbindelse med tilføjelse eller fjernelse af elementer fra DOM, skal du kalde opdateringsmetoden sådan:

  1. $ ( '[data-spy="scroll"]' ). hver ( funktion () {
  2. var $spy = $ ( dette ). scrollspy ( 'opdater' )
  3. });

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-offset="".

Navn type Standard beskrivelse
offset nummer 10 Pixels til forskydning fra toppen ved beregning af rulleposition.

Begivenheder

Begivenhed Beskrivelse
aktivere Denne begivenhed udløses, når et nyt element bliver aktiveret af scrollspyen.

Eksempler på faner

Tilføj hurtig, dynamisk fanefunktionalitet til overgang gennem ruder med lokalt indhold, selv via rullemenuer.

Rå denim du har sikkert ikke hørt om dem jeanshorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegansk helvetica. Reprehenderit slagter retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan amerikansk beklædning, 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.


Brug

Aktiver faner, der kan tabuleres via JavaScript (hver fane skal aktiveres individuelt):

  1. $ ( '#myTab a' ). klik ( funktion ( e ) {
  2. e . forhindreDefault ();
  3. $ ( dette ). faneblad ( 'vis' );
  4. })

Du kan aktivere individuelle faner på flere måder:

  1. $ ( '#myTab a[href="#profile"]' ). faneblad ( 'vis' ); // Vælg fane efter navn
  2. $ ( '#myTab a:first' ). faneblad ( 'vis' ); // Vælg den første fane
  3. $ ( '#myTab a:sidste' ). faneblad ( 'vis' ); // Vælg sidste fane
  4. $ ( '#myTab li:eq(2) a' ). faneblad ( 'vis' ); // Vælg tredje fane (0-indekseret)

Markup

Du kan aktivere en fane- eller pillenavigation uden at skrive JavaScript ved blot at angive data-toggle="tab"eller data-toggle="pill"på et element. Tilføjelse af klasserne og til fanen navvil anvende Bootstrap-fanebladets stil.nav-tabsul

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Startside </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Beskeder </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Indstillinger </a></li>
  6. </ul>

Metoder

$().tab

Aktiverer et faneelement og indholdsbeholder. Tab skal have enten en data-targeteller en hrefmålretning mod en containernode i DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Hjem </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Beskeder </a></li>
  5. <li><a href = "#settings" > Indstillinger </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-indhold" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "meddelelser" > ... </div>
  12. <div class = "tab-pane" id = "indstillinger" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( funktion () {
  17. $ ( '#myTab a:sidste' ). faneblad ( 'vis' );
  18. })
  19. </script>

Begivenheder

Begivenhed Beskrivelse
at vise Denne begivenhed udløses på faneshow, men før den nye fane er blevet vist. Brug event.targetog event.relatedTargettil at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig).
vist Denne begivenhed udløses på faneshow, efter at en fane er blevet vist. Brug event.targetog event.relatedTargettil at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'vist' , funktion ( e ) {
  2. e . mål // aktiveret fane
  3. e . relateret mål // forrige fane
  4. })

Eksempler

Inspireret af det fremragende jQuery.tipsy plugin skrevet af Jason Frame; Værktøjstip er en opdateret version, som ikke er afhængig af billeder, bruger CSS3 til animationer og dataattributter til lokal titellagring.

Af præstationsmæssige årsager er værktøjstip og popover-data-api tilvalg, hvilket betyder, at du selv skal initialisere dem .

Hold markøren over nedenstående links for at se værktøjstip:

Stramme bukser næste niveau keffiyeh du har sikkert ikke hørt om dem. Photo booth skæg rå denim bogtryk vegansk messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie bæredygtige quinoa 8-bit amerikansk beklædning har en frotté richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fire loko mcsweeney's cleanse veganske chambray. En virkelig ironisk håndværker uanset keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin kaffe viral.

Fire retninger

Værktøjstip i inputgrupper

Når du bruger værktøjstip og popovers med Bootstrap-inputgrupperne, skal du indstille container(dokumenteret nedenfor) mulighed for at undgå uønskede bivirkninger.


Brug

Udløs værktøjstippet via JavaScript:

  1. $ ( '#eksempel' ). værktøjstip ( muligheder )

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-animation="".

Navn type Standard beskrivelse
animation boolesk rigtigt anvende en css-fade-overgang til værktøjstip
html boolesk falsk Indsæt html i værktøjstip. Hvis falsk, vil jquerys textmetode blive brugt til at indsætte indhold i dom. Brug tekst, hvis du er bekymret for XSS-angreb.
placering streng | fungere 'top' hvordan placeres værktøjstip - top | nederst | venstre | ret
vælger snor falsk Hvis der er angivet en vælger, vil værktøjstip-objekter blive uddelegeret til de angivne mål.
titel streng | fungere '' standard titelværdi, hvis "title"-tagget ikke er til stede
udløser snor 'hover fokus' hvordan værktøjstip udløses - klik | svæv | fokus | brugervejledning. Bemærk du case pass trigger multiple, space adskilt, trigger typer.
forsinke nummer | objekt 0

forsinket visning og skjulning af værktøjstip (ms) - gælder ikke for manuel triggertype

Hvis et nummer er angivet, anvendes forsinkelse på både skjul/show

Objektstrukturen er:delay: { show: 500, hide: 100 }

beholder streng | falsk falsk

Føjer værktøjstip til et bestemt elementcontainer: 'body'

Heads up! Valgmuligheder for individuelle værktøjstip kan alternativt specificeres ved brug af dataattributter.

Markup

  1. <a href = "#" data-toggle = "værktøjstip" title = "første værktøjstip" > hold markøren over mig </a>

Metoder

$().værktøjstip(indstillinger)

Vedhæfter en værktøjstip-handler til en elementsamling.

.tooltip('vis')

Viser et elements værktøjstip.

  1. $ ( '#element' ). værktøjstip ( 'vis' )

.tooltip('skjul')

Skjuler et elements værktøjstip.

  1. $ ( '#element' ). værktøjstip ( 'skjul' )

.tooltip('toggle')

Skifter et elements værktøjstip.

  1. $ ( '#element' ). værktøjstip ( 'skift' )

.tooltip('destroy')

Skjuler og ødelægger et elements værktøjstip.

  1. $ ( '#element' ). værktøjstip ( 'ødelægge' )

Eksempler

Tilføj små overlejringer af indhold, som dem på iPad, til ethvert element for at rumme sekundær information. Hold markøren over knappen for at udløse popover. Kræver værktøjstip for at være inkluderet.

Statisk popover

Fire muligheder er tilgængelige: top-, højre-, bund- og venstrejusteret.

Popover top

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

Popover højre

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

Popover bund

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

Popover venstre

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

Ingen markeringer, der vises som popovers, genereres fra JavaScript og indhold i en dataattribut.

Live demo

Fire retninger


Brug

Aktiver popovers via JavaScript:

  1. $ ( '#eksempel' ). popover ( valgmuligheder )

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-animation="".

Navn type Standard beskrivelse
animation boolesk rigtigt anvende en css-fade-overgang til værktøjstip
html boolesk falsk Indsæt html i popoveren. Hvis falsk, vil jquerys textmetode blive brugt til at indsætte indhold i dom. Brug tekst, hvis du er bekymret for XSS-angreb.
placering streng | fungere 'ret' hvordan placeres popover - top | nederst | venstre | ret
vælger snor falsk hvis der er angivet en vælger, vil værktøjstip-objekter blive uddelegeret til de angivne mål
udløser snor 'klik' hvordan popover udløses - klik | svæv | fokus | brugervejledning
titel streng | fungere '' standard titelværdi, hvis attributten "title" ikke er til stede
indhold streng | fungere '' standardindholdsværdi, hvis attributten "data-content" ikke er til stede
forsinke nummer | objekt 0

forsinkelse, der viser og skjuler popover (ms) - gælder ikke for manuel triggertype

Hvis et nummer er angivet, anvendes forsinkelse på både skjul/show

Objektstrukturen er:delay: { show: 500, hide: 100 }

beholder streng | falsk falsk

Føjer popover til et bestemt elementcontainer: 'body'

Heads up! Valgmuligheder for individuelle popovers kan alternativt specificeres ved brug af dataattributter.

Markup

Af præstationsmæssige årsager er Tooltip og Popover data-api'erne tilvalgt. Hvis du gerne vil bruge dem, skal du blot angive en valgmulighed.

Metoder

$().popover(indstillinger)

Initialiserer popovers for en elementsamling.

.popover('vis')

Afslører en popover for elementer.

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

.popover('skjul')

Skjuler en popover for elementer.

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

.popover('toggle')

Skifter en popover for elementer.

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

.popover('destroy')

Skjuler og ødelægger et elements popover.

  1. $ ( '#element' ). popover ( 'ødelægge' )

Eksempler på advarsler

Tilføj afvisningsfunktionalitet til alle advarselsmeddelelser med dette plugin.

Hellige guacamole! Bedst tjek dig selv, du ser ikke for godt ud.

Oh snap! Du har en fejl!

Skift dit og dat og prøv igen. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Tag denne handling Eller gør dette


Brug

Aktiver afvisning af en advarsel via JavaScript:

  1. $ ( ".alert" ). advarsel ()

Markup

Du skal bare tilføje data-dismiss="alert"til din lukkeknap for automatisk at give en alarmlukningsfunktionalitet.

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

Metoder

$().alert()

Omslutter alle advarsler med tæt funktionalitet. For at få dine underretninger til at animere, når de er lukket, skal du sørge for, at klassen .fadeog .inklassen allerede er anvendt på dem.

.alert('close')

Lukker en alarm.

  1. $ ( ".alert" ). alarm ( 'luk' )

Begivenheder

Bootstraps advarselsklasse afslører nogle få hændelser for tilslutning til advarselsfunktionalitet.

Begivenhed Beskrivelse
tæt Denne hændelse udløses med det samme, når closeinstansmetoden kaldes.
lukket Denne begivenhed udløses, når alarmen er blevet lukket (vil vente på, at css-overgange er fuldført).
  1. $ ( '#my-alert' ). bind ( 'lukket' , funktion () {
  2. // gør noget…
  3. })

Eksempler på anvendelser

Gør mere med knapper. Styr knaptilstande eller opret grupper af knapper til flere komponenter som værktøjslinjer.

Stateful

Tilføj data-loading-text="Loading..."for at bruge en indlæsningstilstand på en knap.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Indlæser..." > Indlæser tilstand </button>

Enkelt skifte

Tilføj data-toggle="button"for at aktivere skifte på en enkelt knap.

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

Afkrydsningsfelt

Tilføj data-toggle="buttons-checkbox"for at skifte til afkrydsningsfeltstil på btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Venstre </button>
  3. <button type = "button" class = "btn btn-primary" > Middle </button>
  4. <button type = "button" class = "btn btn-primary" > Højre </button>
  5. </div>

Radio

Tilføj data-toggle="buttons-radio"for at skifte til radiostil på btn-gruppe.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Venstre </button>
  3. <button type = "button" class = "btn btn-primary" > Middle </button>
  4. <button type = "button" class = "btn btn-primary" > Højre </button>
  5. </div>

Brug

Aktiver knapper via JavaScript:

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

Markup

Dataattributter er integrerede i knap-plugin'et. Tjek eksempelkoden nedenfor for de forskellige opmærkningstyper.

Muligheder

Ingen

Metoder

$().button('toggle')

Skifter push-tilstand. Giver knappen det udseende, at den er blevet aktiveret.

Heads up! Du kan aktivere automatisk skift af en knap ved at bruge data-toggleattributten.
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

$().button('indlæser')

Indstiller knaptilstand til indlæsning - deaktiverer knap og bytter tekst til indlæsning af tekst. Indlæsningstekst skal defineres på knapelementet ved hjælp af dataattributten data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "indlæser ting..." > ... </button>
Heads up! Firefox bevarer den deaktiverede tilstand på tværs af sideindlæsninger . En løsning for dette er at bruge autocomplete="off".

$().button('reset')

Nulstiller knaptilstand - bytter tekst til original tekst.

$().knap(streng)

Nulstiller knaptilstand - skifter tekst til enhver datadefineret teksttilstand.

  1. <button type = "button" class = "btn" data-complete-text = "færdig!" > ... </knap>
  2. <script>
  3. $ ( '.btn' ). knap ( 'fuldført' )
  4. </script>

Om

Få basisstile og fleksibel støtte til sammenklappelige komponenter som harmonikaer og navigation.

* Kræver, at Transitions-pluginnet er inkluderet.

Eksempel på harmonika

Ved at bruge kollaps-pluginet byggede vi en simpel harmonikastil-widget:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sætte en fugl på det blæksprutte single-oprindelse kaffe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegansk excepteur slagter vice lomo. Leggings occaecat craft beer farm-to-table, rå denim æstetisk synth nesciunt du sikkert ikke har hørt om dem accusamus labore bæredygtig VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sætte en fugl på det blæksprutte single-oprindelse kaffe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegansk excepteur slagter vice lomo. Leggings occaecat craft beer farm-to-table, rå denim æstetisk synth nesciunt du sikkert ikke har hørt om dem accusamus labore bæredygtig VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sætte en fugl på det blæksprutte single-oprindelse kaffe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegansk excepteur slagter vice lomo. Leggings occaecat craft beer farm-to-table, rå denim æstetisk synth nesciunt du sikkert ikke har hørt om dem accusamus labore bæredygtig VHS.
  1. <div class = "accordion" id = "accordion2" >
  2. <div class = "harmonika-gruppe" >
  3. <div class = "harmonika-overskrift" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Sammenklappelig gruppeelement #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "harmonika-krop falder sammen" >
  9. <div class = "harmonika-indre" >
  10. Anim pariatur kliché...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "harmonika-gruppe" >
  15. <div class = "harmonika-overskrift" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Sammenklappelig gruppeelement #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "harmonika-krop kollaps" >
  21. <div class = "harmonika-indre" >
  22. Anim pariatur kliché...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Du kan også bruge plugin'et uden harmonikamarkeringen. Få en knap til at skifte til at udvide og kollapse et andet element.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. enkel sammenklappelig
  3. </button>
  4.  
  5. <div id = "demo" class = "kollaps ind" > </div>

Brug

Via dataattributter

Bare tilføj data-toggle="collapse"og et data-targettil element for automatisk at tildele kontrol over et sammenklappeligt element. Attributten data-targetaccepterer en css-vælger at anvende sammenbruddet på. Sørg for at tilføje klassen collapsetil det sammenklappelige element. Hvis du vil have den til at åbne som standard, skal du tilføje den ekstra klasse in.

For at tilføje harmonika-lignende gruppestyring til en sammenklappelig kontrol, skal du tilføje dataattributten data-parent="#selector". Se demoen for at se dette i aktion.

Via JavaScript

Aktiver manuelt med:

  1. $ ( ".kollapse" ). kollapse ()

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-parent="".

Navn type Standard beskrivelse
forælder vælger falsk Hvis vælgeren vil alle sammenklappelige elementer under den angivne overordnede blive lukket, når dette sammenklappelige element vises. (ligner traditionel harmonikaadfærd)
skifte boolesk rigtigt Slår det sammenklappelige element til eller fra ved kald

Metoder

.collapse(indstillinger)

Aktiverer dit indhold som et sammenklappeligt element. Accepterer en valgfri indstilling object.

  1. $ ( '#myCollapsible' ). kollaps ({
  2. skifte : falsk
  3. })

.collapse('toggle')

Skifter et sammenklappeligt element til at blive vist eller skjult.

.collapse('vis')

Viser et sammenklappeligt element.

.collapse('skjul')

Skjuler et sammenklappeligt element.

Begivenheder

Bootstraps kollapsklasse afslører nogle få hændelser for at tilslutte sig sammenbrudsfunktionalitet.

Begivenhed Beskrivelse
at vise Denne hændelse udløses med det samme, når showinstansmetoden kaldes.
vist Denne hændelse udløses, når et sammenbrudselement er blevet gjort synligt for brugeren (vil vente på, at css-overgange er fuldført).
skjule Denne hændelse udløses straks, når hidemetoden er blevet kaldt.
skjult Denne hændelse udløses, når et sammenbrudselement er blevet skjult for brugeren (vil vente på, at css-overgange er fuldført).
  1. $ ( '#myCollapsible' ). on ( 'skjult' , funktion () {
  2. // gør noget…
  3. })

Eksempel

Et grundlæggende, let udvidet plugin til hurtigt at skabe elegante skrivehoveder med enhver form for tekstinput.

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

Du skal indstille autocomplete="off"til at forhindre standardbrowsermenuer i at blive vist over Bootstrap typeahead-rullemenuen.


Brug

Via dataattributter

Tilføj dataattributter for at registrere et element med typeahead-funktionalitet som vist i eksemplet ovenfor.

Via JavaScript

Kald indtastningen manuelt med:

  1. $ ( '.typeahead' ). typeforud ()

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-source="".

Navn type Standard beskrivelse
kilde array, funktion [ ] Datakilden, der skal forespørges mod. Kan være en række strenge eller en funktion. Funktionen videregives to argumenter, queryværdien i indtastningsfeltet og processtilbagekaldet. Funktionen kan bruges synkront ved at returnere datakilden direkte eller asynkront via processtilbagekaldets enkelte argument.
genstande nummer 8 Det maksimale antal elementer, der skal vises i rullemenuen.
minLængde nummer 1 Den mindste tegnlængde, der kræves, før forslag til autofuldførelse udløses
matcher fungere sag ufølsom Metoden, der bruges til at bestemme, om en foresp��rgsel matcher en vare. Accepterer et enkelt argument, itemsom forespørgslen skal testes imod. Få adgang til den aktuelle forespørgsel med this.query. Returner en boolean true, hvis forespørgslen er et match.
sortering fungere eksakt match,
følsomme mellem store og
små bogstaver, ufølsom
Metode, der bruges til at sortere autofuldførelsesresultater. Accepterer et enkelt argument itemsog har omfanget af typeahead-forekomsten. Referer til den aktuelle forespørgsel med this.query.
opdatering fungere returnerer valgt vare Metoden brugt til at returnere valgt vare. Accepterer et enkelt argument, itemog har omfanget af typeahead-forekomsten.
highlighter fungere fremhæver alle standardmatches Metode, der bruges til at fremhæve autofuldførelsesresultater. Accepterer et enkelt argument itemog har omfanget af typeahead-forekomsten. Skal returnere html.

Metoder

.typeahead(indstillinger)

Initialiserer et input med en typeahead.

Eksempel

Undernavigationen til venstre er en live demo af affix-plugin'et.


Brug

Via dataattributter

For nemt at tilføje affix-adfærd til ethvert element, skal du blot tilføje data-spy="affix"til det element, du vil spionere på. Brug derefter forskydninger til at definere, hvornår fastgørelsen af ​​et element skal slås til og fra.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Heads up! Du skal administrere placeringen af ​​et fastgjort element og adfærden hos dets umiddelbare forælder. Positionen styres af affix, affix-top, og affix-bottom. Husk at tjekke for en potentielt kollapset forælder, når affikset træder i kraft, da det fjerner indhold fra sidens normale flow.

Via JavaScript

Kald affix-pluginnet via JavaScript:

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

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-offset-top="200".

Navn type Standard beskrivelse
offset nummer | funktion | objekt 10 Pixels at forskyde fra skærmen ved beregning af scrollposition. Hvis der angives et enkelt tal, vil forskydningen blive anvendt i både top og venstre retning. For at lytte efter en enkelt retning eller flere unikke forskydninger skal du blot angive et objekt offset: { x: 10 }. Brug en funktion, når du dynamisk skal levere en offset (nyttigt for nogle responsive designs).