Aan de slag
Een overzicht van Bootstrap, hoe te downloaden en te gebruiken, basissjablonen en voorbeelden, en meer.
Een overzicht van Bootstrap, hoe te downloaden en te gebruiken, basissjablonen en voorbeelden, en meer.
Bootstrap (momenteel v3.3.7) heeft een paar eenvoudige manieren om snel aan de slag te gaan, elk met een ander vaardigheidsniveau en gebruiksscenario. Lees door om te zien wat past bij uw specifieke behoeften.
Gecompileerde en verkleinde CSS, JavaScript en lettertypen. Er worden geen documenten of originele bronbestanden meegeleverd.
Source Less, JavaScript en font-bestanden, samen met onze documenten. Vereist een Less-compiler en wat instellingen.
Bootstrap geport van Less naar Sass voor eenvoudige opname in Rails-, Compass- of Sass-only projecten.
De mensen van jsDelivr bieden genadig CDN-ondersteuning voor Bootstrap's CSS en JavaScript. Gebruik gewoon deze Bootstrap CDN- links.
U kunt ook Bootstrap's Less, CSS, JavaScript en lettertypen installeren en beheren met Bower :
Je kunt Bootstrap ook installeren met npm :
require('bootstrap')
laadt alle jQuery-plug-ins van Bootstrap op het jQuery-object. De bootstrap
module zelf exporteert niets. U kunt de jQuery-plug-ins van Bootstrap handmatig afzonderlijk laden door de /js/*.js
bestanden in de map op het hoogste niveau van het pakket te laden.
Bootstrap's package.json
bevat enkele aanvullende metadata onder de volgende sleutels:
less
- pad naar het belangrijkste Less -bronbestand van Bootstrapstyle
- pad naar de niet-verkleinde CSS van Bootstrap die vooraf is gecompileerd met de standaardinstellingen (geen aanpassing)U kunt Less, CSS, JavaScript en lettertypen van Bootstrap ook installeren en beheren met Composer :
Bootstrap gebruikt Autoprefixer om voorvoegsels van CSS-leveranciers af te handelen . Als u Bootstrap compileert vanuit de Less/Sass-bron en ons Gruntfile niet gebruikt, moet u Autoprefixer zelf in uw bouwproces integreren. Als je voorgecompileerde Bootstrap of onze Gruntfile gebruikt, hoef je je hier geen zorgen over te maken omdat Autoprefixer al in onze Gruntfile is geïntegreerd.
Bootstrap kan in twee vormen worden gedownload, waarin u de volgende mappen en bestanden vindt, die gemeenschappelijke bronnen logisch groeperen en zowel gecompileerde als verkleinde variaties bieden.
Houd er rekening mee dat voor alle JavaScript-plug-ins jQuery moet worden opgenomen, zoals weergegeven in de startersjabloon . Raadpleeg onzebower.json
om te zien welke versies van jQuery worden ondersteund.
Pak na het downloaden de gecomprimeerde map uit om de structuur van (de gecompileerde) Bootstrap te zien. Je ziet zoiets als dit:
Dit is de meest basale vorm van Bootstrap: voorgecompileerde bestanden voor snel gebruik in bijna elk webproject. We bieden gecompileerde CSS en JS ( bootstrap.*
), evenals gecompileerde en verkleinde CSS en JS ( bootstrap.min.*
). CSS -bronkaarten ( bootstrap.*.map
) zijn beschikbaar voor gebruik met de ontwikkelaarstools van bepaalde browsers. Lettertypen van Glyphicons zijn inbegrepen, evenals het optionele Bootstrap-thema.
De download van de Bootstrap-broncode bevat de voorgecompileerde CSS-, JavaScript- en font-assets, samen met Source Less, JavaScript en documentatie. Meer specifiek omvat het het volgende en meer:
De less/
, js/
, en fonts/
zijn de broncode voor onze CSS-, JS- en pictogramlettertypen (respectievelijk). De dist/
map bevat alles wat wordt vermeld in de vooraf gecompileerde downloadsectie hierboven. De docs/
map bevat de broncode voor onze documentatie en voor het examples/
gebruik van Bootstrap. Daarnaast biedt elk ander opgenomen bestand ondersteuning voor pakketten, licentie-informatie en ontwikkeling.
Bootstrap gebruikt Grunt voor zijn bouwsysteem, met handige methoden om met het framework te werken. Het is hoe we onze code compileren, tests uitvoeren en meer.
Om Grunt te installeren, moet u eerst node.js (inclusief npm) downloaden en installeren. npm staat voor node-packaged modules en is een manier om ontwikkelingsafhankelijkheden te beheren via node.js.
Vervolgens vanaf de opdrachtregel:grunt-cli
wereldwijd met npm install -g grunt-cli
./bootstrap/
en voer vervolgens uit npm install
. npm zal naar het package.json
bestand kijken en automatisch de benodigde lokale afhankelijkheden installeren die daar worden vermeld.Als je klaar bent, kun je de verschillende Grunt-commando's uitvoeren vanaf de opdrachtregel.
grunt dist
(Gewoon CSS en JavaScript compileren)Regenereert de /dist/
map met gecompileerde en verkleinde CSS- en JavaScript-bestanden. Als Bootstrap-gebruiker is dit normaal gesproken het commando dat u wilt.
grunt watch
(Horloge)Bekijkt de Less-bronbestanden en compileert ze automatisch naar CSS wanneer u een wijziging opslaat.
grunt test
(Voer testen uit)Voert JSHint uit en voert de QUnit- tests zonder kop uit in PhantomJS .
grunt docs
(Bouw en test de docs-assets)Bouwt en test CSS, JavaScript en andere middelen die worden gebruikt bij het lokaal uitvoeren van de documentatie via bundle exec jekyll serve
.
grunt
(Bouw absoluut alles en voer tests uit)Compileert en verkleint CSS en JavaScript, bouwt de documentatiewebsite, voert de HTML5-validator uit op de documenten, regenereert de Customizer-assets en meer. Jekyll vereist . Meestal alleen nodig als je Bootstrap zelf hackt.
Mocht u problemen ondervinden met het installeren van afhankelijkheden of het uitvoeren van Grunt-commando's, verwijder dan eerst de /node_modules/
directory die door npm is gegenereerd. Daarna opnieuw uitvoeren npm install
.
Begin met deze eenvoudige HTML-sjabloon of pas deze voorbeelden aan . We hopen dat u onze sjablonen en voorbeelden aanpast aan uw behoeften.
Kopieer de onderstaande HTML om te beginnen met een minimaal Bootstrap-document.
Bouw voort op de basissjabloon hierboven met de vele componenten van Bootstrap. We moedigen u aan om Bootstrap aan te passen en aan te passen aan de behoeften van uw individuele project.
Download de broncode voor elk voorbeeld hieronder door de Bootstrap-repository te downloaden . Voorbeelden zijn te vinden in de docs/examples/
directory.
Maak een aangepaste navigatiebalk met gerechtvaardigde links. Kop op! Niet te Safari-vriendelijk.
Schakel het reactievermogen van Bootstrap eenvoudig uit volgens onze documenten .
Bootlint is de officiële Bootstrap HTML - lintertool . Het controleert automatisch op verschillende veelvoorkomende HTML-fouten in webpagina's die Bootstrap op een redelijk "vanille" manier gebruiken. De componenten/widgets van Vanilla Bootstrap vereisen dat hun delen van de DOM voldoen aan bepaalde structuren. Bootlint controleert of instanties van Bootstrap-componenten correct gestructureerde HTML hebben. Overweeg om Bootlint toe te voegen aan uw Bootstrap-toolketen voor webontwikkeling, zodat geen van de veelvoorkomende fouten de ontwikkeling van uw project vertraagt.
Blijf op de hoogte van de ontwikkeling van Bootstrap en neem contact op met de community met deze handige bronnen.
irc.freenode.net
server, in het ##bootstrap-kanaal .twitter-bootstrap-3
.bootstrap
op pakketten die de functionaliteit van Bootstrap wijzigen of uitbreiden wanneer ze worden gedistribueerd via npm of vergelijkbare leveringsmechanismen voor maximale vindbaarheid.Je kunt @getbootstrap ook volgen op Twitter voor de laatste roddels en geweldige muziekvideo's.
Bootstrap past uw pagina's automatisch aan voor verschillende schermformaten. Hier leest u hoe u deze functie kunt uitschakelen, zodat uw pagina werkt zoals in dit niet-reagerende voorbeeld .
<meta>
die wordt genoemd in de CSS-documentenwidth
op de .container
voor elke rasterlaag met een enkele breedte, bijvoorbeeld width: 970px !important;
Zorg ervoor dat dit na de standaard Bootstrap-CSS komt. !important
U kunt de met mediaquery's of sommige selector-fu optioneel vermijden ..col-xs-*
klassen naast of in plaats van de middelgrote/grote. Maak je geen zorgen, het extra kleine apparaatraster schaalt naar alle resoluties.Je hebt Respond.js nog steeds nodig voor IE8 (aangezien onze mediaquery's er nog steeds zijn en moeten worden verwerkt). Dit schakelt de "mobiele site"-aspecten van Bootstrap uit.
We hebben deze stappen toegepast op een voorbeeld. Lees de broncode om de specifieke wijzigingen te zien die zijn doorgevoerd.
Wilt u migreren van een oudere versie van Bootstrap naar v3.x? Bekijk onze migratiegids .
Bootstrap is gebouwd om het beste te werken in de nieuwste desktop- en mobiele browsers, wat betekent dat oudere browsers anders gestileerde, maar volledig functionele weergaven van bepaalde componenten kunnen weergeven.
We ondersteunen met name de nieuwste versies van de volgende browsers en platforms.
Alternatieve browsers die de nieuwste versie van WebKit, Blink of Gecko gebruiken, rechtstreeks of via de webview-API van het platform, worden niet expliciet ondersteund. Bootstrap zou echter (in de meeste gevallen) ook in deze browsers correct moeten worden weergegeven en functioneren. Hieronder vindt u meer specifieke ondersteuningsinformatie.
Over het algemeen ondersteunt Bootstrap de nieuwste versies van de standaardbrowsers van elk belangrijk platform. Merk op dat proxy-browsers (zoals Opera Mini, Opera Mobile's Turbo-modus, UC Browser Mini, Amazon Silk) niet worden ondersteund.
Chroom | Firefox | Safari | |
---|---|---|---|
Android | Ondersteund | Ondersteund | Nvt |
iOS | Ondersteund | Ondersteund | Ondersteund |
Evenzo worden de nieuwste versies van de meeste desktopbrowsers ondersteund.
Chroom | Firefox | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Mac | Ondersteund | Ondersteund | Nvt | Ondersteund | Ondersteund |
ramen | Ondersteund | Ondersteund | Ondersteund | Ondersteund | Niet ondersteund |
Op Windows ondersteunen we Internet Explorer 8-11 .
Voor Firefox ondersteunen we, naast de nieuwste normale stabiele release, ook de nieuwste Extended Support Release (ESR) -versie van Firefox.
Onofficieel zou Bootstrap er goed genoeg moeten uitzien en zich goed genoeg gedragen in Chromium en Chrome voor Linux, Firefox voor Linux en Internet Explorer 7, evenals in Microsoft Edge, hoewel ze niet officieel worden ondersteund.
Voor een lijst van enkele van de browserbugs waarmee Bootstrap te maken heeft, zie onze Muur met browserbugs .
Internet Explorer 8 en 9 worden ook ondersteund, maar houd er rekening mee dat sommige CSS3-eigenschappen en HTML5-elementen niet volledig worden ondersteund door deze browsers. Daarnaast vereist Internet Explorer 8 het gebruik van Respond.js om ondersteuning voor mediaquery's in te schakelen.
Voorzien zijn van | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Niet ondersteund | Ondersteund |
box-shadow |
Niet ondersteund | Ondersteund |
transform |
Niet ondersteund | Ondersteund, met -ms voorvoegsel |
transition |
Niet ondersteund | |
placeholder |
Niet ondersteund |
Ga naar Kan ik gebruiken... voor details over browserondersteuning van CSS3- en HTML5-functies.
Pas op voor de volgende kanttekeningen bij het gebruik van Respond.js in uw ontwikkel- en productieomgevingen voor Internet Explorer 8.
Het gebruik van Respond.js met CSS gehost op een ander (sub)domein (bijvoorbeeld op een CDN) vereist wat extra instellingen. Zie de documenten van Respond.js voor details.
file://
Vanwege browserbeveiligingsregels werkt Respond.js niet met pagina's die via het file://
protocol worden bekeken (zoals bij het openen van een lokaal HTML-bestand). Bekijk uw pagina's via HTTP(S) om responsieve functies in IE8 te testen. Zie de documenten van Respond.js voor details.
@import
Respond.js werkt niet met CSS waarnaar wordt verwezen via @import
. In het bijzonder is bekend dat sommige Drupal-configuraties @import
. Zie de documenten van Respond.js voor details.
IE8 biedt geen volledige ondersteuning box-sizing: border-box;
in combinatie met min-width
, max-width
, min-height
of max-height
. Om die reden gebruiken we vanaf v3.0.1 niet meer max-width
op .container
s.
IE8 heeft enkele problemen met @font-face
in combinatie met :before
. Bootstrap gebruikt die combinatie met zijn Glyphicons. Als een pagina in de cache wordt opgeslagen en zonder de muis over het venster wordt geladen (dwz druk op de verversknop of laad iets in een iframe), dan wordt de pagina weergegeven voordat het lettertype wordt geladen. Als u met de muis over de pagina (body) beweegt, worden enkele van de pictogrammen weergegeven en als u met de muis over de overige pictogrammen gaat, worden deze ook weergegeven. Zie uitgave #13863 voor details.
Bootstrap wordt niet ondersteund in de oude compatibiliteitsmodi van Internet Explorer. <meta>
Overweeg om de juiste tag in uw pagina's op te nemen om er zeker van te zijn dat u de nieuwste weergavemodus voor IE gebruikt :
Bevestig de documentmodus door de foutopsporingstools te openen: druk opF12 en vink de "Documentmodus" aan.
Deze tag is opgenomen in alle documentatie en voorbeelden van Bootstrap om de best mogelijke weergave in elke ondersteunde versie van Internet Explorer te garanderen.
Zie deze StackOverflow-vraag voor meer informatie.
Internet Explorer 10 maakt geen onderscheid tussen apparaatbreedte en viewport-breedte en past daarom de mediaquery's in de CSS van Bootstrap niet goed toe. Normaal gesproken zou je gewoon een snel stukje CSS toevoegen om dit op te lossen:
Dit werkt echter niet voor apparaten met Windows Phone 8-versies ouder dan Update 3 (ook bekend als GDR3) , omdat het ervoor zorgt dat dergelijke apparaten voornamelijk een desktopweergave tonen in plaats van een smalle "telefoonweergave". Om dit op te lossen, moet u de volgende CSS en JavaScript toevoegen om de bug te omzeilen .
Lees voor meer informatie en gebruiksrichtlijnen Windows Phone 8 en Device-Width .
Als een waarschuwing nemen we dit op in alle documentatie en voorbeelden van Bootstrap als demonstratie.
De rendering-engine van versies van Safari vóór v7.1 voor OS X en Safari voor iOS v8.0 had wat problemen met het aantal decimalen dat in onze rasterklassen werd gebruikt .col-*-1
. Dus als u 12 afzonderlijke rasterkolommen had, zou u merken dat ze te kort kwamen in vergelijking met andere rijen kolommen. Naast het upgraden van Safari/iOS, heb je enkele opties voor tijdelijke oplossingen:
.pull-right
aan je laatste rasterkolom om de juiste uitlijning te krijgenOndersteuning voor overflow: hidden
op het <body>
element is vrij beperkt in iOS en Android. Daartoe zal de <body>
inhoud beginnen te scrollen wanneer u langs de boven- of onderkant van een modaal blad scrolt in een van de browsers van die apparaten. Zie Chrome-bug #175502 (opgelost in Chrome v40) en WebKit-bug #153852 .
Vanaf iOS 9.3, terwijl een modaal open is, als de eerste aanraking van een scroll-gebaar binnen de grens van een tekstuele <input>
of een <textarea>
is, zal de <body>
inhoud onder de modal worden gescrolld in plaats van de modal zelf. Zie WebKit-bug #153856 .
Merk ook op dat als je een vaste navigatiebalk gebruikt of invoer binnen een modaal gebruikt, iOS een renderingbug heeft die de positie van vaste elementen niet bijwerkt wanneer het virtuele toetsenbord wordt geactiveerd. Een paar oplossingen hiervoor zijn onder meer het transformeren van uw elementen naar position: absolute
of het aanroepen van een timer op focus om te proberen de positionering handmatig te corrigeren. Dit wordt niet afgehandeld door Bootstrap, dus het is aan jou om te beslissen welke oplossing het beste is voor jouw toepassing.
Het .dropdown-backdrop
element wordt niet gebruikt op iOS in de nav vanwege de complexiteit van z-indexering. Om dropdowns in navigatiebalken te sluiten, moet u dus rechtstreeks op het dropdown-element klikken (of een ander element dat een klikgebeurtenis in iOS activeert ).
Zoomen op pagina's leidt onvermijdelijk tot rendering-artefacten in sommige componenten, zowel in Bootstrap als in de rest van het web. Afhankelijk van het probleem kunnen we het mogelijk oplossen (eerst zoeken en indien nodig een probleem openen). We hebben echter de neiging deze te negeren, omdat ze vaak geen directe oplossing hebben behalve hacky-oplossingen.
:hover
/ :focus
op mobielHoewel echt zweven niet mogelijk is op de meeste touchscreens, emuleren de meeste mobiele browsers zweefondersteuning en maken ze :hover
"sticky". Met andere woorden, :hover
stijlen worden toegepast nadat ze op een element hebben getikt en stoppen pas met toepassen nadat de gebruiker op een ander element heeft getikt. Dit kan ertoe leiden dat de :hover
toestanden van Bootstrap ongewenst "vastlopen" in dergelijke browsers. Sommige mobiele browsers maken ook op :focus
dezelfde manier plakkerig. Er is momenteel geen eenvoudige oplossing voor deze problemen, behalve het volledig verwijderen van dergelijke stijlen.
Zelfs in sommige moderne browsers kan afdrukken eigenzinnig zijn.
Met name vanaf Chrome v32 en ongeacht de marge-instellingen, gebruikt Chrome een viewportbreedte die aanzienlijk smaller is dan het fysieke papierformaat bij het oplossen van mediaquery's tijdens het afdrukken van een webpagina. Dit kan ertoe leiden dat het extra kleine raster van Bootstrap onverwacht wordt geactiveerd tijdens het afdrukken. Zie probleem #12078 en Chrome-bug #273306 voor enkele details. Voorgestelde oplossingen:
@screen-*
Less-variabelen aan zodat uw printerpapier als groter dan als extra klein wordt beschouwd.Vanaf Safari v8.0 kunnen s met vaste breedte .container
er ook voor zorgen dat Safari een ongebruikelijk kleine lettergrootte gebruikt bij het afdrukken. Zie #14868 en WebKit-bug #138192 voor meer details. Een mogelijke oplossing hiervoor is het toevoegen van de volgende CSS:
Out of the box, Android 4.1 (en zelfs sommige nieuwere releases blijkbaar) worden geleverd met de Browser-app als de standaard webbrowser naar keuze (in tegenstelling tot Chrome). Helaas heeft de Browser-app veel bugs en inconsistenties met CSS in het algemeen.
Op <select>
elementen zal de Android-voorraadbrowser de zijbedieningen niet weergeven als er een border-radius
en/of is border
toegepast. (Zie deze StackOverflow-vraag voor details.) Gebruik het onderstaande codefragment om de aanstootgevende CSS te verwijderen en het <select>
als een ongestileerd element weer te geven in de Android-aandelenbrowser. Het snuiven van de user-agent vermijdt interferentie met Chrome-, Safari- en Mozilla-browsers.
Een voorbeeld zien? Bekijk deze JS Bin-demo.
Om de best mogelijke ervaring te bieden aan oude browsers en browsers met fouten, gebruikt Bootstrap CSS-browserhacks om speciale CSS op bepaalde browserversies te richten om bugs in de browsers zelf te omzeilen. Deze hacks zorgen er begrijpelijkerwijs voor dat CSS-validators klagen dat ze ongeldig zijn. Op een paar plaatsen gebruiken we ook geavanceerde CSS-functies die nog niet volledig zijn gestandaardiseerd, maar deze worden puur gebruikt voor progressieve verbetering.
Deze validatiewaarschuwingen doen er in de praktijk niet toe, aangezien het niet-hacky-gedeelte van onze CSS volledig valideert en de hacky-gedeelten de goede werking van het niet-hacky-gedeelte niet verstoren, vandaar dat we deze specifieke waarschuwingen opzettelijk negeren.
Onze HTML-documenten bevatten eveneens enkele triviale en onbeduidende HTML-validatiewaarschuwingen vanwege onze opname van een tijdelijke oplossing voor een bepaalde Firefox-bug .
Hoewel we officieel geen plug-ins of add-ons van derden ondersteunen, bieden we wel wat nuttig advies om mogelijke problemen in uw projecten te voorkomen.
Sommige software van derden, waaronder Google Maps en Google Custom Search Engine, conflicteert met Bootstrap vanwege * { box-sizing: border-box; }
, een regel waardoor het padding
geen invloed heeft op de uiteindelijke berekende breedte van een element. Leer meer over doosmodel en maatvoering bij CSS Tricks .
Afhankelijk van de context kunt u indien nodig overschrijven (optie 1) of de grootte van de doos voor hele regio's opnieuw instellen (optie 2).
Bootstrap volgt algemene webstandaarden en kan met minimale extra inspanning worden gebruikt om sites te maken die toegankelijk zijn voor degenen die AT gebruiken .
Als je navigatie veel links bevat en vóór de hoofdinhoud in het DOM komt, voeg dan een Skip to main content
link toe vóór de navigatie (zie voor een eenvoudige uitleg dit A11Y-projectartikel over navigatielinks overslaan ). Door de .sr-only
klas te gebruiken, wordt de link overslaan visueel verborgen en de .sr-only-focusable
klas zorgt ervoor dat de link zichtbaar wordt zodra deze is gefocust (voor ziende toetsenbordgebruikers).
Vanwege langdurige tekortkomingen/bugs in Chrome (zie probleem 262171 in de Chromium-bugtracker ) en Internet Explorer (zie dit artikel over in-page links en focusvolgorde ), moet u ervoor zorgen dat het doel van uw skip-link is op zijn minst programmatisch focusbaar door toe te voegen tabindex="-1"
.
Daarnaast wil je misschien expliciet een zichtbare focusindicatie op het doel onderdrukken (met name omdat Chrome momenteel ook de focus op elementen instelt tabindex="-1"
wanneer er met de muis op wordt geklikt) met #content:focus { outline: none; }
.
Houd er rekening mee dat deze bug ook van invloed is op andere in-page-links die uw site mogelijk gebruikt, waardoor ze onbruikbaar worden voor toetsenbordgebruikers. U kunt overwegen een gelijkaardige stop-gap-fix toe te voegen aan alle andere benoemde ankers/fragment-ID's die fungeren als linkdoelen.
Bij het nesten van koppen ( <h1>
- <h6>
), moet uw primaire documentkop een <h1>
. Volgende kopjes moeten logisch gebruik maken van <h2>
-<h6>
zodat schermlezers een inhoudsopgave voor uw pagina's kunnen maken.
Lees meer op HTML CodeSniffer en Penn State's AccessAbility .
Momenteel zijn enkele van de standaardkleurencombinaties die beschikbaar zijn in Bootstrap (zoals de verschillende gestileerde knopklassen, enkele van de codemarkeringskleuren die worden gebruikt voor basiscodeblokken , de .bg-primary
contextuele achtergrondhelperklasse en de standaard linkkleur bij gebruik op een witte achtergrond) een lage contrastverhouding hebben (onder de aanbevolen verhouding van 4,5:1 ). Dit kan problemen veroorzaken bij slechtziende of kleurenblinde gebruikers. Deze standaardkleuren moeten mogelijk worden gewijzigd om hun contrast en leesbaarheid te vergroten.
Bootstrap wordt vrijgegeven onder de MIT-licentie en is copyright 2016 Twitter. Ingekookt tot kleinere brokken, kan het worden beschreven met de volgende voorwaarden.
De volledige Bootstrap-licentie bevindt zich in de projectrepository voor meer informatie.
Leden van de gemeenschap hebben de documentatie van Bootstrap in verschillende talen vertaald. Geen enkele wordt officieel ondersteund en is mogelijk niet altijd up-to-date.
We helpen niet bij het organiseren of hosten van vertalingen, we linken er alleen naar.
Een nieuwe of betere vertaling klaar? Open een pull-aanvraag om deze aan onze lijst toe te voegen.