Overzicht

Individueel of samengesteld

Plug-ins kunnen afzonderlijk worden opgenomen (met behulp van de afzonderlijke *.jsbestanden van Bootstrap), of allemaal tegelijk (met bootstrap.jsof de verkleinde bootstrap.min.js).

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 het document met de naamruimte met data-api. Dit ziet er zo uit:

$(document).off('.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:

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

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()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

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

Standaard instellingen

U kunt de standaardinstellingen voor een plug-in wijzigen door het Constructor.DEFAULTSobject van de plug-in aan te passen:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

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() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Evenementen

Bootstrap biedt aangepaste gebeurtenissen voor de unieke acties van de meeste 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.

Vanaf 3.0.0 hebben alle Bootstrap-gebeurtenissen een naamruimte.

Alle oneindige gebeurtenissen bieden preventDefaultfunctionaliteit. Dit biedt de mogelijkheid om de uitvoering van een actie te stoppen voordat deze begint.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

ontsmettingsmiddel

Tooltips en Popovers gebruiken ons ingebouwde ontsmettingsmiddel om opties op te schonen die HTML accepteren.

De standaardwaarde whiteListis de volgende:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Als u nieuwe waarden aan deze standaard wilt toevoegen, whiteListkunt u het volgende doen:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Als u ons ontsmettingsmiddel wilt omzeilen omdat u liever een speciale bibliotheek gebruikt, bijvoorbeeld DOMPurify , moet u het volgende doen:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

Versienummers

De versie van elk van de jQuery-plug-ins van Bootstrap is toegankelijk via de VERSIONeigenschap van de constructor van de plug-in. Bijvoorbeeld voor de tooltip-plug-in:

$.fn.tooltip.Constructor.VERSION // => "3.4.1"

Geen speciale fallbacks wanneer JavaScript is uitgeschakeld

De plug-ins van Bootstrap vallen niet bijzonder gracieus terug als JavaScript is uitgeschakeld. Als u in dit geval om de gebruikerservaring geeft, gebruik <noscript>dan om de situatie uit te leggen (en hoe u JavaScript opnieuw kunt inschakelen) aan uw gebruikers, en/of voeg uw eigen aangepaste fallbacks toe.

Overgangen transitie.js

Over overgangen

Voeg voor eenvoudige overgangseffecten transition.jséén keer toe naast de andere JS-bestanden. Als u de gecompileerde (of verkleinde) bootstrap.jsgebruikt, hoeft u dit niet op te nemen - het is er al.

Wat zit erin

Transition.js is een basishulp voor transitionEndevenementen en een CSS-overgangemulator. Het wordt door de andere plug-ins gebruikt om te controleren op ondersteuning voor CSS-overgangen en om hangende overgangen op te vangen.

Overgangen uitschakelen

Overgangen kunnen globaal worden uitgeschakeld met behulp van het volgende JavaScript-fragment, dat moet komen nadat transition.js(of bootstrap.jsof bootstrap.min.js, naargelang het geval) is geladen:

$.support.transition = false

Modals modal.js

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

Vanwege de manier waarop HTML5 de semantiek definieert, heeft het autofocusHTML-attribuut geen effect in Bootstrap-modaliteiten. Gebruik wat aangepast JavaScript om hetzelfde effect te bereiken:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Voorbeelden

Statisch voorbeeld

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

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

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.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Optionele maten

Modals hebben twee optionele formaten, beschikbaar via modificatieklassen die op een .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Animatie verwijderen

Voor modals die gewoon verschijnen in plaats van vervagen om te bekijken, verwijdert u de .fadeklasse uit uw modale opmaak.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

Het rastersysteem gebruiken

Om te profiteren van het Bootstrap-rastersysteem binnen een modaal, nestt u .rows binnen de .modal-bodyen gebruikt u vervolgens de normale rastersysteemklassen.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Variërende modale inhoud op basis van triggerknop

Heb je een aantal knoppen die allemaal hetzelfde modaal activeren, alleen met een iets andere inhoud? Gebruik event.relatedTargeten HTML- data-*attributen (mogelijk via jQuery ) om de inhoud van de modal te variëren, afhankelijk van op welke knop is geklikt. Zie de Modal Events-documenten voor details over relatedTarget,

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Gebruik

De modale plug-in schakelt uw verborgen inhoud op aanvraag in, via gegevensattributen of JavaScript. Het voegt ook toe .modal-openaan het <body>standaard scrollgedrag om te negeren en genereert een .modal-backdropom een ​​klikgebied te bieden voor het negeren van getoonde modals wanneer buiten het modale geklikt wordt.

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">Launch modal</button>

Via JavaScript

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

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

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:

.modal(options)

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

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

.modal('toggle')

Schakelt handmatig een modaal in. Keert terug naar de beller voordat de modal daadwerkelijk is getoond of verborgen (dwz voordat de shown.bs.modalof hidden.bs.modal-gebeurtenis plaatsvindt).

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

.modal('show')

Opent handmatig een modaal. Keert terug naar de beller voordat de modal daadwerkelijk is getoond (dwz voordat de shown.bs.modalgebeurtenis plaatsvindt).

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

.modal('hide')

Verbergt handmatig een modaal. Keert terug naar de beller voordat de modal daadwerkelijk is verborgen (dwz voordat de hidden.bs.modalgebeurtenis plaatsvindt).

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

.modal('handleUpdate')

Past de positionering van de modal opnieuw aan om een ​​schuifbalk tegen te gaan voor het geval er een zou verschijnen, waardoor de modal naar links zou springen.

Alleen nodig wanneer de hoogte van de modal verandert terwijl deze open is.

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

Evenementen

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

Alle modale gebeurtenissen worden afgevuurd op de modale zelf (dwz op de <div class="modal">).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Vervolgkeuzelijsten dropdown.js

Voorbeelden

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

Binnen een navigatiebalk

Binnen pillen

Gebruik

Via gegevensattributen of JavaScript schakelt de vervolgkeuzeplug-in verborgen inhoud (vervolgkeuzemenu's) door de .openklasse op het bovenliggende lijstitem te schakelen.

Op mobiele apparaten voegt het openen van een vervolgkeuzemenu een tikgebied toe .dropdown-backdropvoor het sluiten van vervolgkeuzemenu's wanneer u buiten het menu tikt, een vereiste voor goede iOS-ondersteuning. Dit betekent dat het omschakelen van een open vervolgkeuzemenu naar een ander vervolgkeuzemenu een extra tik op mobiel vereist.

Opmerking: data-toggle="dropdown"er wordt vertrouwd op het kenmerk voor het sluiten van vervolgkeuzemenu's op toepassingsniveau, dus het is een goed idee om het altijd te gebruiken.

Via gegevensattributen

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

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Via JavaScript

Roep de vervolgkeuzelijsten op via JavaScript:

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

Opties

Geen

Methoden:

$().dropdown('toggle')

Schakelt het vervolgkeuzemenu van een bepaalde navigatiebalk of navigatie met tabbladen in.

Evenementen

Alle dropdown-gebeurtenissen worden geactiveerd op het .dropdown-menubovenliggende element '.

Alle dropdown-gebeurtenissen hebben een relatedTargeteigenschap waarvan de waarde het wisselende ankerelement is.

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

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

Vereist relatieve positionering

Ongeacht de implementatiemethode, scrollspy vereist het gebruik van position: relative;het element dat u bespioneert. In de meeste gevallen is dit de <body>. Wanneer u andere elementen dan de scrollspioneert <body>, moet u ervoor zorgen dat u een heightset hebt en overflow-y: scroll;toegepast.

Via gegevensattributen

Om eenvoudig scrollspy-gedrag toe te voegen aan uw navigatie op de bovenste balk, voegt u toe data-spy="scroll"aan het element dat u wilt bespioneren (meestal is dit de <body>). Voeg vervolgens het data-targetkenmerk toe met de ID of klasse van het bovenliggende element van een Bootstrap- .navcomponent.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Via JavaScript

Na het toevoegen position: relative;van uw CSS, roept u de scrollspy op via JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

Methoden:

.scrollspy('refresh')

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"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Opties

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

Evenementen

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Schakelbare tabbladen tab.js

Voorbeeldtabbladen

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

Gebruik

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

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

U kunt afzonderlijke tabbladen op verschillende manieren activeren:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

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 tabblad Bootstrap toegepast , terwijl het toevoegen van de klassen en de stijl van de pil zal toepassen .nav-tabsulnavnav-pills

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Fade-effect

.fadeVoeg aan elk toe om tabbladen te laten infaden .tab-pane. Het eerste tabblad moet ook .inde initiële inhoud zichtbaar maken.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Methoden:

$().tab

Activeert een tabelement en inhoudcontainer. Tab moet een data-targetof een hrefgericht hebben op een containerknooppunt in de DOM. In de bovenstaande voorbeelden zijn de tabbladen de <a>s met data-toggle="tab"attributen.

.tab('show')

Selecteert het gegeven tabblad en toont de bijbehorende inhoud. Elk ander tabblad dat eerder was geselecteerd, wordt gedeselecteerd en de bijbehorende inhoud wordt verborgen. Keert terug naar de beller voordat het tabblad daadwerkelijk is weergegeven (dwz voordat de shown.bs.tabgebeurtenis plaatsvindt).

$('#someTab').tab('show')

Evenementen

Wanneer een nieuw tabblad wordt weergegeven, worden de gebeurtenissen in de volgende volgorde geactiveerd:

1. hide.bs.tab(op het huidige actieve tabblad)
2. show.bs.tab(op het te tonen tabblad)
3. hidden.bs.tab(op het vorige actieve tabblad, hetzelfde als voor het hide.bs.tabevenement)
4. shown.bs.tab(op het nieuw actieve tabblad dat zojuist is weergegeven, dezelfde als voor de show.bs.tabgebeurtenis)

Als er al geen tabblad actief was, worden de gebeurtenissen hide.bs.taben hidden.bs.tabniet geactiveerd.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

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.

Knopinfo met titels met een lengte van nul worden nooit weergegeven.

Voorbeelden

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

Statische knopinfo

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

Vier richtingen

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Gebruik

De tooltip-plug-in genereert on-demand inhoud en markeringen en plaatst standaard tooltips na hun trigger-element.

Activeer de knopinfo via JavaScript:

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

Markup

De vereiste opmaak voor een tooltip is slechts een dataattribuut en titleop het HTML-element wil je een tooltip hebben. De gegenereerde opmaak van een tooltip is vrij eenvoudig, maar vereist wel een positie (standaard ingesteld topdoor de plug-in).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Opties

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

Methoden:

$().tooltip(options)

Koppelt een tooltip-handler aan een elementverzameling.

.tooltip('show')

Onthult de tooltip van een element. Keert terug naar de beller voordat de tooltip daadwerkelijk is getoond (dwz voordat de shown.bs.tooltipgebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de tooltip. Knopinfo met titels van lengte nul worden nooit weergegeven.

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

.tooltip('hide')

Verbergt de knopinfo van een element. Keert terug naar de beller voordat de knopinfo daadwerkelijk is verborgen (dwz voordat dehidden.bs.tooltip gebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de tooltip.

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

.tooltip('toggle')

Schakelt de knopinfo van een element in. Keert terug naar de beller voordat de tooltip daadwerkelijk is getoond of verborgen (dwz voordat de shown.bs.tooltipof hidden.bs.tooltip-gebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de tooltip.

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

.tooltip('destroy')

Verbergt en vernietigt de tooltip van een element. Tooltips die delegatie gebruiken (die zijn gemaakt met de selectoroptie ) kunnen niet afzonderlijk worden vernietigd op onderliggende triggerelementen.

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

Evenementen

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

Popovers popover.js

Voeg kleine overlays van inhoud, zoals die op de iPad, toe aan elk element voor het onderbrengen van secundaire informatie.

Popovers waarvan zowel de titel als de inhoud nul zijn, worden nooit weergegeven.

$(function () {
  $('[data-toggle="popover"]').popover()
})

Voorbeelden

Statische popover

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

Live demonstratie

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Vier richtingen

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

Sluiten bij volgende klik

Gebruik de focustrigger om popovers te sluiten bij de volgende klik die de gebruiker maakt.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Gebruik

Popovers inschakelen via JavaScript:

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

Opties

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

Methoden:

$().popover(options)

Initialiseert popovers voor een elementverzameling.

.popover('show')

Onthult de popover van een element. Keert terug naar de beller voordat de popover daadwerkelijk is getoond (dwz voordat de shown.bs.popovergebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de popover. Popovers waarvan zowel de titel als de inhoud nul zijn, worden nooit weergegeven.

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

.popover('hide')

Verbergt de popover van een element. Keert terug naar de beller voordat de popover daadwerkelijk is verborgen (dwz voordat dehidden.bs.popover gebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de popover.

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

.popover('toggle')

Schakelt de popover van een element in. Keert terug naar de beller voordat de popover daadwerkelijk is getoond of verborgen (dwz voordat de shown.bs.popoverof hidden.bs.popover-gebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de popover.

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

.popover('destroy')

Verbergt en vernietigt de popover van een element. Popovers die delegatie gebruiken (die zijn gemaakt met de selectoroptie ) kunnen niet afzonderlijk worden vernietigd op onderliggende triggerelementen.

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

Evenementen

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

Waarschuwingsberichten alert.js

Voorbeeldwaarschuwingen

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

Wanneer u een .closeknop gebruikt, moet deze het eerste kind van de knop zijn en mag er .alert-dismissiblegeen tekstinhoud voor komen in de opmaak.

Gebruik

Voeg gewoon toe data-dismiss="alert"aan uw sluitknop om automatisch een waarschuwingsfunctie voor sluiten te geven. Als u een waarschuwing sluit, wordt deze uit de DOM verwijderd.

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Om ervoor te zorgen dat uw waarschuwingen animatie gebruiken bij het sluiten, moet u ervoor zorgen dat de klassen .fadeen al op hen zijn toegepast..in

Methoden:

$().alert()

Laat een alert luisteren naar klikgebeurtenissen op onderliggende elementen die het data-dismiss="alert"attribuut hebben. (Niet nodig bij gebruik van de automatische initialisatie van de data-api.)

$().alert('close')

Sluit een waarschuwing door deze uit de DOM te verwijderen. Als de klassen .fadeen .inaanwezig zijn op het element, verdwijnt de waarschuwing voordat deze wordt verwijderd.

Evenementen

De waarschuwingsplug-in van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op de waarschuwingsfunctionaliteit.

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Knoppen button.js

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.

Deze functie is verouderd sinds v3.3.5 en is verwijderd in v4.

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

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Enkele schakelaar

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

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Selectievakje / Radio

Voeg toe data-toggle="buttons"aan een .btn-groupselectievakje of radio-ingangen om het schakelen tussen hun respectievelijke stijlen mogelijk te maken.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Radio 3
  </label>
</div>

Methoden:

$().button('toggle')

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

$().button('reset')

Reset knopstatus - wisselt tekst naar originele tekst. Deze methode is asynchroon en keert terug voordat het resetten daadwerkelijk is voltooid.

$().button(string)

Wisselt tekst naar een door gegevens gedefinieerde tekststatus.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Collaps collapse.js

Flexibele plug-in die een handvol klassen gebruikt voor eenvoudig schakelgedrag.

Voorbeeld

Klik op de onderstaande knoppen om een ​​ander element te tonen en te verbergen via klassewijzigingen:

• .collapseverbergt inhoud
• .collapsingwordt toegepast tijdens overgangen
• .collapse.intoont inhoud

U kunt een link met het hrefattribuut gebruiken, of een knop met het data-targetattribuut. In beide gevallen data-toggle="collapse"is het verplicht.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Accordeon voorbeeld

Breid het standaard samenvouwgedrag uit om een ​​accordeon te maken met de paneelcomponent.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Het is ook mogelijk om s te verwisselen .panel-bodymet .list-groups.

Gebruik

De instortingsplug-in gebruikt een paar klassen om het zware werk aan te kunnen:

• .collapseverbergt de inhoud
• .collapse.intoont de inhoud
• .collapsingwordt toegevoegd wanneer de overgang begint en verwijderd wanneer deze is voltooid

Deze lessen zijn te vinden incomponent-animations.less .

Via gegevensattributen

Voeg gewoon data-toggle="collapse"en a toe data-targetaan het element 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').collapse()

Opties

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

Methoden:

.collapse(options)

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

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

.collapse('toggle')

Schakelt een samenvouwbaar element om naar weergegeven of verborgen. Keert terug naar de aanroeper voordat het inklapbare element daadwerkelijk is getoond of verborgen (dwz voordat de shown.bs.collapseof hidden.bs.collapse-gebeurtenis plaatsvindt).

.collapse('show')

Toont een opvouwbaar element. Keert terug naar de beller voordat het opvouwbare element daadwerkelijk is getoond (dwz voordat de shown.bs.collapsegebeurtenis plaatsvindt).

.collapse('hide')

Verbergt een opvouwbaar element. Keert terug naar de beller voordat het opvouwbare element daadwerkelijk is verborgen (dwz voordat dehidden.bs.collapse gebeurtenis plaatsvindt).

Evenementen

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

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

Carrousel carrousel.js

Een diavoorstellingscomponent om door elementen te fietsen, zoals een carrousel. Geneste carrousels worden niet ondersteund.

Voorbeelden

Vorig Volgende

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Optionele bijschriften

Voeg eenvoudig bijschriften toe aan uw dia's met het .carousel-captionelement in een .item. Plaats daar zowat elke optionele HTML en deze wordt automatisch uitgelijnd en opgemaakt.

Label eerste dia

Nulla vitae elit libero, een pharetra augue mollis interdum.

Tweede dia-label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Label derde dia

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Vorig Volgende

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Gebruik

Meerdere carrousels

Carrousels vereisen het gebruik van een idop de buitenste container (de .carousel) om de carrouselbediening goed te laten werken. Wanneer u meerdere carrousels toevoegt, of wanneer u een carrousel wijzigt id, zorg er dan voor dat u de relevante bedieningselementen bijwerkt.

Via gegevensattributen

Gebruik gegevensattributen om de positie van de carrousel eenvoudig te regelen. data-slideaccepteert de trefwoorden prevof next, die de positie van de dia verandert ten opzichte van de huidige positie. U kunt ook gebruiken data-slide-toom een ​​onbewerkte dia-index door te geven aan de carrousel data-slide-to="2", die de diapositie verschuift naar een bepaalde index die begint met0 .

Het data-ride="carousel"attribuut wordt gebruikt om een ​​carrousel te markeren als animerend vanaf het laden van de pagina. Het kan niet worden gebruikt in combinatie met (redundante en onnodige) expliciete JavaScript-initialisatie van dezelfde carrousel.

Via JavaScript

Carrousel handmatig bellen met:

$('.carousel').carousel()

Opties

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

Methoden:

.carousel(options)

Initialiseert de carrousel met optionele opties objecten begint door items te bladeren.

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

.carousel('cycle')

Doorloopt de carrouselitems van links naar rechts.

.carousel('pause')

Voorkomt dat de carrousel door items fietst.

.carousel(number)

Fietst de carrousel naar een bepaald frame (gebaseerd op 0, vergelijkbaar met een array).

.carousel('prev')

Hiermee gaat u naar het vorige item.

.carousel('next')

Gaat naar het volgende item.

Evenementen

De carrouselklasse van Bootstrap onthult twee gebeurtenissen voor het aansluiten op carrouselfunctionaliteit.

Beide evenementen hebben de volgende extra eigenschappen:

• direction: De richting waarin de carrousel schuift ( "left"of "right").
• relatedTarget: Het DOM-element dat op zijn plaats wordt geschoven als het actieve item.

Alle carrouselgebeurtenissen worden afgevuurd op de carrousel zelf (dwz op de <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Bevestig affix.js

Voorbeeld

De affix-plug-in schakelt position: fixed;aan en uit en emuleert het effect dat wordt gevonden met position: sticky;. De subnavigatie aan de rechterkant is een live demo van de affix-plug-in.

Gebruik

Gebruik de affix-plug-in via data-attributen of handmatig met uw eigen JavaScript.In beide situaties moet u CSS opgeven voor de positionering en breedte van uw aangebrachte inhoud.

Opmerking: gebruik de affix-plug-in niet op een element dat zich in een relatief gepositioneerd element bevindt, zoals een getrokken of geduwde kolom, vanwege een Safari-renderingfout .

Positionering via CSS

De affix-plug-in schakelt tussen drie klassen, die elk een bepaalde status vertegenwoordigen: .affix, .affix-top, en .affix-bottom. Je moet de stijlen, met uitzondering van position: fixed;on .affix, voor deze klassen zelf (onafhankelijk van deze plug-in) aanleveren om de feitelijke posities te kunnen afhandelen.

Zo werkt de affix-plug-in:

1. Om te beginnen voegt de plug-in toe:.affix-top in iets toe om aan te geven dat het element zich op de bovenste positie bevindt. Op dit moment is geen CSS-positionering vereist.
2. Als u voorbij het element scrolt dat u wilt toevoegen, zou de daadwerkelijke bevestiging moeten worden geactiveerd. Dit is waar .affixvervangt .affix-topen sets position: fixed;(geleverd door Bootstrap's CSS).
3. Als een onderste offset is gedefinieerd, moet het scrollen erlangs worden vervangen .affixdoor .affix-bottom. Aangezien offsets optioneel zijn, vereist het instellen van één dat u de juiste CSS instelt. Voeg in dit geval toe position: absolute;indien nodig. De plug-in gebruikt het data-attribuut of de JavaScript-optie om te bepalen waar het element vanaf daar moet worden geplaatst.

Volg de bovenstaande stappen om uw CSS in te stellen voor een van de onderstaande gebruiksopties.

Via gegevensattributen

Om gemakkelijk affix-gedrag aan elk element toe te voegen, voegt u gewoon toedata-spy="affix" aan het element dat u wilt bespioneren. Gebruik offsets om te definiëren wanneer het vastzetten van een element moet worden omgeschakeld.

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

Via JavaScript

Roep de affix-plug-in aan via JavaScript:

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

Opties

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

Methoden:

.affix(options)

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

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

Herberekent de status van de affix op basis van de afmetingen, positie en schuifpositie van de relevante elementen. De klassen .affix, .affix-top, en .affix-bottomworden toegevoegd aan of verwijderd uit de toegevoegde inhoud volgens de nieuwe status. Deze methode moet worden aangeroepen wanneer de afmetingen van de toegevoegde inhoud of het doelelement worden gewijzigd, om een ​​correcte positionering van de toegevoegde inhoud te garanderen.

$('#myAffix').affix('checkPosition')

Evenementen

De affix-plug-in van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op de affix-functionaliteit.