Source

Introduktion

Kom godt i gang med Bootstrap, verdens mest populære framework til at bygge responsive, mobile-first sites, med jsDelivr og en skabelonstartside.

Hurtig start

Ønsker du hurtigt at tilføje Bootstrap til dit projekt? Brug jsDelivr, leveret gratis af folkene på jsDelivr. Bruger du en pakkehåndtering eller har du brug for at downloade kildefilerne? Gå til downloadsiden.

CSS

Kopier-indsæt stilarket <link>i dit <head>før alle andre stylesheets for at indlæse vores CSS.

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

JS

Mange af vores komponenter kræver brug af JavaScript for at fungere. Specifikt kræver de jQuery , Popper.js og vores egne JavaScript-plugins. Placer følgende <script>s nær slutningen af ​​dine sider, lige før det afsluttende </body>tag, for at aktivere dem. jQuery skal komme først, derefter Popper.js og derefter vores JavaScript-plugins.

Vi bruger jQuerys slanke build , men den fulde version er også understøttet.

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

Er du nysgerrig efter, hvilke komponenter der eksplicit kræver jQuery, vores JS og Popper.js? Klik på linket til vis komponenter nedenfor. Hvis du overhovedet er usikker på den generelle sidestruktur, skal du fortsætte med at læse efter et eksempel på en sideskabelon.

Vores bootstrap.bundle.jsog bootstrap.bundle.min.jsinkluderer Popper , men ikke jQuery . For mere information om, hvad der er inkluderet i Bootstrap, se venligst vores indholdssektion .

Vis komponenter, der kræver JavaScript
  • Advarsler for afvisning
  • Knapper til at skifte mellem tilstande og afkrydsningsfelt/radiofunktionalitet
  • Karrusel til al slideadfærd, kontroller og indikatorer
  • Skjul for at slå indholdets synlighed til eller fra
  • Dropdowns til visning og positionering (kræver også Popper.js )
  • Modaler til visning, positionering og rulleadfærd
  • Navbar til at udvide vores Collapse-plugin til at implementere responsiv adfærd
  • Værktøjstip og popovers til visning og positionering (kræver også Popper.js )
  • Scrollspy for rulleadfærd og navigationsopdateringer

Starter skabelon

Sørg for at have dine sider sat op med de nyeste design- og udviklingsstandarder. Det betyder at bruge en HTML5 doctype og inkludere et viewport-metatag til korrekt responsiv adfærd. Sæt det hele sammen, og dine sider skal se sådan ud:

<!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, hvad du behøver til overordnede sidekrav. Besøg Layout-dokumenterne eller vores officielle eksempler for at begynde at udforme dit websteds indhold og komponenter.

Vigtige globaler

Bootstrap anvender en håndfuld vigtige globale stilarter og indstillinger, som du skal være opmærksom på, når du bruger det, som alle næsten udelukkende er rettet mod normalisering af cross browser-stile. Lad os dykke ind.

HTML5 doctype

Bootstrap kræver brug af HTML5 doctype. Uden det, vil du se noget funky ufuldstændig styling, men at inkludere det burde ikke forårsage nogen betydelige hikke.

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

Responsive metatag

Bootstrap er udviklet mobile first , en strategi, hvor vi først optimerer kode til mobile enheder og derefter skalerer komponenter op efter behov ved hjælp af CSS-medieforespørgsler. For at sikre korrekt gengivelse og berøringszoomning for alle enheder skal du tilføje det responsive viewport-metatag til din <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Du kan se et eksempel på dette i aktion i starterskabelonen .

Kassestørrelse

For mere ligetil dimensionering i CSS skifter vi den globale box-sizingværdi fra content-boxtil border-box. Dette sikrer padding, at det ikke påvirker den endelige beregnede bredde af et element, men det kan forårsage problemer med noget tredjepartssoftware som Google Maps og Google Custom Search Engine.

I sjældne tilfælde skal du tilsidesætte det, så brug noget i stil med følgende:

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

Med ovenstående kodestykke vil indlejrede elementer – inklusive genereret indhold via ::beforeog ::after– alle arve det specificerede box-sizingfor det .selector-for-some-widget.

Lær mere om kassemodel og størrelse på CSS Tricks .

Genstart

For at forbedre gengivelsen på tværs af browsere bruger vi Genstart til at korrigere uoverensstemmelser på tværs af browsere og enheder, mens vi giver lidt mere meningsfulde nulstillinger til almindelige HTML-elementer.

Fællesskab

Hold dig opdateret om udviklingen af ​​Bootstrap og nå ud til fællesskabet med disse nyttige ressourcer.

  • Følg @getbootstrap på Twitter .
  • Læs og abonner på The Official Bootstrap Blog .
  • Chat med andre Bootstrappers i IRC. På irc.freenode.netserveren, i ##bootstrapkanalen.
  • Implementeringshjælp kan findes på Stack Overflow (tagget bootstrap-4).
  • Udviklere bør bruge nøgleordet bootstrappå pakker, der ændrer eller tilføjer funktionaliteten af ​​Bootstrap, når de distribuerer gennem npm eller lignende leveringsmekanismer for maksimal synlighed.

Du kan også følge @getbootstrap på Twitter for den seneste sladder og fantastiske musikvideoer.