Individuell eller kompilert

Hvis du har lastet ned den nyeste versjonen av Bootstrap, inneholder både bootstrap.js og bootstrap.min.js alle pluginene som er oppført på denne siden.

Dataattributter

Du kan bruke alle Bootstrap-plugins rent gjennom markup API uten å skrive en eneste linje med JavaScript. Dette er Bootstraps førsteklasses API og bør være din første vurdering når du bruker en plugin.

Når det er sagt, kan det i noen situasjoner være ønskelig å slå av denne funksjonaliteten. Derfor gir vi også muligheten til å deaktivere dataattributtet API ved å oppheve bindingen av alle hendelser på kroppen med navneavstand med `'data-api'`. Dette ser slik ut:

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

Alternativt, for å målrette mot et spesifikt plugin, inkluderer du bare plugin-navnet som et navneområde sammen med data-api-navneområdet slik:

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

Programmatisk API

Vi mener også at du bør kunne bruke alle Bootstrap-plugins rent gjennom JavaScript API. Alle offentlige API-er er enkle, kjedebare metoder, og returnerer samlingen som ble utført.

$ ( ".btn.danger" ). knapp ( "veksle" ). addClass ( "fett" )

Alle metoder bør godta et valgfritt alternativobjekt, en streng som retter seg mot en bestemt metode, eller ingenting (som starter en plugin med standard oppførsel):

$ ( "#myModal" ). modal () // initialisert med standardverdier                       
$ ( "#myModal" ). modal ({ keyboard : false }) // initialisert uten tastatur     
$ ( "#myModal" ). modal ( 'show' ) // initialiserer og påkaller show umiddelbart                

Hver plugin viser også sin rå konstruktør på en `Constructor`-egenskap: $.fn.popover.Constructor. Hvis du vil ha en bestemt plugin-forekomst, kan du hente den direkte fra et element: $('[rel=popover]').data('popover').

arrangementer

Bootstrap gir tilpassede hendelser for de fleste plugins unike handlinger. Vanligvis kommer disse i en infinitiv og partisippform - der infinitiv (eks. show) utløses ved starten av en hendelse, og partisippform (eks. shown) utløses ved fullføring av en handling.

Alle infinitive hendelser gir preventDefault-funksjonalitet. Dette gir muligheten til å stoppe utførelsen av en handling før den starter.

$ ( '#myModal' ). på ( 'vis' , funksjon ( e ) {   
    hvis (! data ) returnerer e . preventDefault () // stopper modal fra å bli vist   
})

Om overganger

For enkle overgangseffekter, inkluderer bootstrap-transition.js én gang sammen med de andre JS-filene. Hvis du bruker den kompilerte (eller minifiserte) bootstrap.js, er det ikke nødvendig å inkludere dette – det er der allerede.

Brukssaker

Noen få eksempler på overgangsplugin:

• Skyv eller falmer i modaler
• Fading ut faner
• Uttoningsvarsler
• Skyvbare karusellruter

Eksempler

Modaler er strømlinjeformede, men fleksible, dialogmeldinger med minimum nødvendig funksjonalitet og smarte standardinnstillinger.

Statisk eksempel

En gjengitt modal med topptekst, brødtekst og sett med handlinger i bunnteksten.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Modal overskrift </h3>
  </div>
  <div class = "modal-body" > 
    <p> En fin kropp... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Lukk </a>  
    <a href = "#" class = "btn btn-primary" > Lagre endringer </a>  
  </div>
</div>

Live demo

Veksle en modal via JavaScript ved å klikke på knappen nedenfor. Den vil gli ned og tone inn fra toppen av siden.

<-- Knapp for å utløse modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Start 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 overskrift </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" > Lukk </button>   
    <button class = "btn btn-primary" > Lagre endringer </button> 
  </div>
</div>

Bruk

Via dataattributter

Aktiver en modal uten å skrive JavaScript. Sett data-toggle="modal"på et kontrollerelement, som en knapp, sammen med en data-target="#foo"eller href="#foo"for å målrette en bestemt modal for å veksle.

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

Via JavaScript

Ring en modal med id myModalmed en enkelt linje med JavaScript:

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

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-backdrop="".

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

