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

Het gecompileerde JavaScript gebruiken

Beide bootstrap.jsen bootstrap.min.jsbevatten alle plug-ins in één bestand. Voeg er maar één toe.

Afhankelijkheden van plug-ins

Sommige plug-ins en CSS-componenten zijn afhankelijk van andere plug-ins. Als u plug-ins afzonderlijk opneemt, moet u controleren op deze afhankelijkheden in de documenten. Merk ook op dat alle plug-ins afhankelijk zijn van jQuery (dit betekent dat jQuery moet worden opgenomen vóór de plug-inbestanden). Raadpleeg onzebower.json om te zien welke versies van jQuery worden ondersteund.

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, om een ​​specifieke plug-in te targeten, voegt u gewoon de naam van de plug-in toe als een naamruimte samen met de data-api-naamruimte als volgt:

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

Slechts één plug-in per element via gegevensattributen

Gebruik geen gegevenskenmerken van meerdere plug-ins op hetzelfde element. Een knop kan bijvoorbeeld niet zowel een tooltip hebben als een modaal wisselen. Gebruik hiervoor een wikkelelement.

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
})

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

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.

Bibliotheken van derden

Bootstrap ondersteunt officieel geen JavaScript-bibliotheken van derden, zoals Prototype of jQuery UI. Ondanks .noConflictgebeurtenissen met naamruimte, kunnen er compatibiliteitsproblemen zijn die u zelf moet oplossen.

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.

Meerdere open modals niet ondersteund

Zorg ervoor dat u geen modaal opent terwijl een andere nog zichtbaar is. Om meer dan één modal tegelijk weer te geven, is een aangepaste code vereist.

Modale opmaakplaatsing

Probeer altijd de HTML-code van een modal op een toppositie in uw document te plaatsen om te voorkomen dat andere componenten het uiterlijk en/of de functionaliteit van de modal beïnvloeden.

Waarschuwingen voor mobiele apparaten

Er zijn enkele kanttekeningen bij het gebruik van modals op mobiele apparaten. Zie onze browserondersteuningsdocumenten voor details.

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>

Maak modaliteiten toegankelijk

Zorg ervoor dat u role="dialog"en toevoegt aria-labelledby="...", verwijzend naar de modale titel, naar .modalen role="document"naar de .modal-dialogzelf.

Bovendien kunt u een beschrijving van uw modale dialoog geven met aria-describedbyop .modal.

YouTube-video's insluiten

Voor het insluiten van YouTube-video's in modals is extra JavaScript vereist dat niet in Bootstrap zit om het afspelen automatisch te stoppen en meer. Zie deze nuttige Stack Overflow-post voor meer informatie.

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 bs-example-modal-lg" 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 bs-example-modal-sm" 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 -->

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,

...meer knoppen...
<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="".

Naam type standaard Omschrijving
achtergrond boolean of de string'static' WAAR Bevat een modaal-achtergrondelement. U kunt ook een achtergrond opgeven staticdie de modal niet sluit bij klikken.
toetsenbord booleaans WAAR Sluit de modal wanneer de escape-toets wordt ingedrukt
show booleaans WAAR Toont de modal wanneer geïnitialiseerd.
op afstand pad vals

Deze optie is verouderd sinds v3.3.0 en is verwijderd in v4. We raden u aan in plaats daarvan sjablonen aan de clientzijde of een raamwerk voor gegevensbinding te gebruiken, of zelf jQuery.load aan te roepen .

Als er een externe URL is opgegeven, wordt de inhoud een keer geladen via de methode van jQuery en in de div loadgeïnjecteerd . .modal-contentAls u de data-api gebruikt, kunt u ook het hrefkenmerk gebruiken om de externe bron op te geven. Een voorbeeld hiervan is hieronder weergegeven:

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

Methoden:

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

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

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')

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')

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')

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

Evenementtype Beschrijving
show.bs.modal Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de showinstantiemethode wordt aangeroepen. Indien veroorzaakt door een klik, is het aangeklikte element beschikbaar als de relatedTargeteigenschap van de gebeurtenis.
getoond.bs.modal Deze gebeurtenis wordt geactiveerd wanneer de modal zichtbaar is gemaakt voor de gebruiker (wacht tot de CSS-overgangen zijn voltooid). Indien veroorzaakt door een klik, is het aangeklikte element beschikbaar als de relatedTargeteigenschap van de gebeurtenis.
verberg.bs.modal Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de hideinstantiemethode is aangeroepen.
verborgen.bs.modal Deze gebeurtenis wordt geactiveerd wanneer de modal klaar is met verborgen zijn voor de gebruiker (wacht tot de CSS-overgangen zijn voltooid).
geladen.bs.modal Deze gebeurtenis wordt geactiveerd wanneer de modale inhoud heeft geladen met behulp van de remoteoptie.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Vervolgkeuzelijsten dropdown.js

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

