Aan de slag met Bootstrap

Bootstrap is een krachtige frontend-toolkit boordevol functies. Bouw alles - van prototype tot productie - in enkele minuten.

Op deze pagina

Snelle start

Ga aan de slag door Bootstrap's productieklare CSS en JavaScript via CDN op te nemen zonder dat er bouwstappen nodig zijn. Zie het in de praktijk met deze Bootstrap CodePen-demo .

Maak een nieuw index.htmlbestand in de hoofdmap van uw project. Voeg <meta name="viewport">ook de tag toe voor correct responsief gedrag op mobiele apparaten.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Inclusief CSS en JS van Bootstrap. Plaats de <link>tag in de <head>voor onze CSS en de <script>tag voor onze JavaScript-bundel (inclusief Popper voor het positioneren van dropdowns, poppers en tooltips) vóór de afsluitende </body>. Lees meer over onze CDN-links .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Je kunt Popper en onze JS ook afzonderlijk toevoegen. Als je niet van plan bent om dropdowns, popovers of tooltips te gebruiken, bespaar dan wat kilobytes door Popper niet mee te nemen.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Hallo Wereld! Open de pagina in uw browser naar keuze om uw Bootstrapped-pagina te zien. Nu kunt u beginnen met bouwen met Bootstrap door uw eigen lay-out te maken , tientallen componenten toe te voegen en onze officiële voorbeelden te gebruiken .

CDN-links

Als referentie zijn hier onze primaire CDN-links.

Beschrijving	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

U kunt het CDN ook gebruiken om een van onze aanvullende builds op te halen die op de inhoudspagina worden vermeld .

Volgende stappen

Lees wat meer over enkele belangrijke globale omgevingsinstellingen die Bootstrap gebruikt.
Lees over wat er in Bootstrap is opgenomen in onze inhoudssectie en de lijst met componenten die JavaScript nodig hebben hieronder.
Heb je wat meer kracht nodig? Overweeg om met Bootstrap te bouwen door de bronbestanden op te nemen via pakketbeheer .
Wilt u Bootstrap gebruiken als een module met <script type="module">? Raadpleeg onze sectie over het gebruik van Bootstrap als module .

JS-componenten

Benieuwd welke componenten expliciet onze JavaScript en Popper nodig hebben? Klik op de onderstaande link om componenten te tonen. Als u helemaal niet zeker bent van de algemene paginastructuur, lees dan verder voor een voorbeeldpaginasjabloon.

Componenten weergeven die JavaScript vereisen

Waarschuwingen voor ontslag
Knoppen voor het schakelen tussen statussen en checkbox/radiofunctionaliteit
Carrousel voor alle diagedragingen, bedieningselementen en indicatoren
Samenvouwen om de zichtbaarheid van inhoud te wijzigen
Dropdowns voor weergave en positionering (ook Popper vereist )
Modalen voor weergave, positionering en scrollgedrag
Navigatiebalk voor het uitbreiden van onze Collapse- en Offcanvas-plug-ins om responsief gedrag te implementeren
Navs met de Tab-plug-in voor het wisselen van inhoudsvensters
Offcanvases voor weergave, positionering en scrollgedrag
Scrollspy voor scrollgedrag en navigatie-updates
Toast om te tonen en af te wijzen
Tooltips en popovers voor weergave en positionering (vereist ook Popper )

Belangrijke globals

Bootstrap maakt gebruik van een handvol belangrijke globale stijlen en instellingen, die allemaal bijna uitsluitend zijn gericht op de normalisatie van cross-browserstijlen. Laten we erin duiken.

HTML5-documenttype

Bootstrap vereist het gebruik van het HTML5-doctype. Zonder dit zie je een funky en onvolledige styling.

<!doctype html>
<html lang="en">
  ...
</html>

Responsieve metatag

Bootstrap is eerst mobiel ontwikkeld , een strategie waarbij we eerst code voor mobiele apparaten optimaliseren en vervolgens waar nodig componenten opschalen met behulp van CSS-mediaquery's. Voeg de responsieve viewport-metatag toe aan uw <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

U kunt een voorbeeld hiervan in actie zien in de snelstart .

Doosmaat

Voor een eenvoudiger formaat in CSS schakelen we de globale box-sizingwaarde om van content-boxnaar border-box. Dit zorgt ervoor paddingdat de uiteindelijke berekende breedte van een element niet wordt beïnvloed, maar het kan problemen veroorzaken met software van derden, zoals Google Maps en Google Custom Search Engine.

In het zeldzame geval dat u het moet overschrijven, gebruikt u zoiets als het volgende:

.selector-for-some-widget {
  box-sizing: content-box;
}

Met het bovenstaande fragment zullen geneste elementen, inclusief gegenereerde inhoud via ::beforeen, ::afterallemaal het gespecificeerde box-sizingdaarvoor overnemen .selector-for-some-widget.

Leer meer over doosmodel en maatvoering bij CSS Tricks .

Opnieuw opstarten

Voor een verbeterde weergave tussen browsers gebruiken we Reboot om inconsistenties tussen browsers en apparaten te corrigeren, terwijl we iets meer eigenzinnige resets bieden voor algemene HTML-elementen.

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 .
Vraag en verken onze GitHub-discussies .
Chat met andere Bootstrappers in IRC. Op de irc.libera.chatserver, in het #bootstrapkanaal.
Hulp bij implementatie is te vinden op Stack Overflow (tagged bootstrap-5).
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.

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