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.

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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Veel van onze componenten vereisen het gebruik van JavaScript om te kunnen functioneren. In het bijzonder hebben ze jQuery , Popper en onze eigen JavaScript-plug-ins nodig. We gebruiken de slim build van jQuery , maar de volledige versie wordt ook ondersteund.

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. jQuery moet eerst komen, dan Popper en dan onze JavaScript-plug-ins.

Bundel

Voeg elke Bootstrap JavaScript-plug-in toe aan een van onze twee bundels. Beide bootstrap.bundle.jsen bootstrap.bundle.min.jsbevatten Popper voor onze tooltips en popovers, maar niet jQuery . Voeg eerst jQuery toe en vervolgens een Bootstrap JavaScript-bundel. Raadpleeg onze inhoudssectie voor meer informatie over wat er in Bootstrap is opgenomen .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Componenten

Benieuwd welke componenten jQuery, ons JavaScript en Popper expliciet nodig hebben? Klik op de onderstaande link om componenten te tonen. Als u niet zeker bent van de 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
Scrollspy voor scrollgedrag en navigatie-updates
Tooltips en popovers voor weergave en positionering (vereist ook Popper )

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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Dat is alles wat u nodig heeft voor algemene paginavereisten. Bezoek 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, shrink-to-fit=no">

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

CSP's en ingesloten SVG's

Verschillende Bootstrap-componenten bevatten ingesloten SVG's in onze CSS om componenten consistent en gemakkelijk op te maken voor verschillende browsers en apparaten. Voor organisaties met strengere CSP -configuraties hebben we alle instanties van onze ingesloten SVG's gedocumenteerd (die allemaal worden toegepast via background-image), zodat u uw opties grondiger kunt bekijken.

Sluitknop (gebruikt in waarschuwingen en modals)
Aangepaste selectievakjes en keuzerondjes
Vorm schakelaars
Pictogrammen voor formuliervalidatie
Aangepaste menu's selecteren
Carrouselbediening
Navigatieknoppen op de navigatiebalk

Op basis van gemeenschapsgesprekken zijn enkele opties om dit in uw eigen codebase aan te pakken het vervangen van de URL's door lokaal gehoste middelen, het verwijderen van de afbeeldingen en het gebruik van inline-afbeeldingen (niet mogelijk in alle componenten) en het wijzigen van uw CSP. Onze aanbeveling is om uw eigen beveiligingsbeleid zorgvuldig door te nemen en zo nodig te beslissen over de beste weg vooruit.