Source

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, gratis verstrekt door de mensen van jsDelivr. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Veel van onze componenten vereisen het gebruik van JavaScript om te kunnen functioneren. Ze vereisen met name jQuery , Popper.js en onze eigen JavaScript-plug-ins. Plaats 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.js en dan onze JavaScript-plug-ins.

We gebruiken de slim build van jQuery , maar de volledige versie wordt ook ondersteund.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Benieuwd welke componenten jQuery, onze JS en Popper.js expliciet 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.

Onze bootstrap.bundle.jsen bootstrap.bundle.min.jsomvatten Popper , maar niet jQuery . Raadpleeg onze inhoudssectie voor meer informatie over wat er in Bootstrap is opgenomen .

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 (vereist ook Popper.js )
  • Modalen voor weergave, positionering en scrollgedrag
  • Navbar voor het uitbreiden van onze Collapse-plug-in om responsief gedrag te implementeren
  • Tooltips en popovers voor weergave en positionering (vereist ook Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Community

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

  • Follow @getbootstrap on Twitter.
  • Read and subscribe to The Official Bootstrap Blog.
  • Chat with fellow Bootstrappers in IRC. On the irc.freenode.net server, in the ##bootstrap channel.
  • Implementation help may be found at 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.