Individueel of samengesteld

Plug-ins kunnen afzonderlijk worden opgenomen (hoewel sommige afhankelijkheden vereisen), of allemaal tegelijk. Zowel bootstrap.js als bootstrap.min.js bevatten alle plug-ins in één bestand.

Gegevenskenmerken

U kunt alle Bootstrap-plug-ins puur via de markup-API gebruiken zonder een enkele regel JavaScript te schrijven. Dit is de eersteklas API van Bootstrap en zou uw eerste overweging moeten zijn bij het gebruik van een plug-in.

Dat gezegd hebbende, kan het in sommige situaties wenselijk zijn om deze functionaliteit uit te schakelen. Daarom bieden we ook de mogelijkheid om de data-attribuut-API uit te schakelen door de binding van alle gebeurtenissen op de body-namespace met `'data-api'` te ontbinden. Dit ziet er zo uit:

$('body').off('.data-api')( 'lichaam' ). uit ( '.data-api' )

Als alternatief kunt u, om een ​​specifieke plug-in te targeten, gewoon de naam van de plug-in opnemen als een naamruimte samen met de data-api-naamruimte als volgt:

$('body').off('.alert.data-api')( 'lichaam' ). uit ( '.alert.data-api' )

Programmatische API

We zijn ook van mening dat u alle Bootstrap-plug-ins puur via de JavaScript-API moet kunnen gebruiken. Alle openbare API's zijn enkele, ketenbare methoden en retourneren de verzameling waarop is gereageerd.

$(".btn.danger").button("toggle").addClass("fat")( ".btn.gevaar" ). knop ( "wisselen" ). addClass ( "vet" )

Alle methoden moeten een optioneel options-object accepteren, een tekenreeks die op een bepaalde methode is gericht, of niets (dat een plug-in start met standaardgedrag):

$("#myModal").modal() // geïnitialiseerd met standaardwaarden( "#myModal" ). modal () // geïnitialiseerd met standaardwaarden                       
$ ( "#myModal" ). modal ({ keyboard : false }) // geïnitialiseerd zonder toetsenbord     
$ ( "#myModal" ). modal ( 'show' ) // initialiseert en roept show onmiddellijk op                

Elke plug-in stelt ook zijn onbewerkte constructor bloot aan een eigenschap `Constructor`: $.fn.popover.Constructor. Als u een bepaalde plug-in-instantie wilt ophalen, haalt u deze rechtstreeks op uit een element: $('[rel=popover]').data('popover').

Geen conflict

Soms is het nodig om Bootstrap-plug-ins te gebruiken met andere UI-frameworks. In deze omstandigheden kunnen naamruimte-botsingen af ​​en toe optreden. Als dit gebeurt, kunt u een beroep doen .noConflictop de plug-in waarvan u de waarde wilt terugzetten.

var bootstrapButton = $.fn.button.noConflict() // retourneer $.fn.button naar eerder toegewezen waardebootstrapButton = $ . fn . knop . noConflict () // retourneer $.fn.button naar eerder toegewezen waarde 
$ . fn . bootstrapBtn = bootstrapButton             // geef $().bootstrapBtn de bootstrap-functionaliteit

Evenementen

Bootstrap biedt aangepaste gebeurtenissen voor de meeste unieke acties van plug-ins. Over het algemeen komen deze in een infinitief en voltooid deelwoordvorm - waarbij de infinitief (bijv. show) wordt geactiveerd aan het begin van een gebeurtenis, en de voltooid deelwoordvorm (bijv. shown) wordt geactiveerd bij de voltooiing van een actie.

Alle infinitieve gebeurtenissen bieden de functionaliteit preventDefault. Dit biedt de mogelijkheid om de uitvoering van een actie te stoppen voordat deze begint.