Metoder

.modal(alternativer)

Aktiverer innholdet ditt som en modal. Godtar et valgfritt alternativ object.

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

.modal('toggle')

Bytter en modal manuelt.

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

.modal('show')

Åpner en modal manuelt.

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

.modal('skjul')

Skjuler en modal manuelt.

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

arrangementer

Bootstraps modalklasse avslører noen få hendelser for å koble til modal funksjonalitet.

$ ( '#myModal' ). på ( 'skjult' , funksjon () {   
  // gjør noe…
})

Eksempler

Legg til rullegardinmenyer til nesten hva som helst med denne enkle plugin-en, inkludert navigasjonslinjen, fanene og pillene.

Innenfor en navigasjonslinje

Innenfor faner

Bruk

Via dataattributter

Legg data-toggle="dropdown"til en lenke eller knapp for å veksle mellom en rullegardin.

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

For å beholde nettadresser intakte, bruk data-targetattributtet i stedet for href="#".

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

Via JavaScript

Ring rullegardinmenyene via JavaScript:

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

Alternativer

Ingen

Metoder

$().dropdown()

Et programatisk API for å aktivere menyer for en gitt navigasjonslinje eller navigering med faner.

Eksempel i navbar

ScrollSpy-pluginen er for automatisk oppdatering av nav-mål basert på rulleposisjon. Rull området under navigasjonslinjen og se den aktive klassen endre seg. Underelementene i rullegardinmenyen vil også bli uthevet.

Bruk

Via dataattributter

For enkelt å legge til scrollspy-adferd til topplinjenavigasjonen, legg data-spy="scroll"til elementet du vil spionere på (vanligvis vil dette være kroppen) og data-target=".navbar"for å velge hvilken nav som skal brukes. Du vil bruke 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 bruker scrollspy i forbindelse med å legge til eller fjerne elementer fra DOM, må du kalle oppdateringsmetoden slik:

$ ( '[data-spy="scroll"]' ). hver ( funksjon () {  
  var $spy = $ ( dette ). scrollspy ( 'oppdater' )
});

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-offset="".

arrangementer

Eksempelfaner

Legg til rask, dynamisk fanefunksjonalitet for å gå gjennom ruter med lokalt innhold, selv via rullegardinmenyer.

Bruk

Aktiver tabbare faner via JavaScript (hver fane må aktiveres individuelt):

$ ( '#myTab a' ). klikk ( funksjon ( e ) {  
  e . preventDefault ();
  $ ( dette ). tab ( 'vis' );
})

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

$ ( '#myTab a[href="#profile"]' ). tab ( 'vis' ); // Velg fane etter navn 
$ ( '#myTab a:first' ). tab ( 'vis' ); // Velg første fane 
$ ( '#myTab a:last' ). tab ( 'vis' ); // Velg siste fane 
$ ( '#myTab li:eq(2) a' ). tab ( 'vis' ); // Velg tredje fane (0-indeksert) 

Markup

Du kan aktivere en fane- eller pillenavigasjon uten å skrive noe JavaScript ved å spesifisere data-toggle="tab"eller data-toggle="pill"på et element. Hvis du legger til navog - nav-tabsklassene i fanen ul, brukes Bootstrap-fanestilen.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Hjem </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Meldinger </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Innstillinger </a></li>  
</ul>

Metoder

$().tab

Aktiverer et faneelement og innholdsbeholder. Tab skal ha enten en data-targeteller en hrefmålrettet beholdernode i DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Hjem </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Meldinger </a></li> 
  <li><a href = "#settings" > Innstillinger </a></li> 
</ul>
 
<div class = "tab-innhold" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "meldinger" > ... </div>  
  <div class = "tab-pane" id = "innstillinger" > ... </div>  
</div>
 
<script>
  $ ( funksjon () {  
    $ ( '#myTab a:last' ). tab ( 'vis' );
  })
</script>

arrangementer

$ ( 'a[data-toggle="tab"]' ). på ( 'vist' , funksjon ( e ) {   
  e . mål // aktivert fane
  e . relatedTarget // forrige fane
})

Eksempler

