Source

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, som tillhandahålls gratis av folket på jsDelivr. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.js och våra egna JavaScript-plugins. Placera 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.js och sedan våra JavaScript-plugins.

Vi använder jQuerys slimmade build , men den fullständiga versionen stöds också.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Nyfiken på vilka komponenter som uttryckligen kräver jQuery, vår JS och Popper.js? 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.

Vår bootstrap.bundle.jsoch bootstrap.bundle.min.jsinkluderar Popper , men inte jQuery . För mer information om vad som ingår i Bootstrap, se vårt innehållsavsnitt .

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.js )
  • Modaler för visning, positionering och rullningsbeteende
  • Navbar för att utöka vår Collapse-plugin för att implementera responsivt beteende
  • Verktygstips och popovers för visning och positionering (kräver även Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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.

  • Följ @getbootstrap på Twitter .
  • Läs och prenumerera på The Official Bootstrap Blog .
  • Chatta med andra Bootstrappers i IRC. På irc.freenode.netservern, 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.