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.
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.html
fil 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-sizing
värdet från content-box
till border-box
. Detta säkerställer padding
att 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 ::before
och ::after
– alla att ärva det specificerade box-sizing
fö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.chat
servern, i#bootstrap
kanalen. - Implementeringshjälp kan hittas på Stack Overflow (taggad
bootstrap-5
). - Utvecklare bör använda nyckelordet
bootstrap
på 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.