Introduktion
Kom godt i gang med Bootstrap, verdens mest populære framework til at bygge responsive, mobile-first sites, med jsDelivr og en skabelonstartside.
Hurtig start
Ønsker du hurtigt at tilføje Bootstrap til dit projekt? Brug jsDelivr, en gratis open source CDN. Bruger du en pakkehåndtering eller har du brug for at downloade kildefilerne? Gå til downloadsiden .
CSS
Kopier-indsæt stilarket <link>
i dit <head>
før alle andre stylesheets for at indlæse vores CSS.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
JS
Mange af vores komponenter kræver brug af JavaScript for at fungere. Specifikt kræver de vores egne JavaScript-plugins og Popper . Placer et af følgende <script>
s nær slutningen af dine sider, lige før det afsluttende </body>
tag, for at aktivere dem.
Bundt
Inkluder alle Bootstrap JavaScript-plugins og afhængigheder med en af vores to bundter. Både bootstrap.bundle.js
og bootstrap.bundle.min.js
inkluderer Popper til vores værktøjstip og popovers. For mere information om, hvad der er inkluderet i Bootstrap, se venligst vores indholdssektion .
<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>
Adskille
Hvis du beslutter dig for at gå med den separate script-løsning, skal Popper komme først (hvis du bruger værktøjstip eller popovers), og derefter vores JavaScript-plugins.
<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>
Moduler
Hvis du bruger <script type="module">
, se venligst vores brug af Bootstrap som et modulafsnit .
Komponenter
Er du nysgerrig efter, hvilke komponenter der eksplicit kræver vores JavaScript og Popper? Klik på linket til vis komponenter nedenfor. Hvis du overhovedet er usikker på den generelle sidestruktur, skal du fortsætte med at læse efter et eksempel på en sideskabelon.
Vis komponenter, der kræver JavaScript
- Advarsler for afvisning
- Knapper til at skifte mellem tilstande og afkrydsningsfelt/radiofunktionalitet
- Karrusel til al slideadfærd, kontroller og indikatorer
- Skjul for at slå indholdets synlighed til eller fra
- Dropdowns til visning og positionering (kræver også Popper )
- Modaler til visning, positionering og rulleadfærd
- Navbar til at udvide vores Collapse-plugin til at implementere responsiv adfærd
- Offcanvaser til visning, positionering og rulleadfærd
- Skål til visning og afvisning
- Værktøjstip og popovers til visning og positionering (kræver også Popper )
- Scrollspy for rulleadfærd og navigationsopdateringer
Starter skabelon
Sørg for at have dine sider sat op med de nyeste design- og udviklingsstandarder. Det betyder at bruge en HTML5 doctype og inkludere et viewport-metatag til korrekt responsiv adfærd. Sæt det hele sammen, og dine sider skal se sådan ud:
<!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>
For de næste trin skal du besøge Layout-dokumenterne eller vores officielle eksempler for at begynde at udforme dit websteds indhold og komponenter.
Vigtige globaler
Bootstrap anvender en håndfuld vigtige globale stilarter og indstillinger, som du skal være opmærksom på, når du bruger det, som alle næsten udelukkende er rettet mod normalisering af cross browser-stile. Lad os dykke ind.
HTML5 doctype
Bootstrap kræver brug af HTML5 doctype. Uden det, vil du se noget funky ufuldstændig styling, men at inkludere det burde ikke forårsage nogen betydelige hikke.
<!doctype html>
<html lang="en">
...
</html>
Responsive metatag
Bootstrap er udviklet mobile first , en strategi, hvor vi først optimerer kode til mobile enheder og derefter skalerer komponenter op efter behov ved hjælp af CSS-medieforespørgsler. For at sikre korrekt gengivelse og berøringszoomning for alle enheder skal du tilføje det responsive viewport-metatag til din <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Du kan se et eksempel på dette i aktion i starterskabelonen .
Kassestørrelse
For mere ligetil dimensionering i CSS skifter vi den globale box-sizing
værdi fra content-box
til border-box
. Dette sikrer padding
, at det ikke påvirker den endelige beregnede bredde af et element, men det kan forårsage problemer med noget tredjepartssoftware som Google Maps og Google Custom Search Engine.
I sjældne tilfælde skal du tilsidesætte det, så brug noget i stil med følgende:
.selector-for-some-widget {
box-sizing: content-box;
}
Med ovenstående kodestykke vil indlejrede elementer – inklusive genereret indhold via ::before
og ::after
– alle arve det specificerede box-sizing
for det .selector-for-some-widget
.
Lær mere om kassemodel og størrelse på CSS Tricks .
Genstart
For at forbedre gengivelsen på tværs af browsere bruger vi Genstart til at korrigere uoverensstemmelser på tværs af browsere og enheder, mens vi giver lidt mere meningsfulde nulstillinger til almindelige HTML-elementer.
Fællesskab
Hold dig opdateret om udviklingen af Bootstrap og nå ud til fællesskabet med disse nyttige ressourcer.
- Læs og abonner på The Official Bootstrap Blog .
- Chat med andre Bootstrappers i IRC. På
irc.libera.chat
serveren, i#bootstrap
kanalen. - Implementeringshjælp kan findes på Stack Overflow (tagget
bootstrap-5
). - Udviklere bør bruge nøgleordet
bootstrap
på pakker, der ændrer eller tilføjer funktionaliteten af Bootstrap, når de distribuerer gennem npm eller lignende leveringsmekanismer for maksimal synlighed.
Du kan også følge @getbootstrap på Twitter for den seneste sladder og fantastiske musikvideoer.