Download

Bootstrap (v3.3.0) har et par nemme måder til hurtigt at få startet, hver en appel til et andet niveau og brug. Læs igennem for at se hvad der passer til dine særlige behov.

Bootstrap CDN

The folks over at MaxCDN graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these Bootstrap CDN links.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Installer med Bower

Install and manage Bootstrap's Less, CSS, JavaScript, and fonts using Bower.

$ bower install bootstrap

Hvad er inkluderet

Bootstrap kan downloades i to formater, hvor du kan finde følgende biblioteker og filer, logisk gruppering fælles ressourcer og giver både samlet og minified variationer.

Prækompilerede bootstrap

Når du er færdig med at downloade, udpakke den komprimerede mappe for at se strukturen af (den kompilerede) bootstrap. Vil du se noget som dette:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

Dette er den mest grundlæggende form bootstrap: prækompilerede filer til quick drop-i brug i næsten enhver web-projekt. Vi har kompileret CSS og JS (bootstrap.*, såvel som udarbejdes og minified CSS og JS (bootstrap.min.*. Skrifttyper fra Glyphicons medtages, som er valgfri bootstrap-tema.

Bootstrap kildekode

En bootstrap-kildekode download omfatter den prækompileret CSS, JavaScript, og font aktiver sammen med source mindre, JavaScript og dokumentation. Mere specifikt omfatter følgende:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/, js/ og fonts/ er kildekoden til vores CSS, JS, og ikonet skrifttyper (henholdsvis). dist/ Mappe indeholder alt i prækompilerede download afsnit ovenfor. docs/ Mappe indeholder kildekoden til vores dokumentation og examples/ af bootstrap-brug. Ud over, at alle andre inkluderede fil giver støtte til pakker, licens oplysninger, og udvikling.

Kompilering af CSS og JavaScript

Bootstrap uses Grunt for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.

Installation af Grunt

For at installere grynt, skal du først download og installer node.js (som omfatter npm). npm står for node emballeret moduler og er en måde at styre udviklingen afhængigheder gennem node.js.

1. Installer grunt-cli globalt med npm install -g grunt-cli.
2. Gå til roden /bootstrap/ mappe, derefter køre npm install. npm vil se på package.json og filen automatisk installere den nødvendige lokale afhængigheder er nævnt der.

Når du er færdig, kan du køre de forskellige grynt kommandoer fra kommandolinjen.

Tilgængelige Grunt kommandoer

grunt dist (Kompilér CSS og JavaScript)

Regenererer /dist/ bibliotek med kompileret og minified CSS og JavaScript filer. En bootstrap-bruger, er det normalt den kommando, du ønsker.

grunt watch (se)

Ure med mindre kildefiler og automatisk genkompilerer programmer til CSS hver gang du gemmer en ændring.

grunt test (Kør tests)

Kører JSHint og kører QUnit tester headlessly i PhantomJS.

grunt docs (Build & test the docs assets)

Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via jekyll serve.

grunt (Bygger absolut alt og kører tests)

Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Requires Jekyll. Usually only necessary if you're hacking on Bootstrap itself.

Fejlfinding

Hvis du oplever problemer med installation af afhængigheder eller kører grynt kommandoer, først slette /node_modules/ mappe oprettes af npm. Derefter køre npm install.

Basis skabelon

Start with this basic HTML template, or modify these examples. We hope you'll customize our templates and examples, adapting them to suit your needs.

Kopier HTML nedenfor for at begynde at arbejde med en minimal bootstrap-dokument.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Eksempler

Bygger på en grundlæggende skabelon ovenfor med bootstrap's mange komponenter. Vi opfordrer dig til at tilpasse og tilpasse bootstrap efter dine individuelle projektets behov.

Ved hjælp af ramme

Starter skabeloner

Men det grundlæggende: udarbejdet CSS og JavaScript sammen med en container.

Bootstrap tema

Indlæs den valgfri bootstrap-tema til et visuelt forbedrede oplevelse.

Gitre

Flere eksempler på grid layout med alle fire niveauer, opsamling, og mere.

Jumbotron

Bygge omkring jumbotron med navbar - og nogle grundlæggende grid kolonner.

Smalle jumbotron

Opbyg en mere brugerdefineret side ved at begrænse standard container og jumbotron.

Navbars i aktion

Navbar

Super grundlæggende skabelon, der indeholder den navbar - sammen med ekstra indhold.

Statisk top navbar

Super grundlæggende skabelon med en statisk top navbar - sammen med ekstra indhold.

Navbar - fast

Super grundlæggende skabelon med en fast top navbar - sammen med ekstra indhold.

Brugerdefinerede komponenter

Dæksel

En enkelt side skabelon for bygning enkle og smukke hjemmesider.

Karrusel

Tilpas navbar - og karrusel, og derefter tilføje nogle nye komponenter.

Blog

Enkelt to-kolonne blog layout med brugerdefinerede navigation, hoved, og type.

Kontrolpanel

Grundlæggende struktur for en admin instrumentbræt med fast sidebar og navbar.

Login-side

Brugerdefineret form layout og design til et enkelt tegn i form.

Begrundede nav

Opret en brugerdefineret navbar - med berettiget links. Heads up! Ikke for Safari.

Sticky sidefod

Fastgør en footer til nederst i visningen når indholdet er kortere end det.

Sticky sidefod med navbar

Fastgør en footer til nederst i visningen med en fast navbar - øverst.

Eksperimenter

Ikke-responsive bootstrap

Let deaktivere reaktionsevne bootstrap per vores docs.

Offcanvas

Opbyg en toggleable off-lærred navigationsmenuen til brug med bootstrap.

Værktøj

Bootlint

Bootlint is the official Bootstrap HTML linter tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.

Fællesskab

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

• Læse og abonnere på Den officielle bootstrap-Blog.
• Chat med ligesindede Bootstrappers bruger IRC i irc.freenode.net server ##twitter-bootstrap-kanal.
• Hjælp til brug af bootstrap, bede om StackOverflow ved hjælp af tag twitter-bootstrap-3.
• Se inspirerende eksempler på mennesker med bootstrap på bootstrap Expo.

Du kan også følge @twbootstrap på Twitter for den seneste sladder og fantastisk musik videoer.

Deaktivering af følsomhed

Bootstrap automatically adapts your pages for various screen sizes. Here's how to disable this feature so your page works like in this non-responsive example.

Fremgangsmåde for at deaktivere side reaktionstid

1. Udelader viewport <meta> i CSS docs
2. Tilsidesættelse af width .container for hvert grid tier med en enkelt bredde, f. eks. width: 970px !important; skal du sørge for, at dette kommer efter standard bootstrap CSS. Alternativt kan du undgå !important med media forespørgsler eller nogle selector-fu.
3. Hvis du bruger navbars, fjern alle navbar - kollaps og ekspanderende adfærd.
4. For grid layout, brug .col-xs-* klasser som supplement til eller i stedet for den mellemstore/store. Bare rolig, den ekstra lille enhed grid skalaer til alle opløsninger.

You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed). This disables the "mobile site" aspects of Bootstrap.

Bootstrap-skabelon med lydhørhed deaktiveret

Vi har anvendt disse trin til et eksempel. Læs kildekoden for at se de specifikke ændringer gennemført.

Se ikke-responsive eksempel

Browser- og enhedsunderstøttelse

Bootstrap er bygget til at fungere bedst i de seneste stationære og mobile browsere, jf. ældre browsere kan vise forskelligt indrettet, men fuldt funktionelle, oversættelser af visse komponenter.

Understøttede browsere

Specielt vil vi støtte de seneste udgaver til følgende browsere og platforme. På Windows, vi understøtter Internet Explorer med 8-11. Mere specifikke oplysninger er anfoert nedenfor.

Uofficielt bootstrap ser ud og opfører sig godt nok i krom og krom til Linux, Firefox til Linux, og Internet Explorer 7, selvom de ikke er officielt understøttet.

For en liste over nogle af de browser insekter at opstarte har at forholde os til, se vores mur af browser bugs.

Internet Explorer 8 og 9

Internet Explorer 8 og 9 understøttes også, men vær opmærksom på, at nogle CSS3 egenskaber og HTML5 elementer ikke er fuldt understøttet af disse browsere. Derudover Internet Explorer 8 kræver brug af Respond.js til at aktivere media søg støtte.

Besøg Kan jeg bruge ... for oplysninger om browser understøttelse af CSS3 og HTML5 funktioner.

Internet Explorer 8 og Respond.js

Vær opmærksom på følgende begrænsninger ved brug af Respond.js i din udvikling og produktion miljøer for Internet Explorer 8.

Respond.js og cross-domain CSS

Brug Respond.js med CSS hosted på en anden (sub)domæne (f. eks. en CDN) kræver nogle ekstra opsætning. Se svaret.js docs for detaljer.

Respond.js og file://

Due to browser security rules, Respond.js doesn't work with pages viewed via the file:// protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). See the Respond.js docs for details.

Respond.js og @import

Respond.js doesn't work with CSS that's referenced via @import. In particular, some Drupal configurations are known to use @import. See the Respond.js docs for details.

Internet Explorer 8 og boks-skalering

IE8 ikke fuldt ud støtte box-sizing: border-box; når kombineret med min-width, max-width min-height, eller max-height. Derfor - og af v3.0.1, vi ikke længere bruge max-width i .containers.

Internet Explorer 8 og @font-face

IE8 har nogle problemer med @font-face når det kombineres med :before. Bootstrap bruger den kombination med sin Glyphicons. Hvis en side er cachen, og indlæst uden vinduet med musen (f. eks. hit knappen opdater eller indlæse noget i en iframe) så siden bliver gengivet før font belastninger. Svævende over den side (krop) viser nogle af de ikoner og svæver over de resterende ikoner viser dem. Se sag # 13863 for detaljer.

IE Kompatibilitetstilstande

Bootstrap understøttes ikke i den gamle Internet Explorer kompatibilitet tilstande. For at være sikker på, at du bruger den nyeste rendering mode til IE, overveje at medtage de relevante <meta> tag på dine sider:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Confirm the document mode by opening the debugging tools: press F12 and check the "Document Mode".

Denne kode er inkluderet i alle bootstrap's dokumentation og eksempler for at sikre den bedst mulige gengivelse i alle understøttede versioner af Internet Explorer.

Se denne StackOverflow spørgsmål for at få flere oplysninger.

Internet Explorer 10 i Windows 8 og Windows Phone 8

Internet Explorer 10 ikke skelne enhed bredde viewport bredde, og dermed ikke korrekt anvendelse af medier forespørgsler i bootstrap's CSS. Normalt skal du bare tilføje et hurtigt udsnit af CSS til at ordne dette:

@-ms-viewport       { width: device-width; }

However, this doesn't work for devices running Windows Phone 8 versions older than Update 3 (a.k.a. GDR3), as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to include the following CSS and JavaScript to work around the bug.

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

For yderligere oplysninger og retningslinjer for anvendelse, læse Windows Phone 8 og Device-Width.

Som en heads up, inkluderer vi dette i alle bootstrap's dokumentation og eksempler som en demonstration.

Safari procent afrunding

Det rendering engine versioner af Safari før v7.1 til OS X og Safari til iOS v8.0 havde nogle problemer med det antal decimalpladser, der skal bruges i vores .col-*-1 grid klasser. Så hvis du havde 12 individuelle grid kolonner, vil du opdage, at de kom til kort i forhold til andre rækker af kolonner. Udover opgradering Safari/iOS, har du en række muligheder for omgåelser:

• Tilføj .pull-right til din sidste grid kolonne til at få den hårde højre justering
• Finjustere dine procenter manuelt for at få den perfekte afrunding på Safari (vanskeligere end den første indstilling)

Vi vil holde øje med det og opdatere vores kode, hvis vi har en nem løsning.

Modals, navbars og virtuelle tastaturer

Overløb og rulning

Støtte til overflow: hidden på <body> element er ret begrænset i iOS og Android. Med henblik herpå, når du ruller forbi toppen eller bunden af en modal i nogen af disse enheder" browsere <body> indhold vil begynde at rulle.

Virtuelt tastatur

Also, note that if you're using a fixed navbar or using inputs within a modal, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to position: absolute or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.

Navbar - Afrejsested

.dropdown-backdrop Element er ikke anvendt på iOS i nav, fordi kompleksiteten af z-indeksering. Således, at lukke afrejsested i navbars skal du direkte klik på rullelisten element (eller ethvert andet element, som vil skyde et klik i iOS).

Browser zoom

Side zoom uundgåeligt præsenterer rendering artefakter i nogle komponenter, både i bootstrap og resten af internettet. Afhængigt af det emne, vi kan ordne det (søg først og derefter åbne spørgsmål om nødvendigt). Men vi er tilbøjelige til at ignorere disse som de ofte ikke har direkte løsning end hacky omgåelser.

Printer viewporte

Even in some modern browsers, printing can be quirky. In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. See #12078 for some details. Suggested workarounds:

• Nyd den ekstra lille gitter og sørg for, at din side ser acceptabelt under den.
• Tilpas værdierne @screen-* Mindre variabler så din printer papir anses for større end ekstra lille.
• Tilføj brugerdefinerede medier forespørgsler for at ændre rasterbredde brudpunkter til trykte medier kun.

Android lager browser

Ud af boksen, Android 4.1 (og endda nogle nyere udgivelser tilsyneladende) skib med browseren app som standard web browser valg (i modsætning til krom). Desværre er den Browser app har masser af insekter og uoverensstemmelser med CSS generelt.

Vælg menuer

På <select> elementer, Android-lager vil browseren ikke vise side kontrollerer, om der er en border-radius og/eller border anvendes. (Se )denne StackOverflow spørgsmålfor detaljer.) Brug udsnit af nedenstående kode for at fjerne stødende CSS og render som en unstyled element på Android lager browser. Brugeragenten sniffer undgår interferens med Chrome, Safari og Mozilla browsere.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Vil du se et eksempel? Tjek denne JS Bin demo.

