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:

$ ( '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:

$ ( '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å.

$ ( ".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):

$ ( "#myModal" ). modal () // initialiseret med standardindstillinger                       
$ ( "#myModal" ). modal ({ keyboard : false }) // initialiseret uden tastatur     
$ ( "#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.

var bootstrapButton = $ . fn . knap . noConflict () // returner $.fn.button til tidligere tildelt værdi 
$ . 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.

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

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.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "sand" > × </button>    
    <h3> Modal overskrift </h3>
  </div>
  <div class = "modal-body" > 
    <p> Én fin krop... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Luk </a>  
    <a href = "#" class = "btn btn-primary" > Gem ændringer </a>  
  </div>
</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.

<!-- Knap til at udløse modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Start 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> Én fin krop... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Luk </button>   
    <button class = "btn btn-primary" > Gem ændringer </button> 
  </div>
</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.

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

Via JavaScript

Kald en modal med id myModalmed en enkelt linje JavaScript:

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

Muligheder

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

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

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

.modal('toggle')

Skifter manuelt en modal.

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

.modal('show')

Åbner manuelt en modal.

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

.modal('skjul')

Skjuler manuelt en modal.

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

Begivenheder

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

$ ( '#myModal' ). on ( 'skjult' , funktion () {   
  // gør noget…
})

Eksempler

Tilføj rullemenuer til næsten alt med dette enkle plugin, inklusive navbaren, fanerne og pillerne.

Indenfor en navbar

Indenfor faner

Brug

Via dataattributter

Føj data-toggle="dropdown"til et link eller knap for at skifte til en rullemenu.

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

For at holde webadresser intakte skal du bruge data-targetattributten i stedet for href="#".

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

Via JavaScript

Kald rullemenuerne via JavaScript:

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

Muligheder

Ingen

Metoder

$().dropdown('toggle')

Et programmatisk API til at skifte mellem menuer for en given navbar eller fane-navigation.

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.

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.

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

Via JavaScript

Ring til scrollspy via JavaScript:

$ ( '#navbar' ). scrollspy ()

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:

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

Muligheder

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

Begivenheder

Eksempler på faner

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

Brug

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

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

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

$ ( '#myTab a[href="#profile"]' ). faneblad ( 'vis' ); // Vælg fane efter navn 
$ ( '#myTab a:first' ). faneblad ( 'vis' ); // Vælg den første fane 
$ ( '#myTab a:sidste' ). faneblad ( 'vis' ); // Vælg sidste fane 
$ ( '#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

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Startside </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Beskeder </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Indstillinger </a></li>  
</ul>

Metoder

$().tab

Aktiverer et faneelement og indholdsbeholder. Tab skal have enten en data-targeteller en hrefmålretning mod en containernode 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" > Beskeder </a></li> 
  <li><a href = "#settings" > Indstillinger </a></li> 
</ul>
 
<div class = "tab-indhold" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "meddelelser" > ... </div>  
  <div class = "tab-pane" id = "indstillinger" > ... </div>  
</div>
 
<script>
  $ ( funktion () {  
    $ ( '#myTab a:sidste' ). faneblad ( 'vis' );
  })
</script>

Begivenheder

$ ( 'a[data-toggle="tab"]' ). on ( 'vist' , funktion ( e ) {   
  e . mål // aktiveret fane
  e . relateret mål // forrige fane
})

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:

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:

$ ( '#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="".

Markup

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

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

.tooltip('skjul')

Skjuler et elements værktøjstip.

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

.tooltip('toggle')

Skifter et elements værktøjstip.

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

.tooltip('destroy')

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

$ ( '#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.

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

Live demo

Fire retninger

Brug

Aktiver popovers via JavaScript:

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

Muligheder

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

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.

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

.popover('skjul')

Skjuler en popover for elementer.

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

.popover('toggle')

Skifter en popover for elementer.

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

.popover('destroy')

Skjuler og ødelægger et elements popover.

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

Eksempler på advarsler

Tilføj afvisningsfunktionalitet til alle advarselsmeddelelser med dette plugin.

Brug

Aktiver afvisning af en advarsel via JavaScript:

$ ( ".alert" ). advarsel ()

Markup

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

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

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

Begivenheder

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

$ ( '#my-alert' ). bind ( 'lukket' , funktion () {   
  // gør noget…
})

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.

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

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

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Venstre </button>  
  <button type = "button" class = "btn btn-primary" > Middle </button>  
  <button type = "button" class = "btn btn-primary" > Højre </button>  
</div>

Radio

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

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Venstre </button>  
  <button type = "button" class = "btn btn-primary" > Middle </button>  
  <button type = "button" class = "btn btn-primary" > Højre </button>  
</div>

Brug

Aktiver knapper via JavaScript:

$ ( '.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.

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

<button type = "button" class = "btn" data-loading-text = "indlæser ting..." > ... </button>    

$().button('reset')

Nulstiller knaptilstand - bytter tekst til original tekst.

$().knap(streng)

Nulstiller knaptilstand - skifter tekst til enhver datadefineret teksttilstand.

<button type = "button" class = "btn" data-complete-text = "færdig!" > ... </knap>    
<script>
  $ ( '.btn' ). knap ( 'fuldført' )
</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:

<div class = "accordion" id = "accordion2" >  
  <div class = "harmonika-gruppe" > 
    <div class = "harmonika-overskrift" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Sammenklappelig gruppeelement #1
      </a>
    </div>
    <div id = "collapseOne" class = "harmonika-krop falder sammen" >  
      <div class = "harmonika-indre" > 
        Anim pariatur kliché...
      </div>
    </div>
  </div>
  <div class = "harmonika-gruppe" > 
    <div class = "harmonika-overskrift" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Sammenklappelig gruppeelement #2
      </a>
    </div>
    <div id = "collapseTwo" class = "harmonika-krop kollaps" >  
      <div class = "harmonika-indre" > 
        Anim pariatur kliché...
      </div>
    </div>
  </div>
</div>
...

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

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  enkel sammenklappelig
</button>
 
<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:

$ ( ".kollapse" ). kollapse ()

Muligheder

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

Metoder

.collapse(indstillinger)

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

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

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

$ ( '#myCollapsible' ). on ( 'skjult' , funktion () {   
  // gør noget…
})

Eksempel karrusel

Diasshowet nedenfor viser et generisk plugin og en komponent til at cykle gennem elementer som en karrusel.

Første miniaturelabel

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 = "karrusel dias" >  
  <ol class = "karrusel-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>
  <!-- Karruselartikler -->
  <div class = "karrusel-indre" > 
    <div class = "aktivt element" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Karrusel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "næste" > › </a>   
</div>

Brug

Via dataattributter

Brug dataattributter til nemt at kontrollere karrusellens position. data-slideaccepterer nøgleordene preveller next, som ændrer diaspositionen i forhold til dens aktuelle position. Alternativt kan du bruge data-slide-totil at sende et råt diasindeks til karrusellen data-slide-to="2", hvilket springer diaspositionen til et bestemt indeks, der begynder med 0.

Via JavaScript

Kald karrusel manuelt med:

$ ( '.karrusel' ). karrusel ()

Muligheder

Indstillinger kan overføres via dataattributter eller JavaScriptz. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-interval="".

Metoder

.carousel(valgmuligheder)

Initialiserer karrusellen med valgfrie muligheder objectog begynder at cykle gennem genstande.

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

.carousel('cyklus')

Cykler gennem karruselelementerne fra venstre mod højre.

.carousel('pause')

Stopper karrusellen i at cykle gennem genstande.

.carousel(nummer)

Cykler karrusellen til en bestemt ramme (0-baseret, svarende til et array).

.carousel('prev')

Skifter til det forrige element.

.carousel('næste')

Skifter til næste punkt.

Begivenheder

Bootstraps karruselklasse afslører to hændelser for tilslutning til karruselfunktionalitet.

Eksempel

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

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

$ ( '.typeahead' ). typeforud ()

Muligheder

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

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.

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

Via JavaScript

Kald affix-pluginnet via JavaScript:

$ ( '#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".