Introduksjon

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

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

JS

Mange av komponentene våre krever bruk av JavaScript for å fungere. Spesielt krever de jQuery , Popper og våre egne JavaScript-plugins. Vi bruker jQuerys slanke bygg , men fullversjonen støttes også.

Plasser en av følgende <script>s nær slutten av sidene dine, rett før den avsluttende </body>taggen, for å aktivere dem. jQuery må komme først, deretter Popper, og deretter JavaScript-pluginene våre.

Bunt

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

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

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

Lurer du på hvilke komponenter som eksplisitt krever jQuery, JavaScript og Popper? Klikk på lenken til Vis komponenter nedenfor. Hvis du er usikker på sidestrukturen, fortsett å lese for et eksempel på sidemal.

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
Scrollspy for rulleadferd og navigasjonsoppdateringer
Verktøytips og popovers for visning og plassering (krever også Popper )

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, 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 er alt du trenger for generelle sidekrav. Besøk Layout-dokumentene eller våre offisielle eksempler 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, shrink-to-fit=no">

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 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-4).
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.

CSP-er og innebygde SVG-er

Flere Bootstrap-komponenter inkluderer innebygde SVG-er i vår CSS for å style komponenter konsekvent og enkelt på tvers av nettlesere og enheter. For organisasjoner med strengere CSP - konfigurasjoner har vi dokumentert alle forekomster av våre innebygde SVG-er (som alle brukes via background-image) slik at du kan gå grundigere gjennom alternativene dine.

Lukk-knapp (brukes i varsler og modaler)
Egendefinerte avmerkingsbokser og alternativknapper
Skjemabrytere
Skjemavalideringsikoner
Egendefinerte menyer
Karusellkontroller
Navbar veksleknapper

Basert på fellesskapssamtale inkluderer noen alternativer for å adressere dette i din egen kodebase å erstatte URL-ene med lokalt vertsbaserte ressurser, fjerne bildene og bruke innebygde bilder (ikke mulig i alle komponenter) og endre CSP-en. Vår anbefaling er å nøye gjennomgå dine egne sikkerhetspolicyer og bestemme den beste veien videre, om nødvendig.