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.

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

JS

Många av våra komponenter kräver användning av JavaScript för att fungera. Specifikt kräver de jQuery , Popper och våra egna JavaScript-plugins. Vi använder jQuerys slimmade build , men den fullständiga versionen stöds också.

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. jQuery måste komma först, sedan Popper och sedan våra JavaScript-plugins.

Bunt

Inkludera varje Bootstrap JavaScript-plugin med en av våra två paket. Både bootstrap.bundle.jsoch bootstrap.bundle.min.jsinkluderar Popper för våra verktygstips och popovers, men inte jQuery . Inkludera först jQuery, sedan ett Bootstrap JavaScript-paket. 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/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>

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/[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

Nyfiken på vilka komponenter som uttryckligen kräver jQuery, vår JavaScript och Popper? Klicka på länken visa komponenter nedan. Om du är osäker på 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
Scrollspy för rullningsbeteende och navigeringsuppdateringar
Verktygstips och popovers för visning och positionering (kräver även Popper )

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, 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 är allt du behöver för övergripande sidkrav. Besök layoutdokumenten eller våra officiella exempel för att börja lägga upp 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, shrink-to-fit=no">

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-4).
Utvecklare bör använda nyckelordet bootstrappå paket som modifierar eller lägger till funktionaliteten i Bootstrap när de distribuerar via 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.

CSP:er och inbäddade SVG:er

Flera Bootstrap-komponenter inkluderar inbäddade SVG:er i vår CSS för att utforma komponenter konsekvent och enkelt över webbläsare och enheter. För organisationer med mer strikta CSP- konfigurationer har vi dokumenterat alla instanser av våra inbäddade SVG:er (som alla tillämpas via background-image) så att du kan granska dina alternativ mer noggrant.

Stäng-knapp (används i varningar och modaler)
Anpassade kryssrutor och alternativknappar
Form växlar
Form validering ikoner
Anpassade menyer
Karusellkontroller
Navbar växlingsknappar

Baserat på gemenskapskonversation inkluderar några alternativ för att ta itu med detta i din egen kodbas att ersätta webbadresserna med lokalt värdbaserade tillgångar, ta bort bilderna och använda inline-bilder (inte möjligt i alla komponenter) och modifiera din CSP. Vår rekommendation är att noggrant granska din egen säkerhetspolicy och besluta om den bästa vägen framåt, om det behövs.