Individuell eller sammanställd

Om du har laddat ner den senaste versionen av Bootstrap, innehåller både bootstrap.js och bootstrap.min.js alla plugins som listas på den här sidan.

Dataattribut

Du kan använda alla Bootstrap-plugins enbart genom markup-API:et utan att skriva en enda rad JavaScript. Detta är Bootstraps första klassens API och bör vara ditt första övervägande när du använder ett plugin.

Som sagt, i vissa situationer kan det vara önskvärt att stänga av den här funktionen. Därför tillhandahåller vi också möjligheten att inaktivera dataattributet API genom att avbinda alla händelser på kroppen med namnintervall med `'data-api'`. Det här ser ut så här:

$ ( 'kropp' ). av ( '.data-api' )

Alternativt, för att rikta in sig på ett specifikt plugin, inkludera bara pluginnamnet som ett namnområde tillsammans med data-api-namnområdet så här:

$ ( 'kropp' ). av ( '.alert.data-api' )

Programmatisk API

Vi tror också att du bör kunna använda alla Bootstrap-plugins enbart genom JavaScript API. Alla offentliga API:er är enkla, kedjabara metoder och returnerar den samling som åtgärdats.

$ ( ".btn.danger" ). knappen ( "växla" ). addClass ( "fett" )

Alla metoder bör acceptera ett valfritt alternativobjekt, en sträng som riktar sig mot en viss metod, eller ingenting (som initierar en plugin med standardbeteende):

$ ( "#myModal" ). modal () // initierad med standardvärden                       
$ ( "#myModal" ). modal ({ keyboard : false }) // initierad utan tangentbord     
$ ( "#myModal" ). modal ( 'show' ) // initierar och anropar show omedelbart                

Varje plugin exponerar också sin råa konstruktor på en `Constructor`-egenskap: $.fn.popover.Constructor. Om du vill skaffa en viss plugin-instans, hämta den direkt från ett element: $('[rel=popover]').data('popover').

evenemang

Bootstrap tillhandahåller anpassade händelser för de flesta plugins unika åtgärder. I allmänhet kommer dessa i en infinitiv och participform - där infinitiv (ex. show) utlöses i början av en händelse, och dess participform (ex . ) utlöses när shownen handling slutförs.

Alla infinitiva händelser tillhandahåller preventDefault-funktionalitet. Detta ger möjligheten att stoppa utförandet av en åtgärd innan den startar.

$ ( '#myModal' ). on ( 'show' , function ( e ) {   
    om (! data ) returnerar e . preventDefault () // stoppar modal från att visas   
})

Om övergångar

För enkla övergångseffekter, inkludera bootstrap-transition.js en gång tillsammans med de andra JS-filerna. Om du använder den kompilerade (eller minifierade) bootstrap.js behöver du inte inkludera detta – det finns redan där.

Användningsfall

Några exempel på övergångsplugin:

• Glidande eller blekning i modaler
• Tona ut flikar
• Tona ut varningar
• Glidande karusellrutor

Exempel

Modalerna är strömlinjeformade men flexibla dialogrutiner med minsta möjliga funktionalitet och smarta standardinställningar.

Statiskt exempel

En renderad modal med sidhuvud, brödtext och uppsättning åtgärder i sidfoten.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "stäng" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Modal rubrik </h3>
  </div>
  <div class = "modal-body" > 
    <p> En fin kropp... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Stäng </a>  
    <a href = "#" class = "btn btn-primary" > Spara ändringar </a>  
  </div>
</div>

Live-demo

Växla en modal via JavaScript genom att klicka på knappen nedan. Den kommer att glida ned och tona in från toppen av sidan.

<-- Knapp för att trigga modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Starta demomodal </a>    
 
<-- Modal -->
<div class = "modal" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Modal header </h3> 
  </div>
  <div class = "modal-body" > 
    <p> En fin kropp... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Stäng </button>   
    <button class = "btn btn-primary" > Spara ändringar </button> 
  </div>
</div>

Användande

Via dataattribut

Aktivera en modal utan att skriva JavaScript. Ställ in data-toggle="modal"på ett kontrollelement, som en knapp, tillsammans med en data-target="#foo"eller href="#foo"för att rikta in en specifik modal att växla.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Starta modal </button>   

Via JavaScript

Anropa en modal med id myModalmed en enda rad JavaScript:

$ ( '#myModal' ). modal ( alternativ )

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-backdrop="".

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

Metoder

.modal(alternativ)

Aktiverar ditt innehåll som en modal. Accepterar ett valfritt alternativ object.

$ ( '#myModal' ). modal ({
  tangentbord : falskt 
})

.modal('toggle')

Växlar manuellt en modal.

$ ( '#myModal' ). modal ( 'växla' )