Binnen een navigatiebalk

Binnen pillen

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()

data-toggle="dropdown"nog steeds vereist

Ongeacht of u uw vervolgkeuzelijst via JavaScript oproept of in plaats daarvan de data-api gebruikt, data-toggle="dropdown"moet altijd aanwezig zijn op het trigger-element van de vervolgkeuzelijst.

Geen

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

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

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

Evenementtype Beschrijving
show.bs.dropdown Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de methode show instance wordt aangeroepen.
getoond.bs.vervolgkeuzemenu Deze gebeurtenis wordt geactiveerd wanneer de vervolgkeuzelijst zichtbaar is gemaakt voor de gebruiker (wacht op CSS-overgangen om te voltooien).
verberg.bs.dropdown Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de methode hide instance is aangeroepen.
verborgen.bs.vervolgkeuzelijst Deze gebeurtenis wordt geactiveerd wanneer de vervolgkeuzelijst is verborgen voor de gebruiker (wacht op CSS-overgangen om te voltooien).
$('#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.

@dik

Ad legging keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi voordat ze uitverkocht waren. Tumblr fietsrechten van boer tot bord. Anim keffiyeh carles vest. Velit seitan mcsweeney's fotohokje 3 wolf moon irure. Cosby sweater lomo jeansshort, williamsburg hoodie minim qui je hebt er waarschijnlijk nog nooit van gehoord et cardigan trust fund culpa biodiesel wes anderson esthetiek. Nihil getatoeëerde accusamus, cred ironie biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa snor skateboard, adipisicing fugiat velit hooivork baard. Freegan baard aliqua cupidatat mcsweeney's vero. Cupidatat vier loko nisi, ea helvetica nulla carles. Getatoeëerde cosby sweater foodtruck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 kleermaker. Carles niet-esthetische inspanning quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

een

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo fietsrechten adipisicing banh mi, velit ea sunt next level locavore single-origin koffie in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, duurzame delectus consectetur heuptasje iphone.

twee

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa wat dan ook delectus foodtruck. Sapiente synth id veronderstelnda. Locavore sed helvetica cliché ironie, donderkatten waarvan je waarschijnlijk nog nooit hebt gehoord, consequat hoodie glutenvrije lo-fi fap aliquip. Labore elit placeat voordat ze uitverkocht waren, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Vest ambachtelijk bier seitan kant en klare velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Gebruik

Bootstrap-navigatie vereist

Scrollspy vereist momenteel het gebruik van een Bootstrap-navigatiecomponent voor het correct markeren van actieve links.

Oplosbare ID-doelen vereist

Navbar-links moeten oplosbare id-doelen hebben. Een <a href="#home">home</a>moet bijvoorbeeld overeenkomen met iets in de DOM zoals <div id="home"></div>.

Niet :visible-doelelementen genegeerd

Doelelementen die niet :visiblevolgens jQuery zijn, worden genegeerd en de bijbehorende navigatie-items worden nooit gemarkeerd.

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

Naam type standaard Omschrijving
offset nummer 10 Pixels die vanaf de bovenkant moeten worden verschoven bij het berekenen van de scrollpositie.

Evenementen

Evenementtype Beschrijving
activeer.bs.scrollspy Deze gebeurtenis wordt geactiveerd wanneer een nieuw item wordt geactiveerd door de scrollspy.
$('#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.

Raw denim, je hebt waarschijnlijk nog nooit van die jeansshort Austin gehoord. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Snor cliche tempor, williamsburg carles veganistische helvetica. Reprehenderit slager retro keffiyeh dromenvanger synth. Cosby trui eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis vest amerikaanse kleding, slager voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Breidt navigatie met tabbladen uit

Deze plug-in breidt de navigatiecomponent met tabbladen uit om gebieden met tabbladen toe te voegen.

Gebruik

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.

Evenementtype Beschrijving
toon.bs.tabblad Deze gebeurtenis wordt geactiveerd bij tabshow, maar voordat het nieuwe tabblad is weergegeven. Gebruik event.targeten event.relatedTargetom respectievelijk het actieve tabblad en het vorige actieve tabblad (indien beschikbaar) te targeten.
getoond.bs.tabblad Deze gebeurtenis wordt geactiveerd bij tabshow nadat een tabblad is weergegeven. Gebruik event.targeten event.relatedTargetom respectievelijk het actieve tabblad en het vorige actieve tabblad (indien beschikbaar) te targeten.
verberg.bs.tab Deze gebeurtenis wordt geactiveerd wanneer een nieuw tabblad moet worden weergegeven (en dus het vorige actieve tabblad moet worden verborgen). Gebruik event.targeten om respectievelijk event.relatedTargethet huidige actieve tabblad en het nieuwe binnenkort actieve tabblad te targeten.
verborgen.bs.tabblad Deze gebeurtenis wordt geactiveerd nadat een nieuw tabblad is weergegeven (en dus het vorige actieve tabblad is verborgen). Gebruik event.targeten event.relatedTargetom respectievelijk het vorige actieve tabblad en het nieuwe actieve tabblad te targeten.
$('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 van lengte nul worden nooit weergegeven.

Voorbeelden

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

Strakke broeken van het volgende niveau keffiyeh , je hebt er waarschijnlijk nog nooit van gehoord. Photo booth baard raw denim boekdruk veganistische messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie duurzame quinoa 8-bit amerikaanse kleding heeft een terry richardson vinyl chambray. Baardstumptown, vesten banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, vier loko mcsweeney's cleanse veganistische chambray. Een echt ironische ambachtsman , ongeacht keytar , scenester farm-to-table banksy Austin twitter omgaan met freegan cred raw denim single-origin coffee viral.

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>

Opt-in-functionaliteit

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

Een manier om alle knopinfo op een pagina te initialiseren, is door ze op hun data-toggleattribuut te selecteren:

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

Links met meerdere regels

Soms wilt u knopinfo toevoegen aan een hyperlink die meerdere regels omvat. Het standaardgedrag van de tooltip-plug-in is om deze horizontaal en verticaal te centreren. Voeg toe white-space: nowrap;aan uw ankers om dit te voorkomen.

Tooltips in knopgroepen, invoergroepen en tabellen vereisen een speciale instelling

Wanneer u knopinfo gebruikt voor elementen binnen a .btn-groupof een .input-group, of voor tabelgerelateerde elementen ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), moet u de optie specificeren container: 'body'(hieronder beschreven) om ongewenste neveneffecten te voorkomen (zoals het element dat breder wordt en/of of de afgeronde hoeken verliezen wanneer de tooltip wordt geactiveerd).

Probeer geen tooltips weer te geven over verborgen elementen

Als u een beroep $(...).tooltip('show')doet op het doelelement, wordt display: none;de tooltip niet correct gepositioneerd.

Toegankelijke tooltips voor gebruikers van toetsenbord en ondersteunende technologie

Voor gebruikers die met een toetsenbord navigeren, en in het bijzonder gebruikers van ondersteunende technologieën, moet u alleen tooltips toevoegen aan toetsenbord-focusbare elementen zoals koppelingen, formulierbesturingselementen of elk willekeurig element met een tabindex="0"attribuut.

Tooltips voor uitgeschakelde elementen vereisen wrapper-elementen

Om een ​​tooltip aan een disabledof .disabledelement toe te voegen, plaatst u het element in a <div>en past u de tooltip daarop toe <div>.

Opties

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

Naam Type Standaard Beschrijving
animatie booleaans WAAR Pas een CSS-vervagingsovergang toe op de knopinfo
container tekenreeks | vals vals

Voegt de knopinfo toe aan een specifiek element. Voorbeeld: container: 'body'. Deze optie is met name handig omdat u de tooltip in de stroom van het document in de buurt van het activerende element kunt plaatsen - waardoor wordt voorkomen dat de tooltip van het triggerende element wegzweeft tijdens een venstergrootte.

vertraging nummer | object 0

Vertraging bij het tonen en verbergen van de knopinfo (ms) - is niet van toepassing op het handmatige triggertype

Als een nummer wordt opgegeven, wordt vertraging toegepast op zowel verbergen/weergeven

Objectstructuur is:delay: { "show": 500, "hide": 100 }

html booleaans vals HTML invoegen in de tooltip. Indien onwaar, wordt de methode van jQuery textgebruikt om inhoud in de DOM in te voegen. Gebruik sms als je je zorgen maakt over XSS-aanvallen.
plaatsing tekenreeks | functie 'bovenkant'

Hoe de tooltip te positioneren - top | onderaan | links | rechts | auto.
Wanneer "auto" is opgegeven, wordt de tooltip dynamisch heroriënteerd. Als de plaatsing bijvoorbeeld "auto left" is, wordt de tooltip indien mogelijk links weergegeven, anders rechts.

Wanneer een functie wordt gebruikt om de plaatsing te bepalen, wordt deze aangeroepen met de tooltip DOM-node als eerste argument en het triggerende element DOM-node als tweede. De thiscontext is ingesteld op de tooltip-instantie.

selector snaar vals Als er een selector is, worden knopinfo-objecten gedelegeerd aan de opgegeven doelen. In de praktijk wordt dit gebruikt om aan dynamische HTML-inhoud tooltips toe te voegen. Zie dit en een informatief voorbeeld .
sjabloon snaar '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Basis-HTML om te gebruiken bij het maken van de knopinfo.

De tooltip's titleworden in de .tooltip-inner.

.tooltip-arrowwordt de pijl van de knopinfo.

Het buitenste wrapper-element moet de .tooltipclass.

titel tekenreeks | functie ''

Standaardtitelwaarde als titleattribuut niet aanwezig is.

Als een functie is opgegeven, wordt deze aangeroepen met de thisreferentieset naar het element waaraan de tooltip is gekoppeld.

trekker snaar 'zwevende focus' Hoe knopinfo wordt geactiveerd - klik op | zweven | focus | handleiding. U kunt meerdere triggers doorgeven; scheid ze met een spatie. manualkan niet worden gecombineerd met een andere trigger.
uitkijk postje tekenreeks | object | functie { selector: 'body', padding: 0 }

Houdt de knopinfo binnen de grenzen van dit element. Voorbeeld: viewport: '#viewport'of{ "selector": "#viewport", "padding": 0 }

Als een functie is opgegeven, wordt deze aangeroepen met het triggerende element DOM-knooppunt als zijn enige argument. De thiscontext is ingesteld op de tooltip-instantie.

Gegevensattributen voor individuele knopinfo

Opties voor individuele tooltips kunnen ook worden gespecificeerd door het gebruik van data-attributen, zoals hierboven uitgelegd.

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 de hidden.bs.tooltipgebeurtenis 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 knopinfo 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

Evenementtype Beschrijving
toon.bs.tooltip Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de showinstantiemethode wordt aangeroepen.
getoond.bs.tooltip Deze gebeurtenis wordt geactiveerd wanneer de knopinfo zichtbaar is gemaakt voor de gebruiker (wacht tot de CSS-overgangen zijn voltooid).
verberg.bs.tooltip Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de hideinstantiemethode is aangeroepen.
verborgen.bs.tooltip Deze gebeurtenis wordt geactiveerd wanneer de knopinfo niet meer voor de gebruiker verborgen is (wacht tot de CSS-overgangen zijn voltooid).
ingevoegd.bs.tooltip Deze gebeurtenis wordt geactiveerd na de show.bs.tooltipgebeurtenis wanneer de tooltip-sjabloon is toegevoegd aan de DOM.
$('#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 huisvesten van secundaire informatie.

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

Afhankelijkheid van plug-ins

Popovers vereisen dat de tooltip-plug- in is opgenomen in uw versie van Bootstrap.

Opt-in-functionaliteit

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

Een manier om alle popovers op een pagina te initialiseren, is door ze op hun data-toggleattribuut te selecteren:

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

Popovers in knopgroepen, invoergroepen en tabellen vereisen een speciale instelling

Wanneer u popovers gebruikt op elementen binnen een .btn-groupof een .input-group, of op tabelgerelateerde elementen ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), moet u de optie specificeren container: 'body'(hieronder beschreven) om ongewenste neveneffecten te voorkomen (zoals het element dat breder wordt en/of of de afgeronde hoeken verliezen wanneer de popover wordt geactiveerd).

Probeer geen popovers op verborgen elementen weer te geven

Als u aanroept $(...).popover('show')wanneer het doelelement is display: none;, wordt de popover onjuist gepositioneerd.

Popovers op uitgeschakelde elementen vereisen wrapper-elementen

Om een ​​popover aan een element disabledof toe te voegen .disabled, plaatst u het element in a <div>en past u de popover daarop toe <div>.

Links met meerdere regels

Soms wilt u een pop-over toevoegen aan een hyperlink die meerdere regels omvat. Het standaardgedrag van de popover-plug-in is om deze horizontaal en verticaal te centreren. Voeg toe white-space: nowrap;aan uw ankers om dit te voorkomen.

Voorbeelden

Statische popover

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

Popover-top

Sed posuere consectetur est bij lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover rechts

Sed posuere consectetur est bij lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover onderkant

Sed posuere consectetur est bij lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover links

Sed posuere consectetur est bij lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

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.

Specifieke opmaak vereist voor afwijzen bij volgende klik

Voor correct cross-browser en cross-platform gedrag moet u de <a>tag gebruiken, niet de <button>tag, en u moet ook de role="button"en tabindexattributen opnemen.

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

Naam Type Standaard Beschrijving
animatie booleaans WAAR Pas een CSS-vervagingsovergang toe op de popover
container tekenreeks | vals vals

Voegt de popover toe aan een specifiek element. Voorbeeld: container: 'body'. Deze optie is met name handig omdat u de popover in de stroom van het document in de buurt van het activerende element kunt plaatsen - waardoor wordt voorkomen dat de popover van het activerende element wegzweeft tijdens het formaat van het venster.

inhoud tekenreeks | functie ''

Standaard inhoudswaarde als data-contentkenmerk niet aanwezig is.

Als een functie is opgegeven, wordt deze aangeroepen met de thisreferentieset naar het element waaraan de popover is gekoppeld.

vertraging nummer | object 0

Vertraging bij het tonen en verbergen van de popover (ms) - is niet van toepassing op het handmatige triggertype

Als een nummer wordt opgegeven, wordt vertraging toegepast op zowel verbergen/weergeven

Objectstructuur is:delay: { "show": 500, "hide": 100 }

html booleaans vals HTML invoegen in de popover. Indien onwaar, wordt de methode van jQuery textgebruikt om inhoud in de DOM in te voegen. Gebruik sms als je je zorgen maakt over XSS-aanvallen.
plaatsing tekenreeks | functie 'Rechtsaf'

Hoe de popover te plaatsen - top | onderaan | links | rechts | auto.
Wanneer "auto" is opgegeven, zal het de popover dynamisch heroriënteren. Als de plaatsing bijvoorbeeld "auto left" is, wordt de popover indien mogelijk links weergegeven, anders rechts.

Wanneer een functie wordt gebruikt om de plaatsing te bepalen, wordt deze aangeroepen met het popover-DOM-knooppunt als het eerste argument en het activerende element DOM-knooppunt als het tweede. De thiscontext is ingesteld op de popover-instantie.

selector snaar vals Als er een selector is, worden popover-objecten gedelegeerd aan de opgegeven doelen. In de praktijk wordt dit gebruikt om dynamische HTML-inhoud popovers toe te laten voegen. Zie dit en een informatief voorbeeld .
sjabloon snaar '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Basis-HTML die moet worden gebruikt bij het maken van de popover.

De popover's titleworden in de .popover-title.

De popover's contentworden in de .popover-content.

.arrowwordt de pijl van de popover.

Het buitenste wrapper-element moet de .popoverclass.

titel tekenreeks | functie ''

Standaardtitelwaarde als titleattribuut niet aanwezig is.

Als een functie is opgegeven, wordt deze aangeroepen met de thisreferentieset naar het element waaraan de popover is gekoppeld.

trekker snaar 'Klik' Hoe popover wordt geactiveerd - klik op | zweven | focus | handleiding. U kunt meerdere triggers doorgeven; scheid ze met een spatie. manualkan niet worden gecombineerd met een andere trigger.
uitkijk postje tekenreeks | object | functie { selector: 'body', padding: 0 }

Houdt de popover binnen de grenzen van dit element. Voorbeeld: viewport: '#viewport'of{ "selector": "#viewport", "padding": 0 }

Als een functie is opgegeven, wordt deze aangeroepen met het triggerende element DOM-knooppunt als zijn enige argument. De thiscontext is ingesteld op de popover-instantie.

Gegevensattributen voor individuele popovers

Opties voor individuele popovers kunnen ook worden gespecificeerd door het gebruik van data-attributen, zoals hierboven uitgelegd.

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 de hidden.bs.popovergebeurtenis 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

Evenementtype Beschrijving
show.bs.popover Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de showinstantiemethode wordt aangeroepen.
getoond.bs.popover Deze gebeurtenis wordt geactiveerd wanneer de popover zichtbaar is gemaakt voor de gebruiker (wacht tot de CSS-overgangen zijn voltooid).
verberg.bs.popover Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de hideinstantiemethode is aangeroepen.
verborgen.bs.popover Deze gebeurtenis wordt geactiveerd wanneer de popover is verborgen voor de gebruiker (wacht tot de CSS-overgangen zijn voltooid).
ingevoegd.bs.popover Deze gebeurtenis wordt geactiveerd na de show.bs.popovergebeurtenis wanneer de popover-sjabloon is toegevoegd aan de DOM.
$('#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.

Evenementtype Beschrijving
close.bs.alert Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de closeinstantiemethode wordt aangeroepen.
gesloten.bs.alert Deze gebeurtenis wordt geactiveerd wanneer de waarschuwing is gesloten (wacht tot de CSS-overgangen zijn voltooid).
$('#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.

Compatibiliteit tussen browsers

Firefox houdt de controlestatussen (uitgeschakeld en gecontroleerd) aan bij het laden van pagina's . Een oplossing hiervoor is het gebruik van autocomplete="off". Zie Mozilla-bug #654072 .

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.

Gebruik de staat die je wilt!

Voor deze demonstratie gebruiken we data-loading-texten $().button('loading'), maar dat is niet de enige status die u kunt gebruiken. Zie meer hierover hieronder in de $().button(string)documentatie .

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  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.

Vooraf geschakelde knoppen nodig .activeenaria-pressed="true"

Voor vooraf omgeschakelde knoppen moet u de .activeklasse en het aria-pressed="true"kenmerk aan buttonuzelf toevoegen.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  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.

Voorgeselecteerde opties nodig.active

Voor voorgeselecteerde opties moet u de .activeklasse zelf aan de invoer toevoegen label.

Visueel aangevinkte staat alleen bijgewerkt bij klikken

Als de aangevinkte status van een checkbox-knop wordt bijgewerkt zonder een clickgebeurtenis op de knop te activeren (bijvoorbeeld via <input type="reset">of via het instellen van de eigenschap van de invoer), moet u zelf de klasse op de invoer checkedschakelen ..activelabel

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> 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" autocomplete="off">
  ...
</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.

Afhankelijkheid van plug-ins

Collapse vereist dat de plug- in voor overgangen is opgenomen in uw versie van Bootstrap.

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.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<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.

Anim pariatur cliché reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Foodtruck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua zet er een vogel op inktvis single-origin koffie nulla veronderstelnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan behalve slager vice lomo. Leggings voor ambachtelijk bier van boer tot bord, ruwe denim esthetische synth nesciunt je hebt er waarschijnlijk nog nooit van gehoord accusamus labore duurzame VHS.
Anim pariatur cliché reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Foodtruck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua zet er een vogel op inktvis single-origin koffie nulla veronderstelnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan behalve slager vice lomo. Leggings voor ambachtelijk bier van boer tot bord, ruwe denim esthetische synth nesciunt je hebt er waarschijnlijk nog nooit van gehoord accusamus labore duurzame VHS.
Anim pariatur cliché reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Foodtruck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua zet er een vogel op inktvis single-origin koffie nulla veronderstelnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan behalve slager vice lomo. Leggings voor ambachtelijk bier van boer tot bord, ruwe denim esthetische synth nesciunt je hebt er waarschijnlijk nog nooit van gehoord accusamus labore duurzame VHS.
<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.

  • Bootply
  • Een itmus ac facilin
  • tweede eros

Besturingselementen voor uitvouwen/samenvouwen toegankelijk maken

Zorg ervoor dat u aria-expandedhet besturingselement toevoegt. Dit kenmerk definieert expliciet de huidige status van het opvouwbare element voor schermlezers en vergelijkbare ondersteunende technologieën. Als het opvouwbare element standaard is gesloten, moet het een waarde hebben van aria-expanded="false". Als je hebt ingesteld dat het opvouwbare element standaard open is met behulp van de inklasse, stel je inaria-expanded="true" je in plaats daarvan in op het besturingselement. De plug-in schakelt dit kenmerk automatisch in op basis van het feit of het opvouwbare element al dan niet is geopend of gesloten.

Bovendien, als uw besturingselement gericht is op een enkel opvouwbaar element – ​​dwz het data-targetattribuut verwijst naar een idselector – kunt u een extra aria-controlsattribuut toevoegen aan het besturingselement, dat de idvan het inklapbare element bevat. Moderne schermlezers en vergelijkbare ondersteunende technologieën maken gebruik van dit kenmerk om gebruikers extra snelkoppelingen te bieden om rechtstreeks naar het inklapbare element zelf te navigeren.

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 in component-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="".

Naam type standaard Omschrijving
ouder selector vals Als er een selector is, worden alle samenvouwbare elementen onder het opgegeven bovenliggende element gesloten wanneer dit samenvouwbare item wordt weergegeven. (vergelijkbaar met traditioneel accordeongedrag - dit is afhankelijk van de panelklasse)
schakelaar booleaans WAAR Schakelt het opvouwbare element in bij aanroepen

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 aanroeper voordat het opvouwbare element daadwerkelijk is verborgen (dwz voordat de hidden.bs.collapsegebeurtenis plaatsvindt).

Evenementen

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

Evenementtype Beschrijving
toon.bs.collapse Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de showinstantiemethode wordt aangeroepen.
getoond.bs.collapse Deze gebeurtenis wordt geactiveerd wanneer een samengevouwen element zichtbaar is gemaakt voor de gebruiker (wacht tot de CSS-overgangen zijn voltooid).
verberg.bs.collapse Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de hidemethode is aangeroepen.
verborgen.bs.collapse Deze gebeurtenis wordt geactiveerd wanneer een samengevouwen element is verborgen voor de gebruiker (wacht tot de CSS-overgangen zijn voltooid).
$('#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.

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

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

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 kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-interval="".

Naam type standaard Omschrijving
interval nummer 5000 De hoeveelheid tijd die verstrijkt tussen het automatisch wisselen van een item. Indien onwaar, zal de carrousel niet automatisch draaien.
pauze tekenreeks | nul "zweven" Indien ingesteld op "hover", pauzeert het draaien van de carrousel aan mouseenteren hervat het fietsen van de carrousel aan mouseleave. Als deze is ingesteld op null, wordt deze niet gepauzeerd door de muisaanwijzer op de carrousel te plaatsen.
wrap booleaans WAAR Of de carrousel continu moet fietsen of harde stops moet hebben.
toetsenbord booleaans WAAR Of de carrousel moet reageren op toetsenbordgebeurtenissen.

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

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

Doorloopt de carrouselitems van links naar rechts.

Voorkomt dat de carrousel door items fietst.

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

Hiermee gaat u naar het vorige item.

Gaat naar het volgende item.

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

Beide gebeurtenissen 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">).

Evenementtype Beschrijving
dia.bs.carrousel Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de slideinstantiemethode wordt aangeroepen.
slid.bs.carrousel Deze gebeurtenis wordt geactiveerd wanneer de carrousel de dia-overgang heeft voltooid.
$('#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 toe data-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".

Naam type standaard Omschrijving
offset nummer | functie | object 10 Pixels die van het scherm moeten worden verschoven bij het berekenen van de scrollpositie. Als een enkel nummer wordt opgegeven, wordt de offset zowel in de boven- als onderrichting toegepast. Om een ​​unieke, onderste en bovenste offset te bieden, hoeft u alleen maar een object offset: { top: 10 }of offset: { top: 10, bottom: 5 }. Gebruik een functie wanneer u dynamisch een offset moet berekenen.
doelwit kiezer | knoop | jQuery-element het windowobject Specificeert het doelelement van de affix.

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.

Evenementtype Beschrijving
affix.bs.affix Deze gebeurtenis wordt geactiveerd onmiddellijk voordat het element is aangebracht.
aangebracht.bs.affix Deze gebeurtenis wordt geactiveerd nadat het element is aangebracht.
affix-top.bs.affix Deze gebeurtenis wordt geactiveerd onmiddellijk voordat het element bovenaan is aangebracht.
aangebracht-top.bs.affix Deze gebeurtenis wordt geactiveerd nadat het element is aangebracht-top.
affix-bottom.bs.affix Deze gebeurtenis wordt geactiveerd onmiddellijk voordat het element onderaan is aangebracht.
aangebracht-bodem.bs.affix Deze gebeurtenis wordt geactiveerd nadat het element onderaan is aangebracht.