Validators

In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.

Disse validering advarsler ikke i praksis, da den ikke-hacky del af vores CSS ikke helt validerer og hacky dele ikke forstyrre den korrekte funktion af ikke-hacky del, og hvorfor vi bevidst at ignorere disse særlige advarsler.

Vores HTML-dokumenter har ligeledes nogle ligegyldige og inkonsekvent HTML validering advarsler på grund af vores optagelse af X-UA-kompatibel <meta> tags for at undgå problemer med Internet Explorer og vores optagelse af en omgåelse af en Firefox bug.

Tredjeparts-support

Mens vi ikke officielt understøtter tredjeparts plug-ins eller tilføjelsesprogrammer, vi har nogle gode råd til at undgå potentielle problemer i dine projekter.

Box-skalering

Nogle tredjeparts software, herunder Google Maps og Google Custom Search Engine, konflikt med bootstrap pga. * { box-sizing: border-box; }, en regel, som gør det så padding påvirker ikke den endelige beregnet bredde af et element. Få mere at vide om box model og størrelse på CSS-Tricks.

Alt afhængig af den sammenhæng, kan du tilsidesætte efter behov (option 1) eller nulstille boksen-skalering af hele regioner (funktion 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Tilgængelighed

Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using PÅ.

Skip navigation

Hvis din navigation indeholder mange links og kommer før det vigtigste indhold i den dom, tilføje en Skip to main content link umiddelbart efter din åbning <body> tag. (Læs hvorfor)

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  <div class="container" id="content">
    The main page content.
  </div>
</body>

Indlejrede positioner

Ved nesting budgetposter (<h1> <h6>), din primære dokument skærebordet skal være <h1>. Følgende punkter bør gøre logisk brug af <h2> - <h6> således at skærmlæsere kan opbygge en tabel over indholdet på dine sider.

Learn more at HTML CodeSniffer and Penn State's AccessAbility.

Yderligere ressourcer

• "HTML Codesniffer" bookmarklet til identifikation af adgang
• A11Y projekt
• Tilgængelighed af MDN dokumentation

Licens FAQ

Bootstrap slippes under mit licens og er copyright 2014 Twitter. Kogt ned til mindre stykker, der kan beskrives med følgende betingelser.

Det kræver, at du:

• Omfatter licensen og copyright-meddelelse i din fungerer

Det giver dig mulighed for at:

• Frit downloade og bruge bootstrap, helt eller delvis, til personlige, private firma indre, eller kommercielle formål
• Brug bootstrap i pakker eller distributioner, du opretter
• Ændre kildekoden
• Yde en underlicens til at ændre og distribuere bootstrap til tredjemand ikke inkluderet i licensen

Den forbyder dem at:

• Hold af forfattere og licens ejer ansvarlig for skader som bootstrap leveres uden garanti
• Hold skaberne eller indehaverne af ophavsretten i bootstrap-ansvarlig
• Omfordele ethvert stykke bootstrap uden korrekt kildeangivelse
• Brug alle varemærker ejet af Twitter på nogen måde, der måske betyder, at Twitter støtter din distribution
• Brug alle varemærker ejet af Twitter på nogen måde, der måske betyder, at du har oprettet en Twitter software

Det kræver ikke, at du:

• Er kilden til bootstrap-selv, eller af eventuelle ændringer du har foretaget i det, i en eventuel omfordeling kan du samle, som indeholder det
• Send ændringer, at du skal til at opstarte tilbage til bootstrap-projekt (selvom en sådan feedback opfordres)

Den fulde bootstrap-licens er placeret i projektet arkiv for at få flere oplysninger.

Oversættelser

Fællesskabets medlemmer har oversat Bootstrap-dokumentationen til forskellige sprog. De er ikke officielle, og er ikke altid opdateret.

• Bootstrap 中文文档 (kinesisk)
• Bootstrap på Dansk (Danish)
• Bootstrap en Français (fransk)
• Bootstrap auf Deutsch (tysk)
• Bootstrap in Italiano (italiensk)
• Bootstrap 한국어 (koreansk)
• Bootstrap по-русски (russisk)
• Bootstrap en Español (spansk)
• Bootstrap українською (Ukrainian)

Vi hjælper ikke med at organisere eller hoste oversættelser, vi link bare til dem.

Færdiggjort en ny og bedre oversættelse? Åben en pull request for at tilføje den til vores liste.