.modal('show')

Öppnar en modal manuellt.

$ ( '#myModal' ). modal ( 'visa' )

.modal('hide')

Döljer en modal manuellt.

$ ( '#myModal' ). modal ( 'gömma' )

evenemang

Bootstraps modalklass avslöjar några händelser för att koppla in modal funktionalitet.

$ ( '#myModal' ). on ( 'dold' , function () {   
  // göra någonting…
})

Exempel

Lägg till rullgardinsmenyer till nästan vad som helst med detta enkla plugin, inklusive navigeringsfältet, flikar och piller.

Inom ett navigeringsfält

Inom flikar

Användande

Via dataattribut

Lägg data-toggle="dropdown"till en länk eller knapp för att växla en rullgardinsmeny.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" href = "#" > Dropdown-utlösare </a>  
  <ul class = "dropdown-menu" role = "meny" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

För att hålla webbadresser intakta, använd data-targetattributet istället för href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Falla ner
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "meny" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Via JavaScript

Ring rullgardinsmenyn via JavaScript:

$ ( '.dropdown-toggle' ). dropdown ()

alternativ

Ingen

Metoder

$().dropdown()

Ett programmerat api för att aktivera menyer för ett givet navigeringsfält eller navigering med flikar.

Exempel i navbar

ScrollSpy-pluginen är till för att automatiskt uppdatera navigeringsmål baserat på rullningsposition. Bläddra i området under navigeringsfältet och se hur den aktiva klassen ändras. Underposterna i rullgardinsmenyn kommer också att markeras.

Användande

Via dataattribut

För att enkelt lägga till scrollspy-beteende till din toppfältsnavigering, lägg bara data-spy="scroll"till elementet du vill spionera på (vanligtvis är detta kroppen) och data-target=".navbar"för att välja vilken nav som ska användas. Du vill använda scrollspy med en .navkomponent.

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

Via JavaScript

Ring scrollspy via JavaScript:

$ ( '#navbar' ). scrollspy ()

Metoder

.scrollspy('refresh')

När du använder scrollspy i kombination med att lägga till eller ta bort element från DOM, måste du anropa uppdateringsmetoden så här:

$ ( '[data-spy="scroll"]' ). varje ( funktion () {  
  var $spy = $ ( detta ). scrollspy ( 'uppdatera' )
});

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-offset="".

evenemang

Exempel flikar

Lägg till snabba, dynamiska flikfunktioner för att gå igenom paneler med lokalt innehåll, även via rullgardinsmenyer.

Användande

Aktivera flikar via JavaScript (varje flik måste aktiveras individuellt):

$ ( '#myTab a' ). klicka ( funktion ( e ) {  
  e . preventDefault ();
  $ ( detta ). tab ( 'visa' );
})

Du kan aktivera enskilda flikar på flera sätt:

$ ( '#myTab a[href="#profile"]' ). tab ( 'visa' ); // Välj flik efter namn 
$ ( '#myTab a:first' ). tab ( 'visa' ); // Välj första fliken 
$ ( '#myTab a:last' ). tab ( 'visa' ); // Välj sista fliken 
$ ( '#myTab li:eq(2) a' ). tab ( 'visa' ); // Välj tredje flik (0-indexerad) 

Pålägg

Du kan aktivera en navigering med flikar eller piller utan att skriva något JavaScript genom att helt enkelt ange data-toggle="tab"eller data-toggle="pill"på ett element. Om du lägger till navklasserna nav-tabsoch på fliken ultillämpas Bootstrap-flikens stil.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Hem </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Meddelanden </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Inställningar </a></li>  
</ul>

Metoder

$().tab

Aktiverar ett flikelement och innehållsbehållare. Tab ska ha antingen en data-targeteller en hrefinriktning på en containernod i DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Hem </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Meddelanden </a></li> 
  <li><a href = "#settings" > Inställningar </a></li> 
</ul>
 
<div class = "tab-innehåll" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "meddelanden" > ... </div>  
  <div class = "tab-pane" id = "inställningar" > ... </div>  
</div>
 
<script>
  $ ( function () {  
    $ ( '#myTab a:last' ). tab ( 'visa' );
  })
</script>

evenemang

$ ( 'a[data-toggle="tab"]' ). on ( 'visas' , funktion ( e ) {   
  e . mål // aktiverad flik
  e . relatedTarget // föregående flik
})

Exempel

Inspirerad av det utmärkta plugin-programmet jQuery.tipsy skrivet av Jason Frame; Verktygstips är en uppdaterad version som inte förlitar sig på bilder, använder CSS3 för animationer och dataattribut för lokal titellagring.

Håll muspekaren över länkarna nedan för att se verktygstips:

Fyra riktningar

