Individuell eller sammanställd

Plugins kan inkluderas individuellt (även om vissa har nödvändiga beroenden), eller alla på en gång. Både bootstrap.js och bootstrap.min.js innehåller alla plugins i en enda fil.

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 pluginens namn 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å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').

Ingen konflikt

Ibland är det nödvändigt att använda Bootstrap-plugins med andra UI-ramverk. Under dessa omständigheter kan namnutrymmeskollisioner ibland inträffa. Om detta händer kan du anropa .noConflictplugin-programmet du vill återställa värdet på.

var bootstrapButton = $ . fn . knappen . noConflict () // returnera $.fn.button till tidigare tilldelat värde 
$ . fn . bootstrapBtn = bootstrapButton             // ge $().bootstrapBtn bootstrap-funktionen

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. shown) utlöses vid fullbordandet av en handling.

Alla infinitiva händelser tillhandahåller preventDefault-funktionalitet. Detta ger möjlighet 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 utlösa modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Starta demomodal </a>    
 
<!-- Modal -->
<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" > 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 en 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 = "rullgardinsmeny" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" 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 = "rullgardinsmeny" > 
  <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('toggle')

Ett programmatiskt api för att växla menyer för ett givet navigeringsfält eller navigering med flikar.

Exempel i navbar

ScrollSpy-pluginen är till för att automatiskt uppdatera nav-må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 snabb, dynamisk flikfunktion för övergång genom paneler med lokalt innehåll, även via rullgardinsmenyer.

Användande

Aktivera flikar med 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.

Av prestandaskäl är verktygstipset och popover-data-apierna opt-in, vilket innebär att du måste initiera dem själv .

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

Fyra riktningar

Verktygstips i inmatningsgrupper

När du använder verktygstips och popovers med Bootstrap-inmatningsgrupperna måste du ställa in containeralternativet (dokumenterat nedan) för att undvika oönskade biverkningar.

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

<a href  = "#" data-toggle = "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ör' )

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 uppmärkning som visas som popovers genereras från JavaScript och innehåll inom endata attribut.

Live-demo

Fyra riktningar

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

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

Metoder

$().alert()

Omsluter alla varningar med nära funktionalitet. För att dina varningar ska animeras när de är stängda, se till att klassen och redan har .fadetillämpats .inpå 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 data-loading-text="Loading..."till 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 data-toggle="button"till för att aktivera växling på en enda knapp.

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

Kryssruta

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

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

Radio

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

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Vänster </button>  
  <button type = "button" class = "btn btn-primary" > Middle </button>  
  <button type = "button" class = "btn btn-primary" > 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 plugin-programmet Transitions ingår.

Exempel på dragspel

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

<div class = "dragspel" id = "dragspel2" >  
  <div class = "dragspelsgrupp" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Hopfällbar gruppartikel #1
      </a>
    </div>
    <div id = "collapseOne" class = "dragspel-kropp kollapsa in" >  
      <div class = "dragspel-inre" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "dragspelsgrupp" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Hopfällbar gruppobjekt #2
      </a>
    </div>
    <div id = "collapseTwo" class = "dragspel-kropp kollaps" >  
      <div class = "dragspel-inre" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Du kan också använda plugin utan dragspelsmärkning. Få en knapp att växla mellan att expandera och kollapsa ett annat element.

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

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 = "karusellbild" >  
  <ol class = "karusell-indikatorer" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "aktiv" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- 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

Använd dataattribut för att enkelt styra karusellens position. data-slideaccepterar nyckelorden preveller next, vilket ändrar bildens position i förhållande till dess nuvarande position. Alternativt kan du använda data-slide-toför att skicka ett obearbetat diabildsindex till karusellen data-slide-to="2", vilket hoppar är bildpositionen till ett visst index som börjar med 0.

Via JavaScript

Ring karusellen manuellt med:

$ ( '.carousel' ). karusell ()

alternativ

Alternativ kan skickas via dataattribut eller JavaScriptz. 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" >  

Du vill ställa in autocomplete="off"för att förhindra att standardwebbläsarmenyer visas över rullgardinsmenyn Bootstrap typahead.

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

Via JavaScript

Anropa affix-plugin via JavaScript:

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

alternativ

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