Gå til hovedinnhold Hopp til dokumentnavigering
in English

Introduksjon

Kom i gang med Bootstrap, verdens mest populære rammeverk for å bygge responsive, mobil-første nettsteder, med jsDelivr og en mal startside.

På denne siden

Kjapp start

Ønsker du raskt å legge til Bootstrap i prosjektet ditt? Bruk jsDelivr, et gratis CDN med åpen kildekode. Bruker du en pakkebehandling eller trenger du å laste ned kildefilene? Gå til nedlastingssiden .

CSS

Kopier og lim inn stilarket <link>i ditt <head>før alle andre stilark for å laste CSS-en vår.

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

JS

Mange av komponentene våre krever bruk av JavaScript for å fungere. Spesielt krever de våre egne JavaScript-plugins og Popper . Plasser en av følgende <script>s nær slutten av sidene dine, rett før den avsluttende </body>taggen, for å aktivere dem.

Bunt

Inkluder hver Bootstrap JavaScript-plugin og avhengighet med en av våre to bunter. Både bootstrap.bundle.jsog bootstrap.bundle.min.jsinkluderer Popper for våre verktøytips og popovers. For mer informasjon om hva som er inkludert i Bootstrap, se innholdsdelen vår .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Skille

Hvis du bestemmer deg for å gå med den separate skriptløsningen, må Popper komme først (hvis du bruker verktøytips eller popovers), og deretter JavaScript-pluginene våre.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Moduler

Hvis du bruker <script type="module">, vennligst se vår bruk av Bootstrap som en modulseksjon .

Komponenter

Lurer du på hvilke komponenter som eksplisitt krever JavaScript og Popper? Klikk på lenken til Vis komponenter nedenfor. Hvis du i det hele tatt er usikker på den generelle sidestrukturen, fortsett å lese for en eksempelsidemal.

Vis komponenter som krever JavaScript
  • Varsler for avvisning
  • Knapper for å veksle mellom tilstander og avkrysningsboks/radiofunksjonalitet
  • Karusell for all lysbildeatferd, kontroller og indikatorer
  • Skjul for å veksle mellom synlighet av innhold
  • Rullegardiner for visning og posisjonering (krever også Popper )
  • Modaler for visning, posisjonering og rulleadferd
  • Navbar for å utvide vår Collapse-plugin for å implementere responsiv atferd
  • Offcanvaser for visning, posisjonering og rulleadferd
  • Skåler for visning og avvisning
  • Verktøytips og popovers for visning og plassering (krever også Popper )
  • Scrollspy for rulleadferd og navigasjonsoppdateringer

Startmal

Sørg for å ha sidene dine satt opp med de nyeste design- og utviklingsstandardene. Det betyr å bruke en HTML5 doctype og inkludere en viewport-metatag for riktig responsiv atferd. Sett alt sammen og sidene dine skal se slik ut:

<!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-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

For neste trinn, besøk Layout-dokumentene eller de offisielle eksemplene våre for å begynne å legge ut nettstedets innhold og komponenter.

Viktige globaler

Bootstrap bruker en håndfull viktige globale stiler og innstillinger som du må være klar over når du bruker den, som alle nesten utelukkende er rettet mot normalisering av stiler på tvers av nettlesere. La oss dykke inn.

HTML5 doctype

Bootstrap krever bruk av HTML5 doctype. Uten det, vil du se litt funky ufullstendig styling, men inkludert det burde ikke forårsake noen betydelige hikke.

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

Responsiv metatag

Bootstrap er utviklet mobile first , en strategi der vi optimaliserer kode for mobile enheter først og deretter skalerer opp komponenter etter behov ved å bruke CSS-mediespørringer. For å sikre riktig gjengivelse og berøringszooming for alle enheter, legg til den responsive viewport-metakoden til <head>.

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

Du kan se et eksempel på dette i aksjon i startmalen .

Boksstørrelse

For mer enkel størrelse i CSS bytter vi den globale box-sizingverdien fra content-boxtil border-box. Dette sikrer at paddingdet ikke påvirker den endelige beregnede bredden til et element, men det kan forårsake problemer med noen tredjepartsprogramvare som Google Maps og Google Custom Search Engine.

En sjelden gang du trenger å overstyre den, bruk noe slikt som følgende:

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

Med kodebiten ovenfor vil nestede elementer – inkludert generert innhold via ::beforeog ::after– alle arve det spesifiserte box-sizingfor det .selector-for-some-widget.

Lær mer om boksmodell og størrelse på CSS Tricks .

Start på nytt

For forbedret gjengivelse på tvers av nettlesere bruker vi Reboot for å korrigere inkonsekvenser på tvers av nettlesere og enheter, samtidig som vi gir litt mer meningsfulle tilbakestillinger til vanlige HTML-elementer.

Samfunnet

Hold deg oppdatert på utviklingen av Bootstrap og nå ut til fellesskapet med disse nyttige ressursene.

  • Les og abonner på The Official Bootstrap Blog .
  • Chat med andre Bootstrappere i IRC. På irc.libera.chatserveren, i #bootstrapkanalen.
  • Implementeringshjelp kan finnes på Stack Overflow (tagget bootstrap-5).
  • Utviklere bør bruke nøkkelordet bootstrappå pakker som endrer eller legger til funksjonaliteten til Bootstrap når de distribuerer gjennom npm eller lignende leveringsmekanismer for maksimal oppdagbarhet.

Du kan også følge @getbootstrap på Twitter for siste sladder og fantastiske musikkvideoer.