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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Mange af vores komponenter kræver brug af JavaScript for at fungere. Specifikt kræver de jQuery , Popper og vores egne JavaScript-plugins. Vi bruger jQuerys slanke build , men den fulde version er også understøttet.

Placer et af følgende <script>s nær slutningen af dine sider, lige før det afsluttende </body>tag, for at aktivere dem. jQuery skal komme først, derefter Popper og derefter vores JavaScript-plugins.

Bundt

Inkluder hvert Bootstrap JavaScript-plugin med en af vores to bundter. Både bootstrap.bundle.jsog bootstrap.bundle.min.jsinkluderer Popper til vores værktøjstip og popovers, men ikke jQuery . Inkluder først jQuery, derefter en Bootstrap JavaScript-pakke. For mere information om, hvad der er inkluderet i Bootstrap, se venligst vores indholdssektion .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Komponenter

Er du nysgerrig efter, hvilke komponenter der eksplicit kræver jQuery, vores JavaScript og Popper? Klik på linket til vis komponenter nedenfor. Hvis du er usikker på sidestrukturen, 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
Scrollspy for rulleadfærd og navigationsopdateringer
Værktøjstip og popovers til visning og positionering (kræver også Popper )

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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Det er alt, hvad du behøver til overordnede sidekrav. Besøg 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, shrink-to-fit=no">

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 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 .
Chat med andre Bootstrappers i IRC. På irc.libera.chatserveren, i #bootstrapkanalen.
Implementeringshjælp kan findes på Stack Overflow (tagget bootstrap-4).
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.

CSP'er og indlejrede SVG'er

Adskillige Bootstrap-komponenter inkluderer indlejrede SVG'er i vores CSS for at style komponenter konsekvent og nemt på tværs af browsere og enheder. For organisationer med mere strenge CSP - konfigurationer har vi dokumenteret alle forekomster af vores indlejrede SVG'er (som alle anvendes via background-image), så du mere grundigt kan gennemgå dine muligheder.

Luk-knap (bruges i advarsler og modaler)
Brugerdefinerede afkrydsningsfelter og alternativknapper
Form switche
Formularvalideringsikoner
Brugerdefinerede menuer
Karrusel kontrol
Navbar til/fra-knapper

Baseret på fællesskabssamtale inkluderer nogle muligheder for at løse dette i din egen kodebase at erstatte URL'erne med lokalt hostede aktiver, fjerne billederne og bruge indlejrede billeder (ikke muligt i alle komponenter) og ændre din CSP. Vores anbefaling er omhyggeligt at gennemgå dine egne sikkerhedspolitikker og beslutte dig for den bedste vej frem, hvis det er nødvendigt.