Kom godt i gang med Bootstrap
Bootstrap er et kraftfuldt, funktionsfyldt frontend-værktøjssæt. Byg hvad som helst – fra prototype til produktion – på få minutter.
Hurtig start
Kom i gang ved at inkludere Bootstraps produktionsklare CSS og JavaScript via CDN uden behov for byggetrin. Se det i praksis med denne Bootstrap CodePen-demo .
-
Opret en ny
index.html
fil i dit projektrod. Inkluder<meta name="viewport">
tagget også for korrekt responsiv adfærd på mobilenheder.<!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>
-
Inkluder Bootstraps CSS og JS. Placer
<link>
tagget i<head>
for vores CSS og<script>
tagget for vores JavaScript-pakke (inklusive Popper til placering af dropdowns, poppers og værktøjstip) før afslutningen</body>
. Lær mere om vores 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>
Du kan også inkludere Popper og vores JS separat. Hvis du ikke planlægger at bruge dropdowns, popovers eller værktøjstip, så spar nogle kilobytes ved ikke at inkludere Popper.
<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>
-
Hej Verden! Åbn siden i din foretrukne browser for at se din Bootstrapped-side. Nu kan du begynde at bygge med Bootstrap ved at skabe dit eget layout , tilføje snesevis af komponenter og bruge vores officielle eksempler .
CDN links
Som reference er her vores primære CDN-links.
Beskrivelse | 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 |
Du kan også bruge CDN til at hente enhver af vores yderligere builds, der er angivet på siden Indhold .
Næste skridt
-
Læs lidt mere om nogle vigtige globale miljøindstillinger, som Bootstrap bruger.
-
Læs om, hvad der er inkluderet i Bootstrap i vores indholdssektion og listen over komponenter, der kræver JavaScript, nedenfor.
-
Har du brug for lidt mere strøm? Overvej at bygge med Bootstrap ved at inkludere kildefilerne via pakkehåndtering .
-
Ønsker du at bruge Bootstrap som et modul med
<script type="module">
? Se venligst vores brug af Bootstrap som et modulafsnit .
JS 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 og Offcanvas plugins til at implementere responsiv adfærd
- Navs med Tab-plugin til at skifte indholdsruder
- Offcanvaser til visning, positionering og rulleadfærd
- Scrollspy for rulleadfærd og navigationsopdateringer
- Skål til visning og afvisning
- Værktøjstip og popovers til visning og positionering (kræver også Popper )
Vigtige globaler
Bootstrap anvender en håndfuld vigtige globale stilarter og indstillinger, 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 og ufuldstændig styling.
<!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 hurtigstarten .
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 .
- Spørg og udforsk vores GitHub-diskussioner .
- 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.