Användande

Aktivera verktygstipset via JavaScript:

$ ( '#exempel' ). verktygstips ( alternativ )

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-animation="".

Pålägg

Av prestandaskäl är verktygstips och Popover-data-apis aktiverade. Om du vill använda dem anger du bara ett väljaralternativ.

<a href = "#" rel = "tooltip" title = "första verktygstips" > håll muspekaren över mig </a>   

Metoder

$().tooltip(options)

Bifogar en verktygstipshanterare till en elementsamling.

.tooltip('show')

Visar ett elements verktygstips.

$ ( '#element' ). verktygstips ( 'visa' )

.tooltip('hide')

Döljer ett elements verktygstips.

$ ( '#element' ). verktygstips ( 'dölj' )

.tooltip('toggle')

Växlar ett elements verktygstips.

$ ( '#element' ). verktygstips ( 'växla' )

.tooltip('destroy')

Döljer och förstör ett elements verktygstips.

$ ( '#element' ). verktygstips ( 'förstöra' )

Exempel

Lägg till små överlagringar av innehåll, som de på iPad, till valfritt element för att hysa sekundär information. Håll muspekaren över knappen för att utlösa popover. Kräver verktygstips för att vara med.

Statisk popover

Fyra alternativ är tillgängliga: topp-, höger-, botten- och vänsterjusterad.

Ingen markering som visas som popovers genereras från JavaScript och innehåll i ett dataattribut.

Live-demo

Användande

Aktivera popovers via JavaScript:

$ ( '#exempel' ). popover ( alternativ )

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-animation="".

Pålägg

Av prestandaskäl är verktygstips och Popover-data-apis aktiverade. Om du vill använda dem anger du bara ett väljaralternativ.

Metoder

$().popover(alternativ)

Initierar popovers för en elementsamling.

.popover('show')

Avslöjar en popover för element.

$ ( '#element' ). popover ( 'visa' )

.popover('hide')

Döljer en popover för element.

$ ( '#element' ). popover ( 'gömma' )

.popover('toggle')

Växlar en popover för element.

$ ( '#element' ). popover ( 'växla' )

.popover('destroy')

Döljer och förstör ett elements popover.

$ ( '#element' ). popover ( 'förstöra' )

Exempel på varningar

Lägg till avvisningsfunktion i alla varningsmeddelanden med detta plugin.

Användande

Aktivera avvisande av en varning via JavaScript:

$ ( ".alert" ). varning ()

Pålägg

Lägg bara data-dismiss="alert"till i din stängningsknapp för att automatiskt ge en varningsfunktionalitet för stängning.

<a class = "stäng" data-dismiss = "alert" href = "#" > × </a>   

Metoder

$().alert()

Omsluter alla varningar med nära funktionalitet. För att få dina varningar att animeras när de är stängda, se till att de har klassen .fadeoch .inredan tillämpade på dem.

.alert('stäng')

Stänger en varning.

$ ( ".alert" ). varning ( 'stäng' )

evenemang

Bootstraps varningsklass avslöjar några händelser för att koppla in varningsfunktioner.

$ ( '#my-alert' ). bind ( 'stängd' , funktion () {   
  // göra någonting…
})

Exempel på användningar

Gör mer med knappar. Kontrollera knapptillstånd eller skapa grupper av knappar för fler komponenter som verktygsfält.

Statlig

Lägg till data-loading-text="Loading..." för att använda ett laddningstillstånd på en knapp.

<button type = "button" class = "btn btn-primary" data-loading-text = "Laddar..." > Laddar tillstånd </button>   

Enkel växling

Lägg till data-toggle="button" för att aktivera växling på en enda knapp.

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

Kryssruta

Lägg till data-toggle="buttons-checkbox" för växling av kryssrutestil på btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn" > Vänster </button>  
  <button type = "button" class = "btn" > Mitten </button>  
  <button type = "button" class = "btn" > Höger </button>  
</div>

Radio

Lägg till data-toggle="buttons-radio" för att växla radiostil på btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn" > Vänster </button>  
  <button type = "button" class = "btn" > Mitten </button>  
  <button type = "button" class = "btn" > Höger </button>  
</div>

Användande

Aktivera knappar via JavaScript:

$ ( '.nav-tabs' ). knapp ()

Pålägg

Dataattribut är integrerade i knappens plugin. Kolla in exempelkoden nedan för de olika uppmärkningstyperna.

alternativ

Ingen

Metoder

$().button('toggle')

Växlar push-tillstånd. Ger knappen intrycket att den har aktiverats.

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

$().button('laddar in')

Ställer in knappstatus till laddning - inaktiverar knapp och byter text till laddningstext. Laddande text ska definieras på knappelementet med hjälp av dataattributet data-loading-text.

