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.

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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

JS

Mange av komponentene våre krever bruk av JavaScript for å fungere. Spesielt krever de jQuery , Popper.js 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.js, og deretter JavaScript-pluginene våre.

Bunt

Inkluder alt du trenger i ett skript med pakken vår. Vår bootstrap.bundle.jsog bootstrap.bundle.min.jsinkluderer Popper , men ikke jQuery . For mer informasjon om hva som er inkludert i Bootstrap, se innholdsdelen vår .

<script src="https://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Skille

Hvis du bestemmer deg for å gå med den separate skriptløsningen, må Popper.js komme først, og deretter JavaScript-pluginene våre.

<script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

Komponenter

Lurer du på hvilke komponenter som eksplisitt krever jQuery, vår JS og Popper.js? 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.js )
  • Modaler for visning, posisjonering og rulleadferd
  • Navbar for å utvide vår Collapse-plugin for å implementere responsiv atferd
  • Skåler for visning og avvisning
  • Verktøytips og popovers for visning og plassering (krever også Popper.js )
  • 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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 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://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 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.

  • Følg @getbootstrap på Twitter .
  • Les og abonner på The Official Bootstrap Blog .
  • Chat med andre Bootstrappere i IRC. På irc.freenode.netserveren, 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.