Introduktion

Kom godt i gang med Bootstrap, verdens mest populære framework til at bygge responsive, mobile-first sites, med jsDelivr og en skabelonstartside.

På denne side

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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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 i en af vores to bundter. Både bootstrap.bundle.jsog bootstrap.bundle.min.jsinkluderer 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 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
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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 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 ned.

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-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 de sjældne tilfælde skal du tilsidesætte det, 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 .
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.