JavaScript
Breng de componenten van Bootstrap tot leven met meer dan een dozijn aangepaste jQuery-plug-ins. Voeg ze eenvoudig allemaal toe, of één voor één.
Breng de componenten van Bootstrap tot leven met meer dan een dozijn aangepaste jQuery-plug-ins. Voeg ze eenvoudig allemaal toe, of één voor één.
Plug-ins kunnen afzonderlijk worden opgenomen (met behulp van de afzonderlijke *.js
bestanden van Bootstrap), of allemaal tegelijk (met bootstrap.js
of de verkleinde bootstrap.min.js
).
Beide bootstrap.js
en bootstrap.min.js
bevatten alle plug-ins in één bestand. Voeg er maar één toe.
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.
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:
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:
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.
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.
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):
Elke plug-in stelt ook zijn onbewerkte constructor bloot aan een Constructor
eigenschap: $.fn.popover.Constructor
. Als u een bepaalde plug-in-instantie wilt ophalen, haalt u deze rechtstreeks op uit een element: $('[rel="popover"]').data('popover')
.
U kunt de standaardinstellingen voor een plug-in wijzigen door het Constructor.DEFAULTS
object van de plug-in aan te passen:
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 .noConflict
op de plug-in waarvan u de waarde wilt terugzetten.
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 preventDefault
functionaliteit. Dit biedt de mogelijkheid om de uitvoering van een actie te stoppen voordat deze begint.
De versie van elk van de jQuery-plug-ins van Bootstrap is toegankelijk via de VERSION
eigenschap van de constructor van de plug-in. Bijvoorbeeld voor de tooltip-plug-in:
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.
Bootstrap ondersteunt officieel geen JavaScript-bibliotheken van derden, zoals Prototype of jQuery UI. Ondanks .noConflict
gebeurtenissen met naamruimte, kunnen er compatibiliteitsproblemen zijn die u zelf moet oplossen.
Voeg voor eenvoudige overgangseffecten transition.js
één keer toe naast de andere JS-bestanden. Als u de gecompileerde (of verkleinde) bootstrap.js
gebruikt, hoeft u dit niet op te nemen - het is er al.
Transition.js is een basishulp voor transitionEnd
evenementen 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 kunnen globaal worden uitgeschakeld met behulp van het volgende JavaScript-fragment, dat moet komen nadat transition.js
(of bootstrap.js
of bootstrap.min.js
, naargelang het geval) is geladen:
Modals zijn gestroomlijnde, maar flexibele dialoogvensters met de minimaal vereiste functionaliteit en slimme standaardinstellingen.
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.
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.
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 autofocus
HTML-attribuut geen effect in Bootstrap-modaliteiten. Gebruik wat aangepast JavaScript om hetzelfde effect te bereiken:
Een gerenderd modaal met koptekst, hoofdtekst en reeks acties in de voettekst.
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.
Zorg ervoor dat u role="dialog"
en toevoegt aria-labelledby="..."
, verwijzend naar de modale titel, naar .modal
en role="document"
naar de .modal-dialog
zelf.
Bovendien kunt u een beschrijving van uw modale dialoog geven met aria-describedby
op .modal
.
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.
Modals hebben twee optionele formaten, beschikbaar via modificatieklassen die op een .modal-dialog
.
Voor modals die gewoon verschijnen in plaats van vervagen om te bekijken, verwijdert u de .fade
klasse uit uw modale opmaak.
Om te profiteren van het Bootstrap-rastersysteem binnen een modaal, nestt u .row
s binnen de .modal-body
en gebruikt u vervolgens de normale rastersysteemklassen.
Heb je een aantal knoppen die allemaal hetzelfde modaal activeren, alleen met een iets andere inhoud? Gebruik event.relatedTarget
en 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
,
De modale plug-in schakelt uw verborgen inhoud op aanvraag in, via gegevensattributen of JavaScript. Het voegt ook toe .modal-open
aan het <body>
standaard scrollgedrag om te negeren en genereert een .modal-backdrop
om een klikgebied te bieden voor het negeren van getoonde modals wanneer buiten het modale geklikt wordt.
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.
Roep een modaal met id myModal
aan met een enkele regel JavaScript:
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 static die 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 |
.modal(options)
Activeert uw inhoud als modaal. Accepteert een optionele optie object
.
.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.modal
of hidden.bs.modal
-gebeurtenis plaatsvindt).
.modal('show')
Opent handmatig een modaal. Keert terug naar de beller voordat de modal daadwerkelijk is getoond (dwz voordat de shown.bs.modal
gebeurtenis plaatsvindt).
.modal('hide')
Verbergt handmatig een modaal. Keert terug naar de beller voordat de modal daadwerkelijk is verborgen (dwz voordat de hidden.bs.modal
gebeurtenis plaatsvindt).
.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.
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 show instantiemethode wordt aangeroepen. Indien veroorzaakt door een klik, is het aangeklikte element beschikbaar als de relatedTarget eigenschap 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 relatedTarget eigenschap van de gebeurtenis. |
verberg.bs.modal | Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de hide instantiemethode 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 remote optie. |
Voeg vervolgkeuzemenu's toe aan bijna alles met deze eenvoudige plug-in, inclusief de navigatiebalk, tabbladen en pillen.
Via gegevensattributen of JavaScript schakelt de vervolgkeuzeplug-in verborgen inhoud (vervolgkeuzemenu's) door de .open
klasse op het bovenliggende lijstitem te schakelen.
Op mobiele apparaten voegt het openen van een vervolgkeuzemenu een tikgebied toe .dropdown-backdrop
voor 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.
Voeg toe data-toggle="dropdown"
aan een link of knop om een vervolgkeuzelijst in te schakelen.
Om URL's intact te houden met koppelingsknoppen, gebruikt u het data-target
kenmerk in plaats van href="#"
.
Roep de vervolgkeuzelijsten op via JavaScript:
data-toggle="dropdown"
nog steeds vereistOngeacht 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
$().dropdown('toggle')
Schakelt het vervolgkeuzemenu van een bepaalde navigatiebalk of navigatie met tabbladen in.
Alle dropdown-gebeurtenissen worden geactiveerd op het .dropdown-menu
bovenliggende element '.
Alle dropdown-gebeurtenissen hebben een relatedTarget
eigenschap 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). |
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.
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.
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.
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.
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.
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.
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>
.
:visible
-doelelementen genegeerdDoelelementen die niet :visible
volgens jQuery zijn, worden genegeerd en de bijbehorende navigatie-items worden nooit gemarkeerd.
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 height
set hebt en overflow-y: scroll;
toegepast.
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-target
kenmerk toe met de ID of klasse van het bovenliggende element van een Bootstrap- .nav
component.
Na het toevoegen position: relative;
van uw CSS, roept u de scrollspy op via JavaScript:
.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:
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. |
Evenementtype | Beschrijving |
---|---|
activeer.bs.scrollspy | Deze gebeurtenis wordt geactiveerd wanneer een nieuw item wordt geactiveerd door de scrollspy. |
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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Deze plug-in breidt de navigatiecomponent met tabbladen uit om gebieden met tabbladen toe te voegen.
Tabbladen inschakelen via JavaScript (elk tabblad moet afzonderlijk worden geactiveerd):
U kunt afzonderlijke tabbladen op verschillende manieren activeren:
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 nav
en 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-tabs
ul
nav
nav-pills
.fade
Voeg aan elk toe om tabbladen te laten infaden .tab-pane
. Het eerste tabblad moet ook .in
de initiële inhoud zichtbaar maken.
$().tab
Activeert een tabelement en inhoudcontainer. Tab moet een data-target
of een href
gericht 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.tab
gebeurtenis plaatsvindt).
Wanneer een nieuw tabblad wordt weergegeven, worden de gebeurtenissen in de volgende volgorde geactiveerd:
hide.bs.tab
(op het huidige actieve tabblad)show.bs.tab
(op het te tonen tabblad)hidden.bs.tab
(op het vorige actieve tabblad, hetzelfde als voor het hide.bs.tab
evenement)shown.bs.tab
(op het nieuw actieve tabblad dat zojuist is weergegeven, dezelfde als voor de show.bs.tab
gebeurtenis)Als er al geen tabblad actief was, worden de gebeurtenissen hide.bs.tab
en hidden.bs.tab
niet geactiveerd.
Evenementtype | Beschrijving |
---|---|
toon.bs.tabblad | Deze gebeurtenis wordt geactiveerd bij tabshow, maar voordat het nieuwe tabblad is weergegeven. Gebruik event.target en event.relatedTarget om 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.target en event.relatedTarget om 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.target en om respectievelijk event.relatedTarget het 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.target en event.relatedTarget om respectievelijk het vorige actieve tabblad en het nieuwe actieve tabblad te targeten. |
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.
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.
Er zijn vier opties beschikbaar: boven, rechts, onder en links uitgelijnd.
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-toggle
attribuut te selecteren:
De tooltip-plug-in genereert on-demand inhoud en markeringen en plaatst standaard tooltips na hun trigger-element.
Activeer de knopinfo via JavaScript:
De vereiste opmaak voor een tooltip is slechts een data
attribuut en title
op het HTML-element wil je een tooltip hebben. De gegenereerde opmaak van een tooltip is vrij eenvoudig, maar vereist wel een positie (standaard ingesteld top
door de plug-in).
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.
Wanneer u knopinfo gebruikt voor elementen binnen a .btn-group
of 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).
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.
Om een tooltip aan een disabled
of .disabled
element toe te voegen, plaatst u het element in a <div>
en past u de tooltip daarop toe <div>
.
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: |
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: |
html | booleaans | vals | HTML invoegen in de tooltip. Indien onwaar, wordt de methode van jQuery text gebruikt 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 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 |
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
Het buitenste wrapper-element moet de |
titel | tekenreeks | functie | '' | Standaardtitelwaarde als Als een functie is opgegeven, wordt deze aangeroepen met de |
trekker | snaar | 'zwevende focus' | Hoe knopinfo wordt geactiveerd - klik op | zweven | focus | handleiding. U kunt meerdere triggers doorgeven; scheid ze met een spatie. manual kan 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: Als een functie is opgegeven, wordt deze aangeroepen met het triggerende element DOM-knooppunt als zijn enige argument. De |
Opties voor individuele tooltips kunnen ook worden gespecificeerd door het gebruik van data-attributen, zoals hierboven uitgelegd.
$().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.tooltip
gebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de tooltip. Knopinfo met titels van lengte nul worden nooit weergegeven.
.tooltip('hide')
Verbergt de knopinfo van een element. Keert terug naar de beller voordat de knopinfo daadwerkelijk is verborgen (dwz voordat de hidden.bs.tooltip
gebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de tooltip.
.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.tooltip
of hidden.bs.tooltip
-gebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de tooltip.
.tooltip('destroy')
Verbergt en vernietigt de tooltip van een element. Tooltips die delegatie gebruiken (die zijn gemaakt met de selector
optie ) kunnen niet afzonderlijk worden vernietigd op onderliggende triggerelementen.
Evenementtype | Beschrijving |
---|---|
toon.bs.tooltip | Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de show instantiemethode 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 hide instantiemethode 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.tooltip gebeurtenis wanneer de tooltip-sjabloon is toegevoegd aan de DOM. |
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.
Popovers vereisen dat de tooltip-plug- in is opgenomen in uw versie van Bootstrap.
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-toggle
attribuut te selecteren:
Wanneer u popovers gebruikt op elementen binnen een .btn-group
of 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).
Om een popover aan een element disabled
of toe te voegen .disabled
, plaatst u het element in a <div>
en past u de popover daarop toe <div>
.
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.
Er zijn vier opties beschikbaar: boven, rechts, onder en links uitgelijnd.
Sed posuere consectetur est bij lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est bij lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est bij lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est bij lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Gebruik de focus
trigger om popovers te sluiten bij de volgende klik die de gebruiker maakt.
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 tabindex
attributen opnemen.
Popovers inschakelen via JavaScript:
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: |
inhoud | tekenreeks | functie | '' | Standaard inhoudswaarde als Als een functie is opgegeven, wordt deze aangeroepen met de |
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: |
html | booleaans | vals | HTML invoegen in de popover. Indien onwaar, wordt de methode van jQuery text gebruikt 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 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 |
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 De popover's
Het buitenste wrapper-element moet de |
titel | tekenreeks | functie | '' | Standaardtitelwaarde als Als een functie is opgegeven, wordt deze aangeroepen met de |
trekker | snaar | 'Klik' | Hoe popover wordt geactiveerd - klik op | zweven | focus | handleiding. U kunt meerdere triggers doorgeven; scheid ze met een spatie. manual kan 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: Als een functie is opgegeven, wordt deze aangeroepen met het triggerende element DOM-knooppunt als zijn enige argument. De |
Opties voor individuele popovers kunnen ook worden gespecificeerd door het gebruik van data-attributen, zoals hierboven uitgelegd.
$().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.popover
gebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de popover. Popovers waarvan zowel de titel als de inhoud nul zijn, worden nooit weergegeven.
.popover('hide')
Verbergt de popover van een element. Keert terug naar de beller voordat de popover daadwerkelijk is verborgen (dwz voordat de hidden.bs.popover
gebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de popover.
.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.popover
of hidden.bs.popover
-gebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de popover.
.popover('destroy')
Verbergt en vernietigt de popover van een element. Popovers die delegatie gebruiken (die zijn gemaakt met de selector
optie ) kunnen niet afzonderlijk worden vernietigd op onderliggende triggerelementen.
Evenementtype | Beschrijving |
---|---|
show.bs.popover | Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de show instantiemethode 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 hide instantiemethode 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.popover gebeurtenis wanneer de popover-sjabloon is toegevoegd aan de DOM. |
Voeg afwijzingsfunctionaliteit toe aan alle waarschuwingsberichten met deze plug-in.
Wanneer u een .close
knop gebruikt, moet deze het eerste kind van de knop zijn en mag er .alert-dismissible
geen tekstinhoud voor komen in de opmaak.
Verander dit en dat en probeer het opnieuw. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
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.
Om ervoor te zorgen dat uw waarschuwingen animatie gebruiken bij het sluiten, moet u ervoor zorgen dat de klassen .fade
en al op hen zijn toegepast..in
$().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 .fade
en .in
aanwezig zijn op het element, verdwijnt de waarschuwing voordat deze wordt verwijderd.
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 close instantiemethode wordt aangeroepen. |
gesloten.bs.alert | Deze gebeurtenis wordt geactiveerd wanneer de waarschuwing is gesloten (wacht tot de CSS-overgangen zijn voltooid). |
Doe meer met knoppen. Beheer knopstatussen of maak groepen knoppen voor meer componenten zoals werkbalken.
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 .
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.
Voor deze demonstratie gebruiken we data-loading-text
en $().button('loading')
, maar dat is niet de enige status die u kunt gebruiken. Zie meer hierover hieronder in de $().button(string)
documentatie .
Toevoegen data-toggle="button"
om schakelen op een enkele knop te activeren.
.active
enaria-pressed="true"
Voor vooraf omgeschakelde knoppen moet u de .active
klasse en het aria-pressed="true"
kenmerk aan button
uzelf toevoegen.
Voeg toe data-toggle="buttons"
aan een .btn-group
selectievakje of radio-ingangen om het schakelen tussen hun respectievelijke stijlen mogelijk te maken.
.active
Voor voorgeselecteerde opties moet u de .active
klasse zelf aan de invoer toevoegen label
.
Als de aangevinkte status van een checkbox-knop wordt bijgewerkt zonder een click
gebeurtenis 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 checked
schakelen ..active
label
$().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.
Flexibele plug-in die een handvol klassen gebruikt voor eenvoudig schakelgedrag.
Collapse vereist dat de plug- in voor overgangen is opgenomen in uw versie van Bootstrap.
Klik op de onderstaande knoppen om een ander element te tonen en te verbergen via klassewijzigingen:
.collapse
verbergt inhoud.collapsing
wordt toegepast tijdens overgangen.collapse.in
toont inhoudU kunt een link met het href
attribuut gebruiken, of een knop met het data-target
attribuut. In beide gevallen data-toggle="collapse"
is het verplicht.
Breid het standaard samenvouwgedrag uit om een accordeon te maken met de paneelcomponent.
Het is ook mogelijk om s te verwisselen .panel-body
met .list-group
s.
Zorg ervoor dat u aria-expanded
het 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 in
klasse, 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-target
attribuut verwijst naar een id
selector – kunt u een extra aria-controls
attribuut toevoegen aan het besturingselement, dat de id
van 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.
De instortingsplug-in gebruikt een paar klassen om het zware werk aan te kunnen:
.collapse
verbergt de inhoud.collapse.in
toont de inhoud.collapsing
wordt toegevoegd wanneer de overgang begint en verwijderd wanneer deze is voltooidDeze lessen zijn te vinden in component-animations.less
.
Voeg gewoon data-toggle="collapse"
en a toe data-target
aan het element om automatisch de besturing van een opvouwbaar element toe te wijzen. Het data-target
attribuut accepteert een CSS-selector om het samenvouwen op toe te passen. Zorg ervoor dat u de klasse toevoegt collapse
aan 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.
Handmatig inschakelen met:
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 panel klasse) |
schakelaar | booleaans | WAAR | Schakelt het opvouwbare element in bij aanroepen |
.collapse(options)
Activeert uw inhoud als een opvouwbaar element. Accepteert een optionele optie object
.
.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.collapse
of 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.collapse
gebeurtenis plaatsvindt).
.collapse('hide')
Verbergt een opvouwbaar element. Keert terug naar de aanroeper voordat het opvouwbare element daadwerkelijk is verborgen (dwz voordat de hidden.bs.collapse
gebeurtenis plaatsvindt).
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 show instantiemethode 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 hide methode 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). |
Een diavoorstellingscomponent om door elementen te fietsen, zoals een carrousel. Geneste carrousels worden niet ondersteund.
De carrouselcomponent voldoet over het algemeen niet aan de toegankelijkheidsnormen. Als u compliant moet zijn, overweeg dan andere opties voor het presenteren van uw inhoud.
Bootstrap gebruikt uitsluitend CSS3 voor zijn animaties, maar Internet Explorer 8 & 9 ondersteunen niet de noodzakelijke CSS-eigenschappen. Er zijn dus geen dia-overgangsanimaties bij het gebruik van deze browsers. We hebben er bewust voor gekozen om geen op jQuery gebaseerde fallbacks op te nemen voor de overgangen.
De .active
klas moet worden toegevoegd aan een van de dia's. Anders is de carrousel niet zichtbaar.
De klassen .glyphicon .glyphicon-chevron-left
en .glyphicon .glyphicon-chevron-right
zijn niet per se nodig voor de besturing. Bootstrap biedt .icon-prev
en .icon-next
als gewone unicode-alternatieven.
Voeg eenvoudig bijschriften toe aan uw dia's met het .carousel-caption
element in een .item
. Plaats daar zowat elke optionele HTML en deze wordt automatisch uitgelijnd en opgemaakt.
Carrousels vereisen het gebruik van een id
op 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.
Gebruik gegevensattributen om de positie van de carrousel eenvoudig te regelen. data-slide
accepteert de trefwoorden prev
of next
, die de positie van de dia verandert ten opzichte van de huidige positie. U kunt ook gebruiken data-slide-to
om 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.
Carrousel handmatig bellen met:
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 mouseenter en 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. |
.carousel(options)
Initialiseert de carrousel met optionele opties object
en begint door items te bladeren.
.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.
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 slide instantiemethode wordt aangeroepen. |
slid.bs.carrousel | Deze gebeurtenis wordt geactiveerd wanneer de carrousel de dia-overgang heeft voltooid. |
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 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 .
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:
.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..affix
vervangt .affix-top
en sets position: fixed;
(geleverd door Bootstrap's CSS)..affix
door .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.
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.
Roep de affix-plug-in aan via JavaScript:
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 window object |
Specificeert het doelelement van de affix. |
.affix(options)
Activeert uw inhoud als toegevoegde inhoud. Accepteert een optionele optie object
.
.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-bottom
worden 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.
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. |