Hoppa till huvudinnehållet Hoppa till dokumentnavigering
in English

Introduktion

Kom igång med Bootstrap, världens mest populära ramverk för att bygga responsiva, mobila första webbplatser, med jsDelivr och en mallstartsida.

På den här sidan

Snabbstart

Vill du snabbt lägga till Bootstrap i ditt projekt? Använd jsDelivr, ett gratis CDN med öppen källkod. Använder du en pakethanterare eller behöver du ladda ner källfilerna? Gå till nedladdningssidan .

CSS

Kopiera-klistra in stilmallen <link>i din <head>före alla andra stilmallar för att ladda vår CSS.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

Många av våra komponenter kräver användning av JavaScript för att fungera. Specifikt kräver de våra egna JavaScript-plugins och Popper . Placera en av följande <script>s nära slutet av dina sidor, precis före den avslutande </body>taggen, för att aktivera dem.

Bunt

Inkludera alla Bootstrap JavaScript-plugin och beroenden med en av våra två paket. Både bootstrap.bundle.jsoch bootstrap.bundle.min.jsinkluderar Popper för våra verktygstips och popovers. För mer information om vad som ingår i Bootstrap, se vårt innehållsavsnitt .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Separat

Om du bestämmer dig för att välja den separata skriptlösningen måste Popper komma först (om du använder verktygstips eller popovers), och sedan våra 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

Om du använder <script type="module">, se vår användning av Bootstrap som en modulsektion .

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år Collapse-plugin för att implementera responsivt beteende
  • Skålar för att visa och ta bort
  • Verktygstips och popovers för visning och positionering (kräver även Popper )
  • Scrollspy för rullningsbeteende och navigeringsuppdateringar

Förrättsmall

Se till att ha dina sidor konfigurerade med de senaste design- och utvecklingsstandarderna. Det innebär att du använder en HTML5 doctype och inkluderar en viewport-metatagg för korrekt responsivt beteende. Lägg ihop allt och dina sidor ska se ut så här:

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

För nästa steg, besök Layoutdokumenten eller våra officiella exempel för att börja lägga ut din webbplats innehåll och komponenter.

Viktiga globaler

Bootstrap använder en handfull viktiga globala stilar och inställningar som du måste vara medveten om när du använder den, som alla nästan uteslutande är inriktade på normalisering av stilar för flera webbläsare. Låt oss dyka in.

HTML5 doctype

Bootstrap kräver användning av HTML5 doctype. Utan det kommer du att se lite funky ofullständig styling, men att inkludera det borde inte orsaka några betydande hicka.

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

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 .
  • 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.