Kom i gang med Bootstrap

Bootstrap er et kraftig, funksjonsfylt frontend-verktøysett. Bygg hva som helst – fra prototype til produksjon – på få minutter.

På denne siden

Kjapp start

Kom i gang ved å inkludere Bootstraps produksjonsklare CSS og JavaScript via CDN uten behov for byggetrinn. Se det i praksis med denne Bootstrap CodePen-demoen .

Opprett en ny index.htmlfil i prosjektroten din. Inkluder <meta name="viewport">taggen også for korrekt responsiv oppførsel på mobile 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>

Inkluder Bootstraps CSS og JS. Plasser <link>taggen i <head>CSS-en vår, og <script>taggen for JavaScript-pakken vår (inkludert Popper for posisjonering av rullegardinmenyene, poppers og verktøytips) før avslutningen </body>. Lær mer om våre CDN-koblinger .

<!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 også inkludere Popper og vår JS separat. Hvis du ikke planlegger å bruke rullegardinmenyene, popovers eller verktøytips, spar noen kilobyte ved å ikke inkludere 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>

Hei Verden! Åpne siden i din valgte nettleser for å se Bootstrapped-siden din. Nå kan du begynne å bygge med Bootstrap ved å lage din egen layout , legge til dusinvis av komponenter og bruke våre offisielle eksempler .

CDN-koblinger

Som referanse, her er våre primære CDN-koblinger.

Beskrivelse	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 også bruke CDN for å hente noen av våre tilleggsbygg som er oppført på innholdssiden .

Neste skritt

Les litt mer om noen viktige globale miljøinnstillinger som Bootstrap bruker.
Les om hva som er inkludert i Bootstrap i innholdsdelen vår og listen over komponenter som krever JavaScript nedenfor.
Trenger du litt mer kraft? Vurder å bygge med Bootstrap ved å inkludere kildefilene via pakkebehandling .
Ønsker du å bruke Bootstrap som en modul med <script type="module">? Vennligst se vår bruk av Bootstrap som en modulseksjon .

JS 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åre Collapse- og Offcanvas-plugins for å implementere responsiv atferd
Navs med Tab-plugin for å veksle mellom innholdsruter
Offcanvaser for visning, posisjonering og rulleadferd
Scrollspy for rulleadferd og navigasjonsoppdateringer
Skåler for visning og avvisning
Verktøytips og popovers for visning og plassering (krever også Popper )

Viktige globaler

Bootstrap bruker en håndfull viktige globale stiler og innstillinger, 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 den vil du se litt funky og ufullstendig styling.

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

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 .
Spør og utforsk GitHub-diskusjonene våre .
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.