Inspirert av den utmerkede jQuery.tipsy-pluginen skrevet av Jason Frame; Verktøytips er en oppdatert versjon som ikke er avhengig av bilder, bruker CSS3 for animasjoner og dataattributter for lokal tittellagring.

Hold markøren over koblingene nedenfor for å se verktøytips:

Fire retninger

Bruk

Utløs verktøytipset via JavaScript:

$('#example').tooltip(options)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

<a href="#" rel="tooltip" title="first tooltip">hover over me</a>

Methods

$().tooltip(options)

Attaches a tooltip handler to an element collection.

.tooltip('show')

Reveals an element's tooltip.

$('#element').tooltip('show')

.tooltip('hide')

Hides an element's tooltip.

$('#element').tooltip('hide')

.tooltip('toggle')

Toggles an element's tooltip.

$('#element').tooltip('toggle')

.tooltip('destroy')

Hides and destroys an element's tooltip.

$('#element').tooltip('destroy')

Examples

Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. Requires Tooltip to be included.

Static popover

Four options are available: top, right, bottom, and left aligned.

No markup shown as popovers are generated from JavaScript and content within a data attribute.

Live demo

Usage

Enable popovers via JavaScript:

$('#example').popover(options)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

Methods

$().popover(options)

Initializes popovers for an element collection.

.popover('show')

Reveals an elements popover.

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

.popover('hide')

Hides an elements popover.

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

.popover('toggle')

Toggles an elements popover.

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

.popover('destroy')

Hides and destroys an element's popover.

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

Example alerts

Add dismiss functionality to all alerge messages with this plugin.

Usage

Enable dismissal of an alert via JavaScript:

$(".alert").alert()

Markup

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

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

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

$(".alert").alert('close')

Events

Bootstrap's alert class exposes a few events for hooking into alert functionality.

$('#my-alert').bind('closed', function () {
  // do something…
})

Example uses

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Stateful

Add data-loading-text="Loading..." to use a loading state on a button.

<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>

Single toggle

Add data-toggle="button" to activate toggling on a single button.

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

Checkbox

Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div>

Radio

Add data-toggle="buttons-radio" for radio style toggling on btn-group.

<div class="btn-group" data-toggle="buttons-radio">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div>

Usage

Enable buttons via JavaScript:

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

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

Options

None

Methods

$().button('toggle')

Toggles push state. Gives the button the appearance that it has been activated.

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

$().button('loading')

Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.

<button type="button" class="btn" data-loading-text="loading stuff..." >...</button>

$().button('reset')

Resets button state - swaps text to original text.

$().button(string)

Resets button state - swaps text to any data defined text state.

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

About

Get base styles and flexible support for collapsible components like accordions and navigation.

* Requires the Transitions plugin to be included.

Example accordion

Using the collapse plugin, we built a simple accordion style widget:

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  simple collapsible
</button>
 
<div id="demo" class="collapse in"> … </div>

Usage

Via data attributes

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

Via JavaScript

Enable manually with:

$(".collapse").collapse()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

Methods

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Toggles a collapsible element to shown or hidden.

.collapse('show')

Shows a collapsible element.

.collapse('hide')

Hides a collapsible element.

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

$('#myCollapsible').on('hidden', function () {
  // do something…
})

Example carousel

The slideshow below shows a generic plugin and component for cycling through elements like a carousel.

First Thumbnail label

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.

Second Thumbnail label

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.

Third Thumbnail label

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="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Usage

Via data attributes

...

Via JavaScript

Call carousel manually with:

$('.carousel').carousel()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="".

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

Example

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

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

Usage

Via data attributes

Add data attributes to register an element with typeahead functionality as shown in the example above.

Via JavaScript

Call the typeahead manually with:

$('.typeahead').typeahead()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".

Methods

.typeahead(options)

Initializes an input with a typeahead.

Example

The subnavigation on the left is a live demo of the affix plugin.

Usage

Via data attributes

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

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

Via JavaScript

Call the affix plugin via JavaScript:

$('#navbar').affix()

Methods

.affix('refresh')

When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:

$('[data-spy="affix"]').each(function () {
  $(this).affix('refresh')
});

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".