<button type = "button" class = "btn" data-loading-text = "laddar in saker..." > ... </button>    

$().button('reset')

Återställer knappstatus - byter text till originaltext.

$().button(sträng)

Återställer knappstatus - byter text till valfritt datadefinierat textläge.

<button type = "button" class = "btn" data-complete-text = "finished!" > ... </knapp>    
<script>
  $ ( '.btn' ). knapp ( 'komplett' )
</script>

Handla om

Få basstilar och flexibelt stöd för hopfällbara komponenter som dragspel och navigering.

* Kräver att Transitions-pluginet ingår.

Exempel på dragspel

Med hjälp av kollaps-pluginen byggde vi en enkel dragspelstil-widget:

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  enkel hopfällbar
</button>
 
<div id = "demo" class = "kollaps in" > … </div>  

Användande

Via dataattribut

Lägg bara till data-toggle="collapse"och ett data-targettill-element för att automatiskt tilldela kontroll över ett hopfällbart element. Attributet data-targetaccepterar en css-väljare att tillämpa komprimeringen på. Se till att lägga till klassen collapsei det hopfällbara elementet. Om du vill att den ska öppnas som standard lägger du till den extra klassen in.

Lägg till dataattributet för att lägga till dragspelsliknande grupphantering till en hopfällbar kontroll data-parent="#selector". Se demon för att se detta i aktion.

Via JavaScript

Aktivera manuellt med:

$ ( ".kollapse" ). kollapsa ()

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-parent="".

Metoder

.collapse(alternativ)

Aktiverar ditt innehåll som ett hopfällbart element. Accepterar ett valfritt alternativ object.

$ ( '#myCollapsible' ). kollapsa ({
  växla : falskt 
})

.collapse('toggle')

Växlar ett hopfällbart element till att visas eller döljas.

.collapse('show')

Visar ett hopfällbart element.

.collapse('hide')

Döljer ett hopfällbart element.

evenemang

Bootstraps kollapsklass avslöjar några händelser för att koppla in kollapsfunktionalitet.

$ ( '#myCollapsible' ). on ( 'dold' , function () {   
  // göra någonting…
})

Exempel karusell

Bildspelet nedan visar ett generiskt plugin och en komponent för att cykla genom element som en karusell.

Första miniatyretiketten

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Andra miniatyretiketten

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Tredje miniatyretiketten

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "karusellbild" >  
  <!-- Karusellartiklar -->
  <div class = "karusell-inner" > 
    <div class = "aktivt objekt" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Karusell nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "nästa" > › </a>   
</div>

Användande

Via dataattribut

...

Via JavaScript

Ring karusellen manuellt med:

$ ( '.carousel' ). karusell ()

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-interval="".

Metoder

.carousel(alternativ)

Initierar karusellen med ett valfritt alternativ objectoch börjar cykla igenom föremål.

$ ( '.carousel' ). karusell ({
  intervall : 2000 
})

.carousel('cykel')

Cyklar genom karusellföremålen från vänster till höger.

.carousel('paus')

Stoppar karusellen från att cykla genom föremål.

.carousel(nummer)

Cyklar karusellen till en viss bildruta (0-baserad, liknande en array).

.carousel('prev')

Går till föregående post.

.carousel('next')

Går till nästa objekt.

evenemang

Bootstraps karusellklass avslöjar två händelser för att koppla in karusellfunktionalitet.

Exempel

Ett enkelt, enkelt utökat plugin för att snabbt skapa eleganta skrivhuvuden med vilken form som helst.

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

Användande

Via dataattribut

Lägg till dataattribut för att registrera ett element med typahead-funktion som visas i exemplet ovan.

Via JavaScript

Ring skrivhuvudet manuellt med:

$ ( '.typeahead' ). typahead ()

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-source="".

Metoder

.typeahead(alternativ)

Initierar en inmatning med ett skrivhuvud.

Exempel

Undernavigeringen till vänster är en livedemo av affix-plugin.

Användande

Via dataattribut

För att enkelt lägga till affixbeteende till ett element, lägg bara data-spy="affix"till elementet du vill spionera på. Använd sedan förskjutningar för att definiera när du ska koppla på och av fästningen av ett element.

<div data-spy = "affix" data-offset-top = "200" > ... </body>  

Via JavaScript

Ring tillägget affix via JavaScript:

$ ( '#navbar' ). fästa ()

Metoder

.affix('refresh')

När du använder affix i kombination med att lägga till eller ta bort element från DOM, vill du kalla uppdateringsmetoden:

$ ( '[data-spy="affix"]' ). varje ( funktion () {  
  $ ( detta ). anbringa ( 'uppdatera' )
});

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-offset-top="200".