Hent

Bootstrap (p.t. v3.4.1) har et par nemme måder til hurtigt at komme i gang, hver af dem appellerer til et forskelligt færdighedsniveau og forskellige anvendelsesmuligheder. Læs igennem for at se, hvad der passer til netop dine behov.

jsDelivr

Folkene hos jsDelivr giver elskværdig CDN-understøttelse til Bootstraps CSS og JavaScript. Bare brug disse jsDelivr- links.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Installer med Bower

Du kan også installere og administrere Bootstraps Less, CSS, JavaScript og skrifttyper ved hjælp af Bower :

bower install bootstrap

Installer med npm

Du kan også installere Bootstrap ved hjælp af npm :

npm install bootstrap@3

require('bootstrap')vil indlæse alle Bootstraps jQuery-plugins på jQuery-objektet. Selve bootstrapmodulet eksporterer ikke noget. Du kan manuelt indlæse Bootstraps jQuery-plugins individuelt ved at indlæse /js/*.jsfilerne under pakkens øverste mappe.

Bootstraps package.jsonindeholder nogle ekstra metadata under følgende nøgler:

• less- sti til Bootstraps primære Less -kildefil
• style- sti til Bootstraps ikke-minificerede CSS, der er blevet prækompileret ved hjælp af standardindstillingerne (ingen tilpasning)

Installer med Composer

Du kan også installere og administrere Bootstraps Less, CSS, JavaScript og skrifttyper ved hjælp af Composer :

composer require twbs/bootstrap

Autoprefixer påkrævet for Less/Sass

Bootstrap bruger Autoprefixer til at håndtere CSS-leverandørpræfikser . Hvis du kompilerer Bootstrap fra dens Less/Sass-kilde og ikke bruger vores Gruntfile, skal du selv integrere Autoprefixer i din byggeproces. Hvis du bruger prækompileret Bootstrap eller bruger vores Gruntfile, behøver du ikke bekymre dig om dette, fordi Autoprefixer allerede er integreret i vores Gruntfile.

Hvad er inkluderet

Bootstrap kan downloades i to former, inden for hvilke du finder følgende mapper og filer, logisk grupperer fælles ressourcer og giver både kompilerede og minificerede variationer.

Forkompileret Bootstrap

Når den er downloadet, skal du udpakke den komprimerede mappe for at se strukturen af ​​(den kompilerede) Bootstrap. Du vil se noget som dette:

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

Dette er den mest grundlæggende form for Bootstrap: forudkompilerede filer til hurtig drop-in-brug i næsten ethvert webprojekt. Vi leverer kompileret CSS og JS ( bootstrap.*), samt kompileret og minificeret CSS og JS ( bootstrap.min.*). CSS -kildekort ( bootstrap.*.map) er tilgængelige til brug med visse browseres udviklerværktøjer. Skrifttyper fra Glyphicons er inkluderet, ligesom det valgfri Bootstrap-tema.

Bootstrap kildekode

Bootstrap-kildekoden-download inkluderer de prækompilerede CSS-, JavaScript- og skrifttypeaktiver sammen med source Less, JavaScript og dokumentation. Mere specifikt omfatter det følgende og mere:

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

less/, js/, og er fonts/kildekoden til vores CSS-, JS- og ikonskrifttyper (henholdsvis). Mappen dist/indeholder alt, der er angivet i den prækompilerede downloadsektion ovenfor. Mappen docs/indeholder kildekoden til vores dokumentation og examples/Bootstrap-brug. Ud over det giver enhver anden inkluderet fil support til pakker, licensoplysninger og udvikling.

Kompilering af CSS og JavaScript

Bootstrap bruger Grunt til sit byggesystem, med praktiske metoder til at arbejde med rammen. Det er sådan, vi kompilerer vores kode, kører tests og meget mere.

Installerer Grunt

For at installere Grunt skal du først downloade og installere node.js (som inkluderer npm). npm står for node packaged modules og er en måde at administrere udviklingsafhængigheder gennem node.js.

1. Installer grunt-cliglobalt med npm install -g grunt-cli.
2. Naviger til rodmappen /bootstrap/, og kør derefter npm install. npm vil se på package.jsonfilen og automatisk installere de nødvendige lokale afhængigheder, der er angivet der.

Når du er færdig, vil du være i stand til at køre de forskellige Grunt-kommandoer fra kommandolinjen.

Tilgængelige Grunt-kommandoer

grunt dist(Bare kompiler CSS og JavaScript)

Regenererer /dist/mappen med kompilerede og minificerede CSS- og JavaScript-filer. Som Bootstrap-bruger er dette normalt den kommando, du ønsker.

grunt watch(Kigge på)

Overvåger Less-kildefilerne og kompilerer dem automatisk til CSS, hver gang du gemmer en ændring.

grunt test(Kør test)

Kører JSHint og kører QUnit- testene i rigtige browsere takket være Karma .

grunt docs(Byg og test dokumenternes aktiver)

Opbygger og tester CSS, JavaScript og andre aktiver, som bruges, når dokumentationen køres lokalt via bundle exec jekyll serve.

grunt(Byg absolut alt og kør test)

Kompilerer og minimerer CSS og JavaScript, bygger dokumentationswebstedet, kører HTML5-validatoren mod dokumenterne, regenererer Customizer-aktiverne og mere. Kræver Jekyll . Normalt kun nødvendigt, hvis du hacker på selve Bootstrap.

Fejlfinding

Skulle du støde på problemer med at installere afhængigheder eller køre Grunt-kommandoer, skal du først slette /node_modules/mappen genereret af npm. Kør derefter igen npm install.

Grundlæggende skabelon

Start med denne grundlæggende HTML-skabelon, eller modificer disse eksempler . Vi håber, at du vil tilpasse vores skabeloner og eksempler, så de passer til dine behov.

Kopier HTML-koden nedenfor for at begynde at arbejde med et minimalt 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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 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://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Eksempler

Byg videre på den grundlæggende skabelon ovenfor med Bootstraps mange komponenter. Vi opfordrer dig til at tilpasse og tilpasse Bootstrap, så den passer til dit individuelle projekts behov.

Få kildekoden til hvert eksempel nedenfor ved at downloade Bootstrap-depotet . Eksempler kan findes i docs/examples/mappen.

Brug af rammen

Starter skabelon

Intet andet end det grundlæggende: kompileret CSS og JavaScript sammen med en container.

Bootstrap tema

Indlæs det valgfri Bootstrap-tema for en visuelt forbedret oplevelse.

Gitter

Flere eksempler på gitterlayout med alle fire niveauer, indlejring og mere.

Jumbotron

Byg rundt om jumbotronen med en navbar og nogle grundlæggende gitterkolonner.

Smal jumbotron

Byg en mere tilpasset side ved at indsnævre standardbeholderen og jumbotronen.

Navbars i aktion

Navbar

Super grundlæggende skabelon, der inkluderer navbaren sammen med noget ekstra indhold.

Statisk top navbar

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

Fast navbar

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

Brugerdefinerede komponenter

Dække over

En en-sides skabelon til at bygge enkle og smukke hjemmesider.

Karrusel

Tilpas navigeringslinjen og karrusellen, og tilføj derefter nogle nye komponenter.

Blog

Simpelt to-kolonne bloglayout med tilpasset navigation, overskrift og type.

Dashboard

Grundlæggende struktur for et admin-dashboard med fast sidebar og navbar.

Login side

Brugerdefineret formularlayout og design til en enkel login-formular.

Begrundet nav

Opret en tilpasset navigeringslinje med begrundede links. Heads up! Ikke for Safari venlig.

Sticky footer

Vedhæft en sidefod til bunden af ​​visningsporten, når indholdet er kortere end det.

Sticky footer med navbar

Fastgør en sidefod til bunden af ​​viewporten med en fast navbar øverst.

Eksperimenter

Ikke-responsiv Bootstrap

Deaktiver nemt Bootstraps reaktionsevne ifølge vores dokumenter .

Off-canvas

Byg en off-canvas navigationsmenu, der kan skiftes ud til brug med Bootstrap.

Værktøjer

Bootlint

Bootlint er det officielle Bootstrap HTML linter - værktøj. Det tjekker automatisk for flere almindelige HTML-fejl på websider, der bruger Bootstrap på en ret "vanilje" måde. Vanilla Bootstraps komponenter/widgets kræver, at deres dele af DOM'en er i overensstemmelse med bestemte strukturer. Bootlint kontrollerer, at forekomster af Bootstrap-komponenter har korrekt struktureret HTML. Overvej at tilføje Bootlint til din Bootstrap-webudviklingsværktøjskæde, så ingen af ​​de almindelige fejl bremser dit projekts udvikling.

Fællesskab

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

• Læs og abonner på The Official Bootstrap Blog .
• Chat med andre Bootstrappere ved hjælp af IRC på irc.freenode.netserveren i ##bootstrap-kanalen .
• For at få hjælp til at bruge Bootstrap, spørg på StackOverflow ved hjælp af taggettwitter-bootstrap-3 .
• 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.
• Find inspirerende eksempler på mennesker, der bygger med Bootstrap på Bootstrap Expo .

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

Deaktivering af lydhørhed

Bootstrap tilpasser automatisk dine sider til forskellige skærmstørrelser. Sådan deaktiverer du denne funktion, så din side fungerer som dette ikke-responsive eksempel .

Trin til at deaktivere siderespons

1. Udelad viewporten <meta>nævnt i CSS-dokumenterne
2. Tilsidesæt widthpå .containerfor hver grid tier med en enkelt bredde, for eksempel width: 970px !important;Vær sikker på, at dette kommer efter standard Bootstrap CSS. Du kan eventuelt undgå det !importantmed medieforespørgsler eller noget selector-fu.
3. Hvis du bruger navbarer, skal du fjerne al navbar-sammenklappende og udvidende adfærd.
4. Til gitterlayout skal du bruge .col-xs-*klasser som supplement til eller i stedet for de mellemstore/store. Bare rolig, det ekstra lille enhedsgitter skaleres til alle opløsninger.

Du skal stadig bruge Respond.js til IE8 (da vores medieforespørgsler stadig er der og skal behandles). Dette deaktiverer "mobilsite"-aspekterne af Bootstrap.

Bootstrap-skabelon med reaktionsevne deaktiveret

Vi har anvendt disse trin til et eksempel. Læs dens kildekode for at se de specifikke ændringer, der er implementeret.

Se ikke-responsivt eksempel

Understøttelse af browser og enhed

Bootstrap er bygget til at fungere bedst i de nyeste desktop- og mobilbrowsere, hvilket betyder, at ældre browsere kan vise anderledes stilede, men fuldt funktionelle, gengivelser af visse komponenter.

Understøttede browsere

Specifikt understøtter vi de nyeste versioner af følgende browsere og platforme.

Alternative browsere, der bruger den seneste version af WebKit, Blink eller Gecko, uanset om de er direkte eller via platformens webvisnings-API, understøttes ikke eksplicit. Bootstrap bør dog (i de fleste tilfælde) også vise og fungere korrekt i disse browsere. Mere specifikke supportoplysninger findes nedenfor.

Mobile enheder

Generelt set understøtter Bootstrap de nyeste versioner af hver større platforms standardbrowsere. Bemærk, at proxy-browsere (såsom Opera Mini, Opera Mobiles Turbo-tilstand, UC Browser Mini, Amazon Silk) ikke understøttes.

Desktop browsere

På samme måde understøttes de nyeste versioner af de fleste desktopbrowsere.

På Windows understøtter vi Internet Explorer 8-11 .

For Firefox understøtter vi udover den seneste normale stabile udgivelse også den seneste Extended Support Release (ESR) version af Firefox.

Uofficielt burde Bootstrap se ud og opføre sig godt nok i Chromium og Chrome til Linux, Firefox til Linux og Internet Explorer 7 samt Microsoft Edge, selvom de ikke er officielt understøttet.

For en liste over nogle af de browserfejl, som Bootstrap skal kæmpe med, se vores Wall of browser-fejl .

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 understøttes fuldt ud af disse browsere. Derudover kræver Internet Explorer 8 brugen af ​​Respond.js for at aktivere understøttelse af medieforespørgsler.

Besøg Kan jeg bruge... for detaljer om browserunderstøttelse af CSS3- og HTML5-funktioner.

Internet Explorer 8 og Respond.js

Pas på følgende forbehold, når du bruger Respond.js i dine udviklings- og produktionsmiljøer til Internet Explorer 8.

Respond.js og CSS på tværs af domæner

Brug af Respond.js med CSS hostet på et andet (under)domæne (for eksempel på et CDN) kræver yderligere opsætning. Se Respond.js-dokumenterne for detaljer.

Respond.js ogfile://

På grund af browsersikkerhedsregler fungerer Respond.js ikke med sider, der ses via file://protokollen (som når du åbner en lokal HTML-fil). For at teste responsive funktioner i IE8, se dine sider over HTTP(S). Se Respond.js-dokumenterne for detaljer.

Respond.js og@import

Respond.js virker ikke med CSS, der refereres til via @import. Især nogle Drupal-konfigurationer er kendt for at bruge @import. Se Respond.js-dokumenterne for detaljer.

Internet Explorer 8 og boksstørrelse

IE8 understøtter ikke fuldt ud, box-sizing: border-box;når det kombineres med min-width, max-width, min-height, eller max-height. Af den grund bruger vi fra v3.0.1 ikke længere max-widthpå .containers.

Internet Explorer 8 og @font-face

IE8 har nogle problemer med, @font-facenår det kombineres med :before. Bootstrap bruger denne kombination med sine Glyphicons. Hvis en side er cachelagret og indlæst uden musen over vinduet (dvs. tryk på opdateringsknappen eller indlæs noget i en iframe), så bliver siden gengivet før skrifttypen indlæses. Holder du musemarkøren over siden (brødteksten) vises nogle af ikonerne, og hvis du holder musemarkøren over de resterende ikoner, vises disse også. Se nummer #13863 for detaljer.

IE-kompatibilitetstilstande

Bootstrap er ikke understøttet i de gamle Internet Explorer-kompatibilitetstilstande. For at være sikker på, at du bruger den nyeste gengivelsestilstand til IE, kan du overveje at inkludere det relevante <meta>tag på dine sider:

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

Bekræft dokumenttilstanden ved at åbne fejlfindingsværktøjerne: tryk F12og tjek "Dokumenttilstand".

Dette tag er inkluderet i al Bootstraps dokumentation og eksempler for at sikre den bedst mulige gengivelse i hver understøttet version af Internet Explorer.

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

Internet Explorer 10 i Windows 8 og Windows Phone 8

Internet Explorer 10 adskiller ikke enhedsbredde fra viewport-bredde og anvender derfor ikke medieforespørgslerne korrekt i Bootstraps CSS. Normalt ville du bare tilføje et hurtigt uddrag af CSS for at rette dette:

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

Dette virker dog ikke for enheder, der kører Windows Phone 8-versioner ældre end Update 3 (alias GDR3) , da det får sådanne enheder til at vise en hovedsagelig skrivebordsvisning i stedet for en smal "telefon"-visning. For at løse dette skal du inkludere følgende CSS og JavaScript for at omgå fejlen .

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

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
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)
}

Læs Windows Phone 8 og Device-Width for at få flere oplysninger og retningslinjer for brug .

Som en heads up, inkluderer vi dette i al Bootstraps dokumentation og eksempler som en demonstration.

Safari procent afrunding

Gengivelsesmotoren for versioner af Safari før v7.1 til OS X og Safari til iOS v8.0 havde nogle problemer med antallet af decimaler, der blev brugt i vores .col-*-1gitterklasser. Så hvis du havde 12 individuelle gitterkolonner, ville du bemærke, at de kom til kort sammenlignet med andre rækker af kolonner. Udover at opgradere Safari/iOS, har du nogle muligheder for løsninger:

• Tilføj .pull-righttil din sidste gitterkolonne for at få den hårde-højre justering
• Juster dine procenter manuelt for at få den perfekte afrunding til Safari (sværere end den første mulighed)

Modaler, navbarer og virtuelle tastaturer

Overløb og rulning

Support til overflow: hiddenpå <body>elementet er ret begrænset i iOS og Android. Til det formål, når du ruller forbi toppen eller bunden af ​​en modal i en af ​​disse enheders browsere, <body>begynder indholdet at rulle. Se Chrome-fejl #175502 (rettet i Chrome v40) og WebKit-fejl #153852 .

iOS-tekstfelter og rulning

Fra og med iOS 9.3, mens en modal er åben, hvis den første berøring af en rullebevægelse er inden for grænsen af ​​en tekst <input>eller en <textarea>, vil <body>indholdet under modal blive rullet i stedet for selve modalen. Se WebKit-fejl #153856 .

Virtuelle tastaturer

Bemærk også, at hvis du bruger en fast navbar eller bruger input inden for en modal, har iOS en gengivelsesfejl, der ikke opdaterer placeringen af ​​faste elementer, når det virtuelle tastatur udløses. Et par løsninger til dette inkluderer at transformere dine elementer til position: absoluteeller påkalde en timer på fokus for at forsøge at rette positioneringen manuelt. Dette håndteres ikke af Bootstrap, så det er op til dig at beslutte, hvilken løsning der passer bedst til din applikation.

Navbar dropdowns

Elementet .dropdown-backdropbruges ikke på iOS i nav på grund af kompleksiteten af ​​z-indeksering. For at lukke dropdowns i navbars skal du således klikke direkte på dropdown-elementet (eller et hvilket som helst andet element, der udløser en klikhændelse i iOS ).

Browser-zoomning

Sidezoomning præsenterer uundgåeligt gengivelsesartefakter i nogle komponenter, både i Bootstrap og resten af ​​nettet. Afhængigt af problemet kan vi muligvis løse det (søg først, og åbn derefter et problem, hvis det er nødvendigt). Vi har dog en tendens til at ignorere disse, da de ofte ikke har nogen direkte løsning udover hacky løsninger.

Sticky :hover/ :focuspå mobil

Selvom reel svævning ikke er mulig på de fleste berøringsskærme, efterligner de fleste mobilbrowsere svæveunderstøttelse og gør :hover"klæbende". Med andre ord :hoverbegynder stilarter at blive anvendt efter at have trykket på et element og stopper først med at blive anvendt, når brugeren har trykket på et andet element. Dette kan forårsage, at Bootstraps :hovertilstande bliver uønsket "fast" på sådanne browsere. Nogle mobilbrowsere gør også :focuslignende sticky. Der er i øjeblikket ingen enkel løsning på disse problemer udover at fjerne sådanne stilarter helt.

Trykning

Selv i nogle moderne browsere kan udskrivning være skæv.

Især fra Chrome v32 og uanset marginindstillinger bruger Chrome en viewport-bredde, der er væsentligt smallere end den fysiske papirstørrelse, når den løser medieforespørgsler, mens en webside udskrives. Dette kan resultere i, at Bootstraps ekstra lille gitter uventet aktiveres ved udskrivning. Se udgave #12078 og Chrome-fejl #273306 for nogle detaljer. Foreslåede løsninger:

• Omfavn det ekstra lille gitter, og sørg for, at din side ser acceptabel ud under det.
• Tilpas værdierne for @screen-*Less-variablerne, så dit printerpapir anses for at være større end ekstra lille.
• Tilføj tilpassede medieforespørgsler for at ændre brudpunkterne for gitterstørrelsen kun for udskriftsmedier.

Fra Safari v8.0 kan s med fast bredde .containerogså få Safari til at bruge en usædvanlig lille skriftstørrelse ved udskrivning. Se #14868 og WebKit-fejl #138192 for flere detaljer. En potentiel løsning på dette er at tilføje følgende CSS:

@media print {
  .container {
    width: auto;
  }
}

Android aktiebrowser

Ud af kassen leveres Android 4.1 (og endda nogle nyere udgivelser tilsyneladende) med Browser-appen som den foretrukne webbrowser (i modsætning til Chrome). Desværre har Browser-appen masser af fejl og uoverensstemmelser med CSS generelt.

Vælg menuer

På <select>elementer vil Android aktiebrowseren ikke vise sidekontrollerne, hvis der er en border-radiusog/eller borderanvendt. (Se dette StackOverflow-spørgsmål for detaljer.) Brug kodestykket nedenfor til at fjerne den stødende CSS og gengive det <select>som et ustilet element i Android-aktiebrowseren. Brugeragentens sniffning 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.

Validatorer

For at give den bedst mulige oplevelse til gamle og buggy browsere, bruger Bootstrap CSS browser hacks flere steder til at målrette speciel CSS til bestemte browserversioner for at omgå fejl i selve browserne. Disse hacks får forståeligt nok CSS-validatorer til at klage over, at de er ugyldige. Et par steder bruger vi også avancerede CSS-funktioner, der endnu ikke er fuldt standardiserede, men disse bruges udelukkende til progressiv forbedring.

Disse valideringsadvarsler betyder ikke noget i praksis, da den ikke-hacky del af vores CSS validerer fuldt ud, og de hacky dele ikke forstyrrer den korrekte funktion af den ikke-hacky del, og derfor ignorerer vi bevidst disse særlige advarsler.

Vores HTML-dokumenter har ligeledes nogle trivielle og uvæsentlige HTML-valideringsadvarsler på grund af vores medtagelse af en løsning til en bestemt Firefox-fejl .

Tredjeparts støtte

Selvom vi ikke officielt understøtter nogen tredjeparts plugins eller tilføjelser, tilbyder vi nogle nyttige råd for at hjælpe med at undgå potentielle problemer i dine projekter.

Kassestørrelse

Noget tredjepartssoftware, herunder Google Maps og Google Custom Search Engine, er i konflikt med Bootstrap på grund af * { box-sizing: border-box; }, en regel, der gør det således padding, påvirker ikke den endelige beregnede bredde af et element. Lær mere om kassemodel og størrelse på CSS Tricks .

Afhængigt af konteksten kan du tilsidesætte efter behov (mulighed 1) eller nulstille boksstørrelsen for hele regioner (mulighed 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 følger gængse webstandarder og - med minimal ekstra indsats - kan bruges til at oprette websteder, der er tilgængelige for dem, der bruger AT .

Spring navigation over

Hvis din navigation indeholder mange links og kommer før hovedindholdet i DOM, skal du tilføje et Skip to main contentlink før navigationen (for en simpel forklaring, se denne A11Y-projektartikel om spring navigationslinks over ). Brug af .sr-onlyklassen vil visuelt skjule overspringslinket, og .sr-only-focusableklassen vil sikre, at linket bliver synligt, når det først er fokuseret (for seende tastaturbrugere).

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

Indlejrede overskrifter

Når du indlejrer overskrifter ( <h1>- <h6>), skal din primære dokumenthoved være en <h1>. Efterfølgende overskrifter bør gøre logisk brug af <h2>- <h6>sådan at skærmlæsere kan konstruere en indholdsfortegnelse til dine sider.

Lær mere på HTML CodeSniffer og Penn State's AccessAbility .

Farvekontrast

I øjeblikket er nogle af standardfarvekombinationerne tilgængelige i Bootstrap (såsom de forskellige stylede knapklasser, nogle af de kodefremhævende farver, der bruges til grundlæggende kodeblokke , den .bg-primary kontekstuelle baggrundshjælperklasse og standardlinkfarven, når de bruges på en hvid baggrund) har et lavt kontrastforhold (under det anbefalede forhold på 4,5:1 ). Dette kan give problemer for brugere med nedsat syn eller som er farveblinde. Disse standardfarver skal muligvis ændres for at øge deres kontrast og læsbarhed.

Yderligere ressourcer

• "HTML Codesniffer" bogmærke til at identificere tilgængelighedsproblemer
• Chromes Accessibility Developer Tools-udvidelse
• Farvekontrastanalysator
• A11Y-projektet
• MDN tilgængelighedsdokumentation

Ofte stillede spørgsmål om licens

Bootstrap er udgivet under MIT-licensen og er copyright 2019 Twitter. Kogt ned til mindre bidder kan det beskrives med følgende betingelser.

Det kræver, at du:

• Behold licensen og copyright-meddelelsen inkluderet i Bootstraps CSS- og JavaScript-filer, når du bruger dem i dine værker

Det giver dig mulighed for at:

• Download og brug Bootstrap frit, helt eller delvist, til personlige, private, virksomhedsinterne eller kommercielle formål
• Brug Bootstrap i pakker eller distributioner, som du opretter
• Rediger kildekoden
• Giv en underlicens til at ændre og distribuere Bootstrap til tredjeparter, der ikke er inkluderet i licensen

Det forbyder dig at:

• Hold forfatterne og licensejerne ansvarlige for skader, da Bootstrap leveres uden garanti
• Hold skaberne eller copyright-indehaverne af Bootstrap ansvarlige
• Omfordel ethvert stykke Bootstrap uden korrekt tilskrivning
• Brug alle mærker, der ejes af Twitter, på nogen måde, der kan angive eller antyde, at Twitter støtter din distribution
• Brug alle mærker, der ejes af Twitter, på nogen måde, der kan angive eller antyde, at du har oprettet den pågældende Twitter-software

Det kræver ikke, at du:

• Inkluder kilden til selve Bootstrap eller til eventuelle ændringer, du måtte have foretaget til den, i enhver omfordeling, du måtte samle, der inkluderer det
• Send ændringer, du foretager til Bootstrap, tilbage til Bootstrap-projektet (selvom en sådan feedback opfordres)

Den fulde Bootstrap-licens er placeret i projektets lager for mere information.

Oversættelser

Fællesskabsmedlemmer har oversat Bootstraps dokumentation til forskellige sprog. Ingen er officielt understøttet, og de er muligvis ikke altid opdaterede.

• Bootstrap 中文文档 (kinesisk)
• Bootstrap på Dansk (dansk)
• Bootstrap en Français (fransk)
• Bootstrap auf Deutsch (tysk)
• Bootstrap på italiensk (italiensk)
• Bootstrap 한국어 (koreansk)
• Bootstrap em Português do Brasil (brasiliansk portugisisk)
• Bootstrap по-русски (russisk)
• Bootstrap en Español (spansk)
• Türkçe Bootstrap (tyrkisk)
• Bootstrap українською (ukrainsk)
• Bootstrap bằng tiếng Việt (vietnamesisk)

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

Færdig med en ny eller bedre oversættelse? Åbn en pull-anmodning for at tilføje den til vores liste.