$('#myModal').on('show', functie (e) {( '#myModal' ). aan ( 'toon' , functie ( e ) {   
    if (! data ) retourneert e . voorkomenDefault () // stopt de weergave van modal   
})

Over overgangen

Voeg voor eenvoudige overgangseffecten bootstrap-transition.js een keer toe naast de andere JS-bestanden. Als je de gecompileerde (of verkleinde) bootstrap.js gebruikt, is het niet nodig om dit op te nemen - het is er al.

Gebruiksgevallen

Een paar voorbeelden van de transitie-plug-in:

• Sliding of fade in modals
• Tabbladen uitfaden
• Waarschuwingen uitfaden
• Schuifbare carrouselruiten

Voorbeelden

Modals zijn gestroomlijnde, maar flexibele dialoogvensters met de minimaal vereiste functionaliteit en slimme standaardinstellingen.

Statisch voorbeeld

Een gerenderd modaal met koptekst, hoofdtekst en reeks acties in de voettekst.

<div class="modal hide fade"> class = "modal hide fade" >
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </knop>    
    <h3> Modale kop </h3>
  </div>
  <div class = "modal-body" > 
    <p> Een fijn lichaam… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Sluiten </a>  
    <a href = "#" class = "btn btn-primary" > Wijzigingen opslaan </a>  
  </div>
</div>

Live demonstratie

Schakel een modaal via JavaScript door op de onderstaande knop te klikken. Het schuift naar beneden en verdwijnt in beeld vanaf de bovenkant van de pagina.

<!-- Knop om modaal te activeren -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Demo-modaal starten </a>    
<!-- Modaal -->
<div id = "myModal" class = "modal hide fade" 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" > Modale kop </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Een fijn lichaam… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Sluiten </button>   
    <button class = "btn btn-primary" > Wijzigingen opslaan </button> 
  </div>
</div>

Gebruik

Via gegevensattributen

Activeer een modaal zonder JavaScript te schrijven. Stel data-toggle="modal"in op een controller-element, zoals een knop, samen met een data-target="#foo"of href="#foo"om een ​​specifieke modaal te targeten om te schakelen.

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

Via JavaScript

Roep een modaal met id myModalaan met een enkele regel JavaScript:

$('#myModal').modal(opties)( '#myModal' ). modaal ( opties )

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-backdrop="".

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

Methoden:

.modaal(opties)

Activeert uw inhoud als modaal. Accepteert een optionele optie object.

$('#myModal').modal({( '#myModal' ). modaal ({
  toetsenbord : false 
})

.modal('toggle')

Schakelt handmatig een modaal in.

$('#myModal').modal('toggle')( '#myModal' ). modaal ( 'toggle' )

.modal('toon')

Opent handmatig een modaal.

$('#myModal').modal('show')( '#myModal' ). modaal ( 'toon' )

.modal('verbergen')

Verbergt handmatig een modaal.

$('#myModal').modal('hide')( '#myModal' ). modaal ( 'verbergen' )

Evenementen

De modale klasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op modale functionaliteit.

$('#myModal').on('hidden', function () {( '#myModal' ). aan ( 'verborgen' , functie () {   
  // doe iets…
})

Voorbeelden

Voeg vervolgkeuzemenu's toe aan bijna alles met deze eenvoudige plug-in, inclusief de navigatiebalk, tabbladen en pillen.

Binnen een navigatiebalk

Binnen tabbladen

Gebruik

Via gegevensattributen

Voeg toe data-toggle="dropdown"aan een link of knop om een ​​vervolgkeuzelijst in te schakelen.

<div class="dropdown"> class = "dropdown" >
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Dropdown-trigger </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Om URL's intact te houden, gebruikt u het data-targetkenmerk in plaats van href="#".

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

Via JavaScript

Roep de vervolgkeuzelijsten op via JavaScript:

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

Opties

Geen

Methoden:

$().dropdown('toggle')

Een programmatische API voor het schakelen tussen menu's voor een bepaalde navigatiebalk of navigatie met tabbladen.

Voorbeeld in navbar

De ScrollSpy-plug-in is bedoeld voor het automatisch bijwerken van navigatiedoelen op basis van de schuifpositie. Scroll door het gebied onder de navigatiebalk en kijk hoe de actieve klas verandert. De dropdown-subitems worden ook gemarkeerd.

Gebruik

Via gegevensattributen

Om eenvoudig scrollspy-gedrag toe te voegen aan uw navigatie op de bovenste balk, voegt data-spy="scroll"u gewoon het element toe dat u wilt bespioneren (meestal is dit de body) en data-target=".navbar"selecteert u welke navigatie u wilt gebruiken. U wilt scrollspy gebruiken met een .navcomponent.

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

Via JavaScript

Bel de scrollspy via JavaScript:

$('#navbar').scrollspy() ( '#navbar' ). scrollspion ()

Methoden:

.scrollspy('vernieuwen')

Wanneer u scrollspy gebruikt in combinatie met het toevoegen of verwijderen van elementen uit de DOM, moet u de vernieuwingsmethode als volgt aanroepen:

$ ( '[data-spy="scroll"]' ). elke ( functie () {  
  var $spy = $ ( dit ). scrollspy ( 'vernieuwen' )
});

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-offset="".

Evenementen

Voorbeeldtabbladen

Voeg snelle, dynamische tabbladfunctionaliteit toe om door deelvensters met lokale inhoud te bladeren, zelfs via vervolgkeuzemenu's.

Gebruik

Tabbladen met tabbladen inschakelen via JavaScript (elk tabblad moet afzonderlijk worden geactiveerd):

$ ( '#mijnTab a' ). klik ( functie ( e ) {  
  e . voorkomenStandaard ();
  $ ( dit ). tabblad ( 'toon' );
})

U kunt afzonderlijke tabbladen op verschillende manieren activeren:

$ ( '#myTab a[href="#profile"]' ). tabblad ( 'toon' ); // Selecteer tabblad op naam 
$ ( '#mijnTab a:eerste' ). tabblad ( 'toon' ); // Selecteer eerste tabblad 
$ ( '#mijnTab a:laatste' ). tabblad ( 'toon' ); // Selecteer laatste tabblad 
$ ( '#myTab li:eq(2) a' ). tabblad ( 'toon' ); // Selecteer derde tabblad (0-geïndexeerd) 

Markup

U kunt een tab- of pill-navigatie activeren zonder JavaScript te schrijven door simpelweg data-toggle="tab"of data-toggle="pill"op een element te specificeren. Door de klassen naven aan het tabblad toe te voegen, wordt de stijl van het Bootstrap-tabblad toegepast.nav-tabsul

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Startpagina </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profiel </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Berichten </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Instellingen </a></li>  
</ul>

Methoden:

$().tab

Activeert een tabelement en inhoudcontainer. Tab moet een data-targetof een hrefgericht hebben op een containerknooppunt in de DOM.

<ul class = "nav nav-tabs" id = "mijnTab" >  
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profiel </a></li> 
  <li><a href = "#messages" > Berichten </a></li> 
  <li><a href = "#settings" > Instellingen </a></li> 
</ul>
 
<div class = "tab-inhoud" > 
  <div class = "tabvenster actief" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-paneel" id = "berichten" > ... </div>  
  <div class = "tab-paneel" id = "instellingen" > ... </div>  
</div>
 
<script>
  $ ( functie () {  
    $ ( '#mijnTab a:laatste' ). tabblad ( 'toon' );
  })
</script>

Evenementen

$ ( 'a[data-toggle="tab"]' ). aan ( 'getoond' , functie ( e ) {   
  e . doel // geactiveerd tabblad
  e . gerelateerdTarget // vorig tabblad
})

Voorbeelden

Geïnspireerd door de uitstekende jQuery.tipsy-plug-in geschreven door Jason Frame; Tooltips zijn een bijgewerkte versie, die niet afhankelijk zijn van afbeeldingen, CSS3 gebruiken voor animaties en gegevenskenmerken voor lokale titelopslag.

Om prestatieredenen zijn de tooltip en popover data-api's opt-in, wat betekent dat u ze zelf moet initialiseren .

Plaats de muisaanwijzer op de onderstaande links om tooltips te zien:

Vier richtingen

Knopinfo in invoergroepen

Wanneer u tooltips en popovers gebruikt met de Bootstrap-invoergroepen, moet u de container(hieronder beschreven) optie instellen om ongewenste neveneffecten te voorkomen.

Gebruik

Activeer de knopinfo via JavaScript:

$ ( '#voorbeeld' ). knopinfo ( opties )

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-animation="".

Markup

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > beweeg over mij </a>   

Methoden:

$().tooltip(opties)

Koppelt een tooltip-handler aan een elementverzameling.

.tooltip('toon')

Onthult de tooltip van een element.

$ ( '#element' ). knopinfo ( 'toon' )

.tooltip('verbergen')

Verbergt de knopinfo van een element.

$ ( '#element' ). knopinfo ( 'verbergen' )

.tooltip('toggle')

Schakelt de knopinfo van een element in.

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

.tooltip('vernietigen')

Verbergt en vernietigt de tooltip van een element.

$ ( '#element' ). knopinfo ( 'vernietigen' )

Voorbeelden

Voeg kleine overlays van inhoud, zoals die op de iPad, toe aan elk element voor het huisvesten van secundaire informatie. Beweeg over de knop om de popover te activeren. Vereist Tooltip om te worden opgenomen.

Statische popover

Er zijn vier opties beschikbaar: boven, rechts, onder en links uitgelijnd.

Er wordt geen opmaak weergegeven omdat popovers worden gegenereerd op basis van JavaScript en inhoud binnen een dataattribuut.

Live demonstratie

Vier richtingen

Gebruik

Popovers inschakelen via JavaScript:

$ ( '#voorbeeld' ). popover ( opties )

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-animation="".

Markup

Om prestatieredenen zijn de Tooltip en Popover data-api's aangemeld. Als u ze wilt gebruiken, geeft u gewoon een selectoroptie op.

Methoden:

$().popover(opties)

Initialiseert popovers voor een elementverzameling.

.popover('toon')

Onthult een pop-over voor elementen.

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

.popover('verbergen')

Verbergt een pop-over voor elementen.

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

.popover('toggle')

Schakelt een pop-over voor elementen in.

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

.popover('vernietigen')

Verbergt en vernietigt de popover van een element.

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

Voorbeeldwaarschuwingen

Voeg afwijzingsfunctionaliteit toe aan alle waarschuwingsberichten met deze plug-in.

Gebruik

Afwijzing van een waarschuwing via JavaScript inschakelen:

$ ( ".waarschuwing" ). waarschuwing ()

Markup

Voeg gewoon toe data-dismiss="alert"aan uw sluitknop om automatisch een waarschuwingsfunctie voor sluiten te geven.

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

Methoden:

$().waarschuwing()

Omhult alle waarschuwingen met sluitfunctionaliteit. Om ervoor te zorgen dat uw waarschuwingen worden geanimeerd wanneer ze zijn gesloten, moet u ervoor zorgen dat de klasse .fadeen .inal op hen is toegepast.

.alert('sluiten')

Sluit een waarschuwing.

$ ( ".waarschuwing" ). waarschuwing ( 'sluiten' )

Evenementen

De waarschuwingsklasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op de waarschuwingsfunctionaliteit.

$ ( '#mijn-waarschuwing' ). bind ( 'gesloten' , functie () {   
  // doe iets…
})

Voorbeeldgebruik

Doe meer met knoppen. Beheer knopstatussen of maak groepen knoppen voor meer componenten zoals werkbalken.

Stateful

Toevoegen data-loading-text="Loading..."om een ​​laadstatus op een knop te gebruiken.

<button type = "button" class = "btn btn-primary" data-loading-text = "Bezig met laden..." > Laadstatus </button>   

Enkele schakelaar

Toevoegen data-toggle="button"om schakelen op een enkele knop te activeren.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Enkele schakelaar </button>   

Selectievakje

Toevoegen data-toggle="buttons-checkbox"voor het omschakelen van selectievakjes naar btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Links </button>  
  <button type = "button" class = "btn btn-primary" > Midden </button>  
  <button type = "button" class = "btn btn-primary" > Rechts </button>  
</div>

Radio

Toevoegen data-toggle="buttons-radio"voor omschakelen van radiostijl op btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Links </button>  
  <button type = "button" class = "btn btn-primary" > Midden </button>  
  <button type = "button" class = "btn btn-primary" > Rechts </button>  
</div>

Gebruik

Knoppen inschakelen via JavaScript:

$ ( '.nav-tabbladen' ). knop ()

Markup

Gegevensattributen zijn een integraal onderdeel van de plug-in voor knoppen. Bekijk de voorbeeldcode hieronder voor de verschillende opmaaktypen.

Opties

Geen

Methoden:

$().button('toggle')

Schakelt de push-status in. Geeft de knop de indruk dat deze is geactiveerd.

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

$().button('bezig met laden')

Stelt knopstatus in op laden - schakelt knop uit en wisselt tekst naar laadtekst. Laadtekst moet worden gedefinieerd op het knopelement met behulp van het data-attribuut data-loading-text.

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

$().button('reset')

Reset knopstatus - wisselt tekst naar originele tekst.

$().knop(tekenreeks)

Stelt de knopstatus opnieuw in - verwisselt tekst naar een door gegevens gedefinieerde tekststatus.

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

Over

Krijg basisstijlen en flexibele ondersteuning voor opvouwbare componenten zoals accordeons en navigatie.

* Vereist dat de plug-in Transitions is opgenomen.

Voorbeeld accordeon

Met behulp van de inklapplug-in hebben we een eenvoudige widget in accordeonstijl gebouwd:

<div class = "accordeon" id   = "accordeon2" >
  <div klasse  = "accordeon-groep" >
    <div klasse  = "accordeon-heading" >
      <a class = "accordeon-toggle" data-toggle = "collapse" data-parent = "#accordion2"     href = "#collapseOne" >
        Opvouwbaar groepsitem #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordeon-body ineenstorting in"   >
      <div klasse =  "accordeon-inner" >
        Anim pariatur cliché...
      </div>
    </div>
  </div>
  <div class = "accordeon-groep" > 
    <div class = "accordeon-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Opvouwbaar groepsitem #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordeon-body ineenstorting" >  
      <div class = "accordeon-inner" > 
        Anim pariatur cliché...
      </div>
    </div>
  </div>
</div>
...

U kunt de plug-in ook gebruiken zonder de accordeon-opmaak. Maak een knop om het uitvouwen en samenvouwen van een ander element te wisselen.

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

Gebruik

Via gegevensattributen

Voeg gewoon data-toggle="collapse"en een data-targetaan element toe om automatisch de besturing van een opvouwbaar element toe te wijzen. Het data-targetattribuut accepteert een CSS-selector om het samenvouwen op toe te passen. Zorg ervoor dat u de klasse toevoegt collapseaan het opvouwbare element. Als u wilt dat deze standaard wordt geopend, voegt u de extra klasse toe in.

Om accordeonachtig groepsbeheer toe te voegen aan een opvouwbaar besturingselement, voegt u het data-attribuut toe data-parent="#selector". Raadpleeg de demo om dit in actie te zien.

Via JavaScript

Handmatig inschakelen met:

$ ( ".collapse" ). instorten ()

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-parent="".

Methoden:

.collapse (opties)

Activeert uw inhoud als een opvouwbaar element. Accepteert een optionele optie object.

$ ( '#mijnInklapbaar' ). instorten ({
  toggle : false 
})

.collapse('toggle')

Schakelt een samenvouwbaar element om naar weergegeven of verborgen.

.collapse('toon')

Toont een opvouwbaar element.

.collapse('hide')

Verbergt een opvouwbaar element.

Evenementen

De collapsklasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op de ineenstortingsfunctionaliteit.

$ ( '#mijnInklapbaar' ). aan ( 'verborgen' , functie () {   
  // doe iets…
})

Voorbeeld carrousel

De onderstaande diavoorstelling toont een generieke plug-in en component om door elementen zoals een carrousel te fietsen.

Eerste miniatuurlabel

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida bij 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.

ik ›

<div id = "myCarousel" class = "carrouseldia" >  
  <ol class = "carrousel-indicatoren" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "actief" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- 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

Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to it's current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which jump's the slide position to a particular index beginning with 0.

Via JavaScript

Call carousel manually with:

$('.carousel').carousel()

Options

Options can be passed via data attributes or JavaScriptz. 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">

You'll want to set autocomplete="off" to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.

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">...</div>

Via JavaScript

Call the affix plugin via JavaScript:

$('#navbar').affix()

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