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.

På denne side

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.htmlfil 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-sizingværdi fra content-boxtil 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 ::beforeog ::after– alle arve det specificerede box-sizingfor 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.chatserveren, i #bootstrapkanalen.
Implementeringshjælp kan findes på Stack Overflow (tagget bootstrap-5).
Udviklere bør bruge nøgleordet bootstrappå 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.