Individueel of saamgestel

Inproppe kan individueel ingesluit word (alhoewel sommige vereiste afhanklikhede het), of alles op een slag. Beide bootstrap.js en bootstrap.min.js bevat alle plugins in 'n enkele lêer.

Data eienskappe

U kan alle Bootstrap-inproppe suiwer deur die markup API gebruik sonder om 'n enkele reël JavaScript te skryf. Dit is Bootstrap se eersteklas API en behoort u eerste oorweging te wees wanneer u 'n inprop gebruik.

Dit gesê, in sommige situasies kan dit wenslik wees om hierdie funksionaliteit af te skakel. Daarom bied ons ook die vermoë om die data-kenmerk API te deaktiveer deur alle gebeurtenisse op die liggaam wat met `'data-api'` gespasieer is, te ontbind. Dit lyk so:

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

Alternatiewelik, om 'n spesifieke inprop te teiken, sluit net die inprop se naam as 'n naamspasie saam met die data-api naamspasie soos volg in:

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

Programmatiese API

Ons glo ook dat u alle Bootstrap-inproppe bloot deur die JavaScript API moet kan gebruik. Alle publieke API's is enkelvoudige, kettingbare metodes, en gee die versameling waarop gereageer is, terug.

$(".btn.danger").button("toggle").addClass("vet")

Alle metodes moet 'n opsionele opsie-objek aanvaar, 'n string wat 'n spesifieke metode teiken, of niks (wat 'n inprop met verstekgedrag inisieer):

$("#myModal").modal() // geïnisialiseer met verstek
$("#myModal").modal({ keyboard: false }) // geïnisialiseer sonder sleutelbord
$("#myModal").modal('show') // inisialiseer en roep show onmiddellik op

Elke inprop stel ook sy rou konstruktor bloot op 'n 'Constructor'-eienskap: $.fn.popover.Constructor. As jy 'n spesifieke inprop-instansie wil kry, haal dit direk van 'n element af: $('[rel=popover]').data('popover').

Geen konflik nie

Soms is dit nodig om Bootstrap-inproppe met ander UI-raamwerke te gebruik. In hierdie omstandighede kan naamruimtebotsings soms voorkom. As dit gebeur, kan jy .noConflictdie inprop gebruik waarvan jy die waarde wil terugdraai.

var bootstrapButton = $.fn.button.noConflict() // gee $.fn.button terug na voorheen toegekende waarde
$.fn.bootstrapBtn = bootstrapButton // gee $().bootstrapBtn die selflaai-funksie

Gebeurtenisse

Bootstrap bied pasgemaakte gebeurtenisse vir die meeste inprop se unieke aksies. Oor die algemeen kom dit in 'n infinitief en verlede deelwoordvorm - waar die infinitief (bv. show) aan die begin van 'n gebeurtenis geaktiveer word, en sy verlede deelwoordvorm (bv. shown) sneller word by die voltooiing van 'n aksie.

Alle infinitiewe gebeurtenisse bied preventDefault-funksionaliteit. Dit bied die vermoë om die uitvoering van 'n aksie te stop voordat dit begin.

$('#myModal').on('show', function (e) {
    if (!data) gee terug e.preventDefault() // keer dat modaal gewys word
})

Oor oorgange

Vir eenvoudige oorgangseffekte, sluit bootstrap-transition.js een keer langs die ander JS-lêers in. As jy die saamgestelde (of verkleinde) bootstrap.js gebruik, hoef jy dit nie in te sluit nie – dit is reeds daar.

Gebruik gevalle

'n Paar voorbeelde van die oorgang-inprop:

• Gly of vervaag in modale
• Vervaag oortjies
• Vervaag waarskuwings
• Skuifkarrouselruite

Voorbeelde

Modale is vaartbelynde, maar buigsame, dialoogopdragte met die minimum vereiste funksionaliteit en slim verstekke.

Statiese voorbeeld

