Downloaden

Bootstrap (momenteel v3.4.1) 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.

jsDelivr

De mensen van jsDelivr bieden genadig CDN-ondersteuning voor Bootstrap's CSS en JavaScript. Gebruik gewoon deze jsDelivr- links.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Installeren met Bower

U kunt ook Bootstrap's Less, CSS, JavaScript en lettertypen installeren en beheren met Bower :

bower install bootstrap

Installeren met npm

Je kunt Bootstrap ook installeren met npm :

npm install bootstrap@3

require('bootstrap')laadt alle jQuery-plug-ins van Bootstrap op het jQuery-object. De bootstrapmodule zelf exporteert niets. U kunt de jQuery-plug-ins van Bootstrap handmatig afzonderlijk laden door de /js/*.jsbestanden in de map op het hoogste niveau van het pakket te laden.

Bootstrap's package.jsonbevat enkele aanvullende metadata onder de volgende sleutels:

• less- pad naar het belangrijkste Less -bronbestand van Bootstrap
• style- pad naar de niet-verkleinde CSS van Bootstrap die vooraf is gecompileerd met de standaardinstellingen (geen aanpassing)

Installeren met Composer

U kunt Less, CSS, JavaScript en lettertypen van Bootstrap ook installeren en beheren met Composer :

composer require twbs/bootstrap

Autoprefixer vereist voor Less/Sass

Bootstrap gebruikt Autoprefixer om de voorvoegsels van CSS-leveranciers aan te pakken . 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.

Wat is inbegrepen

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.

Voorgecompileerde Bootstrap

Pak na het downloaden de gecomprimeerde map uit om de structuur van (de gecompileerde) Bootstrap te zien. Je ziet zoiets als dit:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

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.

Bootstrap-broncode

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:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

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.

CSS en JavaScript compileren

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.

Grunt installeren

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.

1. Installeer grunt-cliwereldwijd met npm install -g grunt-cli.
2. Navigeer naar de hoofdmap /bootstrap/en voer vervolgens uit npm install. npm zal naar het package.jsonbestand 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.

Beschikbare Grunt-commando's

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 uit in echte browsers dankzij Karma .

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.

Probleemoplossen

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.

Basissjabloon

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.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Voorbeelden

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.

Het raamwerk gebruiken

Startsjabloon

Niets dan de basis: gecompileerde CSS en JavaScript samen met een container.

Bootstrap-thema

Laad het optionele Bootstrap-thema voor een visueel verbeterde ervaring.

Rasters

Meerdere voorbeelden van rasterlay-outs met alle vier de lagen, nesten en meer.

Jumbotron

Bouw rond de jumbotron met een navigatiebalk en enkele basisrasterkolommen.

Smalle jumbotron

Bouw een meer aangepaste pagina door de standaardcontainer en jumbotron te verkleinen.

Navigatiebalken in actie

navigatiesysteem

Super basissjabloon met de navigatiebalk en wat extra inhoud.

Statische navigatiebalk bovenaan

Superbasissjabloon met een statische navigatiebalk bovenaan en wat extra inhoud.

Vaste navigatiebalk

Superbasissjabloon met een navigatiebalk met vaste bovenkant en wat extra inhoud.

Aangepaste componenten

Omslag

Een sjabloon van één pagina voor het maken van eenvoudige en mooie startpagina's.

Carrousel

Pas de navigatiebalk en carrousel aan en voeg vervolgens enkele nieuwe componenten toe.

Blog

Eenvoudige bloglay-out met twee kolommen met aangepaste navigatie, koptekst en type.

Dashboard

Basisstructuur voor een beheerdersdashboard met vaste zijbalk en navigatiebalk.

Inlogpagina

Aangepaste formulierlay-out en ontwerp voor een eenvoudig inlogformulier.

gerechtvaardigde navigatie

Maak een aangepaste navigatiebalk met gerechtvaardigde links. Kop op! Niet te Safari-vriendelijk.

Kleverige voettekst

Voeg een voettekst toe aan de onderkant van de viewport wanneer de inhoud korter is dan deze.

Sticky footer met navigatiebalk

Bevestig een voettekst aan de onderkant van de viewport met een vaste navigatiebalk bovenaan.

experimenten

Niet-reagerende Bootstrap

Schakel het reactievermogen van Bootstrap eenvoudig uit volgens onze documenten .

Off-canvas

Bouw een schakelbaar off-canvas navigatiemenu voor gebruik met Bootstrap.

Hulpmiddelen

Bootlint

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.

Gemeenschap

Blijf op de hoogte van de ontwikkeling van Bootstrap en neem contact op met de gemeenschap met deze handige bronnen.

• Lees en abonneer je op The Official Bootstrap Blog .
• Chat met andere Bootstrappers via IRC op de irc.freenode.netserver, in het ##bootstrap-kanaal .
• Voor hulp bij het gebruik van Bootstrap, vraag op StackOverflow met behulp van de tagtwitter-bootstrap-3 .
• Ontwikkelaars moeten het sleutelwoord gebruiken bootstrapop pakketten die de functionaliteit van Bootstrap wijzigen of uitbreiden wanneer ze worden gedistribueerd via npm of vergelijkbare leveringsmechanismen voor maximale vindbaarheid.
• Vind inspirerende voorbeelden van mensen die bouwen met Bootstrap op de Bootstrap Expo .

Je kunt @getbootstrap ook volgen op Twitter voor de laatste roddels en geweldige muziekvideo's.

Reactiviteit uitschakelen

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 .

Stappen om paginaresponsiviteit uit te schakelen

1. Laat de viewport weg <meta>die wordt genoemd in de CSS-documenten
2. Overschrijf de widthop de .containervoor elke rasterlaag met een enkele breedte, bijvoorbeeld width: 970px !important;Zorg ervoor dat dit na de standaard Bootstrap-CSS komt. !importantU kunt de met mediaquery's of sommige selector-fu optioneel vermijden .
3. Als u navigatiebalken gebruikt, verwijder dan al het inklap- en uitvouwgedrag van de navigatiebalk.
4. Gebruik voor rasterlay-outs .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.

Bootstrap-sjabloon met reactievermogen uitgeschakeld

We hebben deze stappen toegepast op een voorbeeld. Lees de broncode om de specifieke wijzigingen te zien die zijn doorgevoerd.

Voorbeeld niet-reagerend bekijken

Browser- en apparaatondersteuning

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.

Ondersteunde browsers

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.

Mobiele toestellen

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.

Desktopbrowsers

Evenzo worden de nieuwste versies van de meeste desktopbrowsers 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

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.

Ga naar Kan ik gebruiken... voor details over browserondersteuning van CSS3- en HTML5-functies.

Internet Explorer 8 en Respond.js

Pas op voor de volgende kanttekeningen bij het gebruik van Respond.js in uw ontwikkel- en productieomgevingen voor Internet Explorer 8.

Respond.js en cross-domein CSS

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.

Reageren.js enfile://

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.

Reageren.js en@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.

Internet Explorer 8 en box-sizing

IE8 biedt geen volledige ondersteuning box-sizing: border-box;in combinatie met min-width, max-width, min-heightof max-height. Om die reden gebruiken we vanaf v3.0.1 niet meer max-widthop .containers.

Internet Explorer 8 en @font-face

IE8 heeft enkele problemen met @font-facein 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.

IE-compatibiliteitsmodi

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 :

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Bevestig de documentmodus door de foutopsporingstools te openen: druk op F12en vink de "Documentmodus" aan.

Deze tag is opgenomen in alle documentatie en voorbeelden van Bootstrap om de best mogelijke weergave te garanderen in elke ondersteunde versie van Internet Explorer.

Zie deze StackOverflow-vraag voor meer informatie.

Internet Explorer 10 in Windows 8 en Windows Phone 8

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:

@-ms-viewport       { width: device-width; }

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 .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Lees Windows Phone 8 en Device-Width voor meer informatie en gebruiksrichtlijnen .

Als een waarschuwing nemen we dit op in alle documentatie en voorbeelden van Bootstrap als demonstratie.

Safari procent afronding

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:

• Voeg toe .pull-rightaan je laatste rasterkolom om de juiste uitlijning te krijgen
• Pas uw percentages handmatig aan om de perfecte afronding voor Safari te krijgen (moeilijker dan de eerste optie)

Modalen, navigatiebalken en virtuele toetsenborden

Overlopen en scrollen

Ondersteuning voor overflow: hiddenop 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 .

iOS-tekstvelden en scrollen

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 .

Virtuele toetsenborden

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

Navbar-dropdownmenu's

Het .dropdown-backdropelement 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 ).

Browser zoomen

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.

Sticky :hover/ :focusop mobiel

Hoewel echt zweven niet mogelijk is op de meeste touchscreens, emuleren de meeste mobiele browsers zweefondersteuning en maken ze :hover"sticky". Met andere woorden, :hoverstijlen 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 :hovertoestanden van Bootstrap ongewenst "vastlopen" in dergelijke browsers. Sommige mobiele browsers maken ook op :focusdezelfde manier plakkerig. Er is momenteel geen eenvoudige oplossing voor deze problemen, behalve het volledig verwijderen van dergelijke stijlen.

Afdrukken

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:

• Omarm het extra kleine raster en zorg ervoor dat uw pagina eronder acceptabel uitziet.
• Pas de waarden van de @screen-*Less-variabelen aan zodat uw printerpapier als groter dan als extra klein wordt beschouwd.
• Voeg aangepaste mediaquery's toe om de breekpunten van de rastergrootte alleen voor gedrukte media te wijzigen.

Vanaf Safari v8.0 kunnen s met vaste breedte .containerer ook voor zorgen dat Safari een ongewoon 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:

@media print {
  .container {
    width: auto;
  }
}

Android-voorraadbrowser

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.

Menu's selecteren

Op <select>elementen zal de Android-voorraadbrowser de zijbedieningen niet weergeven als er een border-radiusen/of is bordertoegepast. (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.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Een voorbeeld zien? Bekijk deze JS Bin-demo.

Validators

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 .

Ondersteuning van derden

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.

Doosmaat

Sommige software van derden, waaronder Google Maps en Google Custom Search Engine, is in strijd met Bootstrap vanwege * { box-sizing: border-box; }een regel waardoor het paddinggeen 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).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Toegankelijkheid

Bootstrap volgt algemene webstandaarden en kan met minimale extra inspanning worden gebruikt om sites te maken die toegankelijk zijn voor degenen die AT gebruiken .

Navigatie overslaan

Als je navigatie veel links bevat en vóór de hoofdinhoud in het DOM komt, voeg dan een Skip to main contentlink toe vóór de navigatie (zie voor een eenvoudige uitleg dit A11Y-projectartikel over navigatielinks overslaan ). Door de .sr-onlyklas te gebruiken, wordt de link overslaan visueel verborgen en de .sr-only-focusableklas zorgt ervoor dat de link zichtbaar wordt zodra deze is gefocust (voor ziende toetsenbordgebruikers).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Geneste koppen

Bij het nesten van koppen ( <h1>- <h6>), moet uw primaire documentkop een <h1>. Daaropvolgende koppen moeten logisch worden gebruikt <h2>, <h6>zodat schermlezers een inhoudsopgave voor uw pagina's kunnen maken.

Lees meer op HTML CodeSniffer en Penn State's AccessAbility .

Kleurcontrast

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.

Aanvullende bronnen

• "HTML Codesniffer" bookmarklet voor het identificeren van toegankelijkheidsproblemen
• Chrome's Accessibility Developer Tools-extensie
• Kleurcontrastanalysator
• Het A11Y-project
• MDN-documentatie over toegankelijkheid

Veelgestelde vragen over licenties

Bootstrap is vrijgegeven onder de MIT-licentie en is copyright 2019 Twitter. Ingekookt tot kleinere brokken, kan het worden beschreven met de volgende voorwaarden.

Het vereist dat u:

• Bewaar de licentie- en copyrightkennisgeving die is opgenomen in de CSS- en JavaScript-bestanden van Bootstrap wanneer u ze in uw werk gebruikt

Het staat u toe om:

• Gratis downloaden en gebruiken van Bootstrap, geheel of gedeeltelijk, voor persoonlijke, privé-, bedrijfsinterne of commerciële doeleinden
• Gebruik Bootstrap in pakketten of distributies die u maakt
• Wijzig de broncode
• Verleen een sublicentie voor het wijzigen en distribueren van Bootstrap aan derden die niet in de licentie zijn opgenomen

Het verbiedt je om:

• Stel de auteurs en licentiehouders aansprakelijk voor schade, aangezien Bootstrap zonder garantie wordt geleverd
• Houd de makers of houders van auteursrechten van Bootstrap aansprakelijk
• Verspreid elk stukje Bootstrap zonder de juiste naamsvermelding
• Gebruik alle merken die eigendom zijn van Twitter op een manier die zou kunnen stellen of impliceren dat Twitter uw distributie goedkeurt
• Gebruik alle merken die eigendom zijn van Twitter op een manier die zou kunnen aangeven of impliceren dat u de betreffende Twitter-software hebt gemaakt

Het vereist niet dat u:

• Neem de bron van Bootstrap zelf op, of van eventuele wijzigingen die u eraan hebt aangebracht, in elke herdistributie die u kunt samenstellen die het bevat
• Dien wijzigingen die u aanbrengt in Bootstrap terug in het Bootstrap-project (hoewel dergelijke feedback wordt aangemoedigd)

De volledige Bootstrap-licentie bevindt zich in de projectrepository voor meer informatie.

Vertalingen

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.

• Bootstrap 中文文档 (Chinees)
• Bootstrap på Dansk (Deens)
• Bootstrap en Français (Frans)
• Bootstrap auf Deutsch (Duits)
• Bootstrap in het Italiaans (Italiaans)
• Bootstrap 한국어 (Koreaans)
• Bootstrap em Português do Brasil (Braziliaans Portugees)
• Bootstrap по-русски (Russisch)
• Bootstrap en Español (Spaans)
• Turkse Bootstrap (Turks)
• Bootstrap українською (Oekraïens)
• Bootstrap bằng tiếng Việt (Vietnamees)

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.