Source

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, levert gratis av folkene på jsDelivr. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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. Plasser 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.

Vi bruker jQuerys slanke bygg , men fullversjonen støttes også.

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

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

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 .

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
  • 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-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 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 i <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 det, 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 Bootstrappers 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.