Invoering

Ga aan de slag met Bootstrap, 's werelds meest populaire framework voor het bouwen van responsieve, mobielgerichte sites, met jsDelivr en een startpagina voor sjablonen.

Op deze pagina

Snelle start

Wilt u snel Bootstrap aan uw project toevoegen? Gebruik jsDelivr, een gratis open source CDN. Gebruik je een pakketbeheerder of moet je de bronbestanden downloaden? Ga naar de downloadpagina .

CSS

Kopieer en plak de stylesheet <link>in uw <head>vóór alle andere stylesheets om onze CSS te laden.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Veel van onze componenten vereisen het gebruik van JavaScript om te kunnen functioneren. In het bijzonder hebben ze onze eigen JavaScript-plug-ins en Popper nodig . Plaats een van de volgende <script>s aan het einde van uw pagina's, vlak voor de afsluitende </body>tag, om ze in te schakelen.

Bundel

Voeg elke Bootstrap JavaScript-plug-in en afhankelijkheid toe aan een van onze twee bundels. Beide bootstrap.bundle.jsen bootstrap.bundle.min.jsinclusief Popper voor onze tooltips en popovers. Raadpleeg onze inhoudssectie voor meer informatie over wat er in Bootstrap is opgenomen .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Verschillend

Als je besluit om voor de afzonderlijke scriptoplossing te gaan, moet Popper eerst komen (als je tooltips of popovers gebruikt) en daarna onze JavaScript-plug-ins.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Modules

Als u gebruikt <script type="module">, raadpleeg dan ons gedeelte over het gebruik van Bootstrap als module .

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
Navbar voor het uitbreiden van onze Collapse-plug-in om responsief gedrag te implementeren
Offcanvases voor weergave, positionering en scrollgedrag
Toast om te tonen en af te wijzen
Tooltips en popovers voor weergave en positionering (vereist ook Popper )
Scrollspy voor scrollgedrag en navigatie-updates

Startsjabloon

Zorg ervoor dat uw pagina's zijn ingesteld met de nieuwste ontwerp- en ontwikkelingsnormen. Dat betekent het gebruik van een HTML5-doctype en het opnemen van een viewport-metatag voor correct responsief gedrag. Zet alles bij elkaar en je pagina's zouden er als volgt uit moeten zien:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Ga voor de volgende stappen naar de lay-outdocumenten of onze officiële voorbeelden om de inhoud en componenten van uw site op te maken.

Belangrijke globals

Bootstrap gebruikt een handvol belangrijke globale stijlen en instellingen waarvan u op de hoogte moet zijn wanneer u het gebruikt, 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 zul je een aantal funky onvolledige styling zien, maar het opnemen ervan zou geen aanzienlijke haperingen moeten veroorzaken.

<!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 het starterssjabloon .

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