Kom igång med Bootstrap

Bootstrap är en kraftfull, funktionsspäckad frontend-verktygssats. Bygg vad som helst – från prototyp till produktion – på några minuter.

På den här sidan

Snabbstart

Kom igång genom att inkludera Bootstraps produktionsklara CSS och JavaScript via CDN utan att behöva bygga några steg. Se det i praktiken med denna Bootstrap CodePen-demo .

Skapa en ny index.htmlfil i din projektrot. Inkludera <meta name="viewport">taggen också för korrekt responsivt beteende på mobila enheter.

<!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>

Inkludera Bootstraps CSS och JS. Placera <link>taggen i <head>för vår CSS och <script>taggen för vårt JavaScript-paket (inklusive Popper för att placera rullgardinsmenyn, poppers och verktygstips) före stängningen </body>. Läs mer om våra CDN-länkar .

<!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 också inkludera Popper och vår JS separat. Om du inte planerar att använda rullgardinsmenyer, popovers eller verktygstips, spara några kilobyte genom att inte inkludera 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 världen! Öppna sidan i din webbläsare för att se din Bootstrapped-sida. Nu kan du börja bygga med Bootstrap genom att skapa din egen layout , lägga till dussintals komponenter och använda våra officiella exempel .

CDN-länkar

Som referens, här är våra primära CDN-länkar.

Beskrivning	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 också använda CDN för att hämta någon av våra ytterligare builds som listas på innehållssidan .

Nästa steg

Läs lite mer om några viktiga globala miljöinställningar som Bootstrap använder.
Läs om vad som ingår i Bootstrap i vårt innehållsavsnitt och listan över komponenter som kräver JavaScript nedan.
Behöver du lite mer kraft? Överväg att bygga med Bootstrap genom att inkludera källfilerna via pakethanteraren .
Vill du använda Bootstrap som en modul med <script type="module">? Se vår användning av Bootstrap som en modulsektion .

JS komponenter

Nyfiken på vilka komponenter som uttryckligen kräver vår JavaScript och Popper? Klicka på länken visa komponenter nedan. Om du alls är osäker på den allmänna sidstrukturen, fortsätt att läsa efter ett exempel på sidmall.

Visa komponenter som kräver JavaScript

Varningar för avvisning
Knappar för att växla tillstånd och kryssruta/radiofunktioner
Karusell för alla glidbeteenden, kontroller och indikatorer
Komprimera för att växla innehållets synlighet
Dropdown-meny för visning och positionering (kräver även Popper )
Modaler för visning, positionering och rullningsbeteende
Navbar för att utöka våra Collapse- och Offcanvas-plugins för att implementera responsiva beteenden
Nav med Tab-plugin för att växla innehållsrutor
Offcanvas för visning, positionering och rullningsbeteende
Scrollspy för rullningsbeteende och navigeringsuppdateringar
Skålar för att visa och ta bort
Verktygstips och popovers för visning och positionering (kräver även Popper )

Viktiga globaler

Bootstrap använder en handfull viktiga globala stilar och inställningar, som alla nästan uteslutande är inriktade på normalisering av webbläsarstilar. Låt oss dyka in.

HTML5 doctype

Bootstrap kräver användning av HTML5 doctype. Utan det kommer du att se lite funky och ofullständig styling.

<!doctype html>
<html lang="en">
  ...
</html>

Responsiv metatagg

Bootstrap är utvecklad mobile first , en strategi där vi optimerar kod för mobila enheter först och sedan skalar upp komponenter vid behov med hjälp av CSS-mediefrågor. För att säkerställa korrekt rendering och touch-zoomning för alla enheter, lägg till den responsiva viewport-metataggen till din <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Du kan se ett exempel på detta i aktion i snabbstarten .

Lådastorlek

För enklare dimensionering i CSS byter vi det globala box-sizingvärdet från content-boxtill border-box. Detta säkerställer paddingatt det inte påverkar den slutgiltiga beräknade bredden på ett element, men det kan orsaka problem med viss programvara från tredje part som Google Maps och Google Custom Search Engine.

I de sällsynta fall du behöver åsidosätta det, använd något i stil med följande:

.selector-for-some-widget {
  box-sizing: content-box;
}

Med ovanstående kodavsnitt kommer kapslade element – inklusive genererat innehåll via ::beforeoch ::after– alla att ärva det specificerade box-sizingför det .selector-for-some-widget.

Lär dig mer om lådmodell och storlek på CSS Tricks .

Starta om

För förbättrad rendering över flera webbläsare använder vi Reboot för att korrigera inkonsekvenser mellan webbläsare och enheter samtidigt som vi ger lite mer egensinniga återställningar till vanliga HTML-element.

gemenskap

Håll dig uppdaterad om utvecklingen av Bootstrap och nå ut till samhället med dessa användbara resurser.

Läs och prenumerera på The Official Bootstrap Blog .
Fråga och utforska våra GitHub-diskussioner .
Chatta med andra Bootstrappers i IRC. På irc.libera.chatservern, i #bootstrapkanalen.
Implementeringshjälp kan hittas på Stack Overflow (taggad bootstrap-5).
Utvecklare bör använda nyckelordet bootstrappå paket som modifierar eller lägger till funktionaliteten i Bootstrap när de distribuerar genom npm eller liknande leveransmekanismer för maximal upptäckbarhet.

Du kan också följa @getbootstrap på Twitter för det senaste skvallret och fantastiska musikvideor.