'n Weergegee modaal met kopskrif, liggaam en stel aksies in die voetskrif.

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&tye;</button>
    <h3>Modale kopskrif</h3>
  </div>
  <div class="modal-body">
    <p>Een fyn lyf...</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Sluit</a>
    <a href="#" class="btn btn-primary">Stoor veranderinge</a>
  </div>
</div>

Regstreekse demo

Wissel 'n modaal via JavaScript deur op die knoppie hieronder te klik. Dit sal afgly en vervaag vanaf die bokant van die bladsy.

<!-- Knoppie om modaal te aktiveer -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Begin demonstrasiemodaal</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 opskrif</h3>
  </div>
  <div class="modal-body">
    <p>Een fyn lyf...</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Sluit</button>
    <button class="btn btn-primary">Stoor veranderinge</button>
  </div>
</div>

Gebruik

Via data-eienskappe

Aktiveer 'n modaal sonder om JavaScript te skryf. Stel data-toggle="modal"op 'n beheerderelement, soos 'n knoppie, saam met 'n data-target="#foo"of href="#foo"om 'n spesifieke modaal te rig om te wissel.

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

Via JavaScript

Roep 'n modaal met ID myModalmet 'n enkele reël JavaScript:

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-backdrop="".

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

Metodes

.modal(opsies)

Aktiveer jou inhoud as 'n modaal. Aanvaar 'n opsionele opsie object.

$('#myModal').modal({
  sleutelbord: vals
})

.modal('toggle')

Wissel 'n modaal handmatig.

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

.modal('show')

Maak 'n modaal handmatig oop.

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

.modal('versteek')

Versteek 'n modaal handmatig.

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

Gebeurtenisse

Bootstrap se modale klas stel 'n paar gebeurtenisse bloot om by modale funksionaliteit in te skakel.

$('#myModal').on('hidden', function () {
  // doen iets…
})

Voorbeelde

Voeg aftrekkieslys by byna enigiets met hierdie eenvoudige inprop, insluitend die navigasiebalk, oortjies en pille.

Binne 'n navigasiebalk

Binne oortjies

Gebruik

Via data-eienskappe

Voeg data-toggle="dropdown"by 'n skakel of knoppie om 'n aftreklys te wissel.

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

Om URL's ongeskonde te hou, gebruik die data-targetkenmerk in plaas van href="#".

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

Via JavaScript

Bel die aftreklys via JavaScript:

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

Opsies

Geen

Metodes

$().dropdown('toggle')

'n Programmatiese API om spyskaarte vir 'n gegewe navigasiebalk of oortjienavigasie te wissel.

Voorbeeld in navbar

Die ScrollSpy-inprop is vir die outomatiese opdatering van navigasieteikens gebaseer op rolposisie. Blaai deur die area onder die navigasiebalk en kyk hoe die aktiewe klas verander. Die aftrek-subitems sal ook uitgelig word.

Gebruik

Via data-eienskappe

Om scrollspy-gedrag maklik by jou bobalknavigasie te voeg, voeg net by data-spy="scroll"die element waarna jy wil spioeneer (meestal sal dit die liggaam wees) en data-target=".navbar"om te kies watter nav om te gebruik. Jy sal scrollspy met 'n .navkomponent wil gebruik.

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

Via JavaScript

Bel die scrollspy via JavaScript:

$('#navbar').scrollspy()

Metodes

.scrollspy('refresh')

Wanneer jy scrollspy gebruik in samewerking met die byvoeging of verwydering van elemente uit die DOM, moet jy die herlaaimetode soos volg noem:

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-offset="".

Gebeurtenisse

Voorbeeld oortjies

Voeg vinnige, dinamiese oortjie-funksionaliteit by om deur vensters van plaaslike inhoud oor te skakel, selfs via aftrekkieslyste.

Gebruik

Aktiveer tabbare oortjies via JavaScript (elke oortjie moet individueel geaktiveer word):

$('#myTab a').click(funksie (e) {
  e.preventDefault();
  $(hierdie).tab('wys');
})

Jy kan individuele oortjies op verskeie maniere aktiveer:

$('#myTab a[href="#profiel"]').tab('wys'); // Kies oortjie volgens naam
$('#myTab a:first').tab('show'); // Kies eerste oortjie
$('#myTab a:laaste').tab('wys'); // Kies laaste oortjie
$('#myTab li:eq(2) a').tab('show'); // Kies derde oortjie (0-geïndexeer)

Opmerk

Jy kan 'n oortjie- of pilnavigasie aktiveer sonder om enige JavaScript te skryf deur bloot 'n element te spesifiseer data-toggle="tab"of data-toggle="pill"op 'n element. Deur die naven nav-tabsklasse by die oortjie te voeg ul, sal die Bootstrap-oortjiestilering toepas.

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Tuis</a></li>
  <li><a href="#profile" data-toggle="tab">Profiel</a></li>
  <li><a href="#messages" data-toggle="tab">Boodskappe</a></li>
  <li><a href="#settings" data-toggle="tab">Instellings</a></li>
</ul>

Metodes

$().tab

Aktiveer 'n oortjie-element en inhoudhouer. Tab moet óf 'n data-targetóf 'n hrefteiken 'n houer nodus in die DOM hê.

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Tuis</a></li>
  <li><a href="#profile">Profiel</a></li>
  <li><a href="#messages">Boodskappe</a></li>
  <li><a href="#settings">Instellings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="boodskappe">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

<skrif>
  $(funksie () {
    $('#myTab a:laaste').tab('wys');
  })
</script>

Gebeurtenisse

$('a[data-toggle="tab"]').on('getoon', funksie (e) {
  e.target // geaktiveerde blad
  e.relatedTarget // vorige oortjie
})

Voorbeelde

Geïnspireer deur die uitstekende jQuery.tipsy-inprop geskryf deur Jason Frame; Tooltips is 'n opgedateerde weergawe wat nie op beelde staatmaak nie, gebruik CSS3 vir animasies en data-kenmerke vir plaaslike titelberging.

Vir prestasieredes word die nutswenk en popover-data-api's ingeskryf, wat beteken dat jy dit self moet inisialiseer .

Beweeg oor die skakels hieronder om nutswenke te sien:

Vier rigtings

Gereedskapwenke in invoergroepe

Wanneer u gereedskapwenke en popovers met die Bootstrap-invoergroepe gebruik, moet u die containeropsie (hieronder gedokumenteer) stel om ongewenste newe-effekte te vermy.

Gebruik

Aktiveer die nutswenk via JavaScript:

$('#voorbeeld').tooltip(opsies)

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-animation="".

Opmerk

<a href="#" data-toggle="tooltip" title="first tooltip">hou oor my</a>

Metodes

$().tooltip(opsies)

Heg 'n nutswenk-hanteerder aan 'n elementversameling.

.tooltip('wys')

Onthul 'n element se nutswenk.

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

.tooltip('versteek')

Versteek 'n element se nutswenk.

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

.tooltip('toggle')

Wissel 'n element se nutswenk.

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

.tooltip('vernietig')

Versteek en vernietig 'n element se nutswenk.

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

Voorbeelde

Voeg klein oorlegsels van inhoud, soos dié op die iPad, by enige element om sekondêre inligting te huisves. Beweeg oor die knoppie om die popover te aktiveer. Vereis Tooltip om ingesluit te word.

Statiese popover

Vier opsies is beskikbaar: bo-, regs-, onder- en linksbelyn.

Geen opmaak wat as opspringers gewys word, word uit JavaScript en inhoud binne 'n datakenmerk gegenereer nie.

Regstreekse demo

Vier rigtings

Gebruik

Aktiveer popovers via JavaScript:

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-animation="".

Opmerk

Vir prestasie redes, is die Tooltip en Popover data-api's intekening. As jy dit wil gebruik, spesifiseer net 'n kieser opsie.

Metodes

$().popover(opsies)

Inisialiseer popovers vir 'n elementversameling.

.popover('wys')

Onthul 'n element-oorspring.

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

.popover('versteek')

Versteek 'n element-opspringer.

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

.popover('toggle')

Wissel 'n element-opspringer.

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

.popover('vernietig')

Versteek en vernietig 'n element se popover.

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

Voorbeeld waarskuwings

Voeg afwysfunksionaliteit by alle waarskuwingsboodskappe met hierdie inprop.

Gebruik

Aktiveer afwysing van 'n waarskuwing via JavaScript:

$(".alert").alert()

Opmerk

Voeg net data-dismiss="alert"by jou toemaakknoppie om outomaties 'n waarskuwingssluitingfunksie te gee.

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

Metodes

$().alert()

Omvou alle waarskuwings met noue funksionaliteit. Om jou waarskuwings te laat animeer wanneer dit gesluit is, maak seker dat die .fadeen .inklas reeds op hulle toegepas is.

.alert('close')

Maak 'n waarskuwing toe.

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

Gebeurtenisse

Bootstrap se waarskuwingsklas ontbloot 'n paar gebeurtenisse om by waarskuwingsfunksionaliteit in te skakel.

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

Voorbeeld gebruike

Doen meer met knoppies. Beheer knoppie state of skep groepe knoppies vir meer komponente soos nutsbalke.

Statig

Voeg data-loading-text="Loading..."by om 'n laaitoestand op 'n knoppie te gebruik.

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

Enkelwissel

Voeg data-toggle="button"by om skakeling op 'n enkele knoppie te aktiveer.

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

Merkblokkie

Voeg by data-toggle="buttons-checkbox"vir merkblokkiestyl-wisseling op btn-groep.

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

Radio

Voeg by data-toggle="buttons-radio"vir radiostyl-wisseling op btn-groep.

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

Gebruik

Aktiveer knoppies via JavaScript:

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

Opmerk

Data-kenmerke is 'n integrale deel van die knoppie-inprop. Kyk na die voorbeeldkode hieronder vir die verskillende opmaaktipes.

Opsies

Geen

Metodes

$().button('wissel')

Wissel stootstatus. Gee die knoppie die voorkoms dat dit geaktiveer is.

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

$().button('laai')

Stel knoppiestatus na laai - deaktiveer knoppie en ruil teks om na laai teks. Laaiteks moet op die knoppie-element gedefinieer word deur die data-kenmerk te gebruik data-loading-text.

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

$().button('reset')

Stel knoppiestatus terug - ruil teks na oorspronklike teks.

$().button(string)

Stel knoppiestatus terug - ruil teks na enige data-gedefinieerde tekstoestand.

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

Oor

Kry basisstyle en buigsame ondersteuning vir opvoubare komponente soos trekklaviere en navigasie.

* Vereis dat die Transitions-inprop ingesluit moet word.

Voorbeeld trekklavier

Met behulp van die ineenvou-inprop het ons 'n eenvoudige trekklavierstyl-legstuk gebou:

<div class="trekklavier" id="trekklavier2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Opvoubare groepitem #1
      </a>
    </div>
    <div id="collapseOne" class="trekklavier-liggaam val in">
      <div class="accordion-inner">
        Animal pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Opvoubare groepitem #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Animal pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Jy kan ook die inprop gebruik sonder die trekklavier-opmerk. Maak 'n knoppie om die uitbreiding en ineenstorting van 'n ander element te wissel.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  eenvoudig opvoubaar
</knoppie>

<div id="demo" class="collapse in"> … </div>

Gebruik

Via data-eienskappe

Voeg net by data-toggle="collapse"en 'n data-targetby-element om outomaties beheer van 'n opvoubare element toe te ken. Die data-targetkenmerk aanvaar 'n css-kieser om die ineenstorting op toe te pas. Maak seker dat jy die klas collapseby die opvoubare element voeg. As jy wil hê dit moet verstek oopmaak, voeg die bykomende klas by in.

Om trekklavieragtige groepbestuur by 'n opvoubare kontrole te voeg, voeg die data-kenmerk by data-parent="#selector". Verwys na die demo om dit in aksie te sien.

Via JavaScript

Aktiveer handmatig met:

$(".collapse").collapse()

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-parent="".

Metodes

.collapse(opsies)

Aktiveer jou inhoud as 'n opvoubare element. Aanvaar 'n opsionele opsie object.

$('#myCollapsible').collapse({
  wissel: vals
})

.collapse('toggle')

Wissel 'n opvoubare element na gewys of versteek.

.collapse('wys')

Toon 'n opvoubare element.

.collapse('versteek')

Versteek 'n opvoubare element.

Gebeurtenisse

Bootstrap se ineenstortingsklas ontbloot 'n paar gebeurtenisse vir inskakeling by ineenstortingsfunksionaliteit.

$('#myCollapsible').on('hidden', function () {
  // doen iets…
})

Voorbeeld karrousel

Die skyfievertoning hieronder toon 'n generiese inprop en komponent vir fietsry deur elemente soos 'n karrousel.

Eerste kleinkiekie-etiket

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

Tweede kleinkiekie-etiket

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

Derde Kleinkiekie-etiket

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

‹ ›

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Karrousel items -->
  <div class="carousel-inner">
    <div class="active item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
  </div>
  <!-- Carrousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

Gebruik

Via data-eienskappe

Gebruik data-kenmerke om die posisie van die karrousel maklik te beheer. data-slideaanvaar die sleutelwoorde prevof next, wat die skuifposisie relatief tot sy huidige posisie verander. Alternatiewelik, gebruik data-slide-toom 'n rou skyfie-indeks na die karrousel deur te data-slide-to="2"gee, wat die skyfieposisie spring na 'n spesifieke indeks wat begin met 0.

Via JavaScript

Bel karrousel handmatig met:

$('.carousel').carousel()

Opsies

Opsies kan deur data-kenmerke of JavaScriptz deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-interval="".

Metodes

.carousel(opsies)

Inisialiseer die karrousel met 'n opsionele opsies objecten begin deur items ry.

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

.carousel('siklus')

Blaai deur die karrousel-items van links na regs.

.carousel('pouse')

Stop die karrousel om deur items te fiets.

.carousel(nommer)

Sit die karrousel na 'n spesifieke raam (0 gebaseer, soortgelyk aan 'n skikking).

.carousel('vorige')

Blaai na die vorige item.

.carousel('volgende')

Blaai na die volgende item.

Gebeurtenisse

Bootstrap se karrouselklas stel twee gebeurtenisse bloot vir inhaak by karrouselfunksionaliteit.

Voorbeeld

'n Basiese, maklik uitgebreide inprop vir vinnige skep van elegante tikkoppe met enige vorm teksinvoer.

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

Jy sal wil instel autocomplete="off"om te verhoed dat verstekblaaier-kieslyste oor die Bootstrap-tipe-aftreklys verskyn.

Gebruik

Via data-eienskappe

Voeg data-kenmerke by om 'n element met tikvooraf-funksionaliteit te registreer soos in die voorbeeld hierbo getoon.

Via JavaScript

Bel die voorskrif handmatig met:

$('.typeahead').typeahead()

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-source="".

Metodes

.typeahead(opsies)

Inisialiseer 'n invoer met 'n voorsprong.

Voorbeeld

Die subnavigasie aan die linkerkant is 'n lewendige demonstrasie van die affix-inprop.

Gebruik

Via data-eienskappe

Om maklik aanbringgedrag by enige element te voeg, voeg net by data-spy="affix"die element waarna jy wil spioeneer. Gebruik dan offsets om te definieer wanneer om die vaspen van 'n element aan en af ​​te skakel.

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

Via JavaScript

Bel die affix-inprop via JavaScript:

$('#navbar').affix()

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-offset-top="200".