Aan de slag met Bootstrap
Bootstrap is een krachtige frontend-toolkit boordevol functies. Bouw alles - van prototype tot productie - in enkele minuten.
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.html
bestand 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-sizing
waarde om van content-box
naar border-box
. Dit zorgt ervoor padding
dat 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 ::before
en, ::after
allemaal het gespecificeerde box-sizing
daarvoor 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.chat
server, in het#bootstrap
kanaal. - Hulp bij implementatie is te vinden op Stack Overflow (tagged
bootstrap-5
). - Ontwikkelaars moeten het sleutelwoord gebruiken
bootstrap
op 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.