Ladda ner

Bootstrap (för närvarande v3.3.7) har några enkla sätt att snabbt komma igång, var och en tilltalar olika färdighetsnivåer och användningsfall. Läs igenom för att se vad som passar just dina behov.

Bootstrap CDN

Folket på jsDelivr tillhandahåller nådigt CDN-stöd för Bootstraps CSS och JavaScript. Använd bara dessa Bootstrap CDN- länkar.

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

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

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

Installera med Bower

Du kan också installera och hantera Bootstraps Less, CSS, JavaScript och teckensnitt med hjälp av Bower :

$ bower install bootstrap

Installera med npm

Du kan också installera Bootstrap med npm :

$ npm install bootstrap@3

require('bootstrap')kommer att ladda alla Bootstraps jQuery-plugin-program till jQuery-objektet. Modulen bootstrapsjälv exporterar ingenting. Du kan manuellt ladda Bootstraps jQuery-plugins individuellt genom att ladda /js/*.jsfilerna under paketets översta katalog.

Bootstraps package.jsoninnehåller ytterligare metadata under följande nycklar:

• less- sökväg till Bootstraps huvudsakliga Less -källfil
• style- sökväg till Bootstraps icke-minifierade CSS som har förkompilerats med standardinställningarna (ingen anpassning)

Installera med Composer

Du kan också installera och hantera Bootstraps Less, CSS, JavaScript och teckensnitt med hjälp av Composer :

$ composer require twbs/bootstrap

Autoprefixer krävs för Less/Sass

Bootstrap använder Autoprefixer för att hantera CSS-leverantörsprefix . Om du kompilerar Bootstrap från dess Less/Sass-källa och inte använder vår Gruntfile, måste du själv integrera Autoprefixer i din byggprocess. Om du använder förkompilerad Bootstrap eller använder vår Gruntfil, behöver du inte oroa dig för detta eftersom Autoprefixer redan är integrerad i vår Gruntfil.

Vad ingår

Bootstrap är nedladdningsbart i två former, inom vilka du hittar följande kataloger och filer, logiskt grupperar gemensamma resurser och tillhandahåller både kompilerade och minifierade varianter.

Förkompilerad Bootstrap

När du har laddat ner, packa upp den komprimerade mappen för att se strukturen för (den kompilerade) Bootstrap. Du kommer att se något sånt här:

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

Detta är den mest grundläggande formen av Bootstrap: förkompilerade filer för snabb drop-in-användning i nästan alla webbprojekt. Vi tillhandahåller kompilerad CSS och JS ( bootstrap.*), samt kompilerad och minifierad CSS och JS ( bootstrap.min.*). CSS -källkartor ( bootstrap.*.map) är tillgängliga för användning med vissa webbläsares utvecklarverktyg. Typsnitt från Glyphicons ingår, liksom det valfria Bootstrap-temat.

Bootstrap källkod

Nedladdningen av Bootstrap-källkoden inkluderar de förkompilerade CSS-, JavaScript- och teckensnittstillgångarna, tillsammans med source Less, JavaScript och dokumentation. Mer specifikt inkluderar den följande och mer:

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

less/, js/, och fonts/är källkoden för våra CSS-, JS- och ikonteckensnitt (respektive) . Mappen dist/innehåller allt som anges i den förkompilerade nedladdningssektionen ovan. Mappen docs/innehåller källkoden för vår dokumentation och examples/Bootstrap-användning. Utöver det ger alla andra inkluderade filer stöd för paket, licensinformation och utveckling.

Kompilera CSS och JavaScript

Bootstrap använder Grunt för sitt byggsystem, med bekväma metoder för att arbeta med ramverket. Det är hur vi kompilerar vår kod, kör tester och mer.

Installerar Grunt

För att installera Grunt måste du först ladda ner och installera node.js (som inkluderar npm). npm står för node packed modules och är ett sätt att hantera utvecklingsberoenden genom node.js.

1. Installera grunt-cliglobalt med npm install -g grunt-cli.
2. Navigera till rotkatalogen /bootstrap/och kör sedan npm install. npm kommer att titta på package.jsonfilen och automatiskt installera nödvändiga lokala beroenden som anges där.

När du är klar kommer du att kunna köra de olika Grunt-kommandon som tillhandahålls från kommandoraden.

Tillgängliga Grunt-kommandon

grunt dist(Kompilera bara CSS och JavaScript)

Återskapar /dist/katalogen med kompilerade och minifierade CSS- och JavaScript-filer. Som Bootstrap-användare är detta normalt kommandot du vill ha.

grunt watch(Kolla på)

Tittar på Less-källfilerna och kompilerar dem automatiskt till CSS när du sparar en ändring.

grunt test(Kör tester)

Kör JSHint och kör QUnit- testerna huvudlöst i PhantomJS .

grunt docs(Skapa och testa dokumenttillgångarna)

Bygger och testar CSS, JavaScript och andra tillgångar som används när dokumentationen körs lokalt via bundle exec jekyll serve.

grunt(Bygg absolut allt och kör tester)

Kompilerar och förminskar CSS och JavaScript, bygger dokumentationswebbplatsen, kör HTML5-valideraren mot dokumenten, återskapar Customizer-tillgångarna och mer. Kräver Jekyll . Vanligtvis bara nödvändigt om du hackar på Bootstrap själv.

Felsökning

Skulle du stöta på problem med att installera beroenden eller köra Grunt-kommandon, ta först bort /node_modules/katalogen som genereras av npm. Kör sedan igen npm install.

Grundläggande mall

Börja med denna grundläggande HTML-mall eller ändra dessa exempel . Vi hoppas att du kommer att anpassa våra mallar och exempel så att de passar dina behov.

Kopiera HTML-koden nedan för att börja arbeta med ett 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 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://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://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Exempel

Bygg på grundmallen ovan med Bootstraps många komponenter. Vi uppmuntrar dig att anpassa och anpassa Bootstrap för att passa ditt individuella projekts behov.

Få källkoden för varje exempel nedan genom att ladda ner Bootstrap-förvaret . Exempel finns i docs/examples/katalogen.

Använda ramverket

Förrättsmall

Inget annat än grunderna: kompilerad CSS och JavaScript tillsammans med en behållare.

Bootstrap-tema

Ladda det valfria Bootstrap-temat för en visuellt förbättrad upplevelse.

Rutnät

Flera exempel på rutnätslayouter med alla fyra nivåerna, kapsling och mer.

Jumbotron

Bygg runt jumbotronen med en navbar och några grundläggande rutkolumner.

Smal jumbotron

Bygg en mer anpassad sida genom att begränsa standardbehållaren och jumbotronen.

Navbars i aktion

Navbar

Super grundläggande mall som inkluderar navigeringsfältet tillsammans med lite extra innehåll.

Statisk toppnavigeringsfält

Super grundläggande mall med en statisk toppnavigeringsfält tillsammans med lite extra innehåll.

Fixat navigeringsfält

Super grundläggande mall med en fast toppnavigeringsfält tillsammans med lite extra innehåll.

Anpassade komponenter

Omslag

En ensidig mall för att bygga enkla och vackra hemsidor.

Karusell

Anpassa navigeringsfältet och karusellen och lägg sedan till några nya komponenter.

Blogg

Enkel blogglayout med två kolumner med anpassad navigering, rubrik och typ.

instrumentbräda

Grundläggande struktur för en admin-dashboard med fast sidofält och navigeringsfält.

Inloggningssida

Anpassad formulärlayout och design för ett enkelt inloggningsformulär.

Berättigad nav

Skapa ett anpassat navigeringsfält med motiverade länkar. Se upp! Inte alltför safarivänlig.

Klibbig sidfot

Fäst en sidfot längst ned i visningsporten när innehållet är kortare än det.

Klibbig sidfot med navigeringsfält

Fäst en sidfot längst ner i visningsporten med en fast navigeringsfält högst upp.

Experiment

Reagerar inte Bootstrap

Inaktivera enkelt responsen för Bootstrap enligt våra dokument .

Off-canvas

Bygg en växlingsbar off-canvas navigeringsmeny för användning med Bootstrap.

Verktyg

Bootlint

Bootlint är det officiella Bootstrap HTML linter- verktyget. Den letar automatiskt efter flera vanliga HTML-fel på webbsidor som använder Bootstrap på ett ganska "vanilj" sätt. Vanilla Bootstraps komponenter/widgets kräver att deras delar av DOM överensstämmer med vissa strukturer. Bootlint kontrollerar att instanser av Bootstrap-komponenter har korrekt strukturerad HTML. Överväg att lägga till Bootlint till din Bootstrap webbutvecklingsverktygskedja så att inget av de vanliga misstagen saktar ner ditt projekts utveckling.

gemenskap

Håll dig uppdaterad om utvecklingen av Bootstrap och nå ut till samhället med dessa användbara resurser.

• Läs och prenumerera på The Official Bootstrap Blog .
• Chatta med andra Bootstrappers med IRC på irc.freenode.netservern, i ##bootstrap-kanalen .
• För hjälp med att använda Bootstrap, fråga på StackOverflow med taggentwitter-bootstrap-3 .
• Utvecklare bör använda nyckelordet bootstrappå paket som modifierar eller lägger till funktionaliteten i Bootstrap när de distribuerar via npm eller liknande leveransmekanismer för maximal upptäckbarhet.
• Hitta inspirerande exempel på människor som bygger med Bootstrap på Bootstrap Expo .

Du kan också följa @getbootstrap på Twitter för det senaste skvallret och fantastiska musikvideor.

Inaktiverar lyhördhet

Bootstrap anpassar automatiskt dina sidor för olika skärmstorlekar. Så här inaktiverar du den här funktionen så att din sida fungerar som det här icke-responsiva exemplet .

Steg för att inaktivera sidrespons

1. Utelämna visningsporten <meta>som nämns i CSS-dokumenten
2. Åsidosätt widthpå .containerför varje rutnätsnivå med en enda bredd, till exempel width: 970px !important;Se till att detta kommer efter standard Bootstrap CSS. Du kan valfritt undvika !importantmed mediefrågor eller någon selector-fu.
3. Om du använder navbarer, ta bort alla navbars kollapsande och expanderande beteende.
4. För rutnätslayouter, använd .col-xs-*klasser utöver eller i stället för de medelstora/stora. Oroa dig inte, det extra lilla enhetens rutnät skalas till alla upplösningar.

Du behöver fortfarande Respond.js för IE8 (eftersom våra mediefrågor fortfarande finns där och behöver bearbetas). Detta inaktiverar "mobilwebbplats"-aspekterna av Bootstrap.

Bootstrap-mall med respons inaktiverad

Vi har tillämpat dessa steg på ett exempel. Läs dess källkod för att se de specifika förändringarna som genomförts.

Se exempel som inte svarar

Webbläsare och enhetsstöd

Bootstrap är byggd för att fungera bäst i de senaste stationära och mobila webbläsarna, vilket innebär att äldre webbläsare kan visa olika stil, men fullt fungerande, renderingar av vissa komponenter.

Webbläsare som stöds

Specifikt stöder vi de senaste versionerna av följande webbläsare och plattformar.

Alternativa webbläsare som använder den senaste versionen av WebKit, Blink eller Gecko, antingen direkt eller via plattformens webbvy-API, stöds inte uttryckligen. Bootstrap bör dock (i de flesta fall) visa och fungera korrekt även i dessa webbläsare. Mer specifik supportinformation finns nedan.

Mobil enheter

Generellt sett stöder Bootstrap de senaste versionerna av varje större plattforms standardwebbläsare. Observera att proxywebbläsare (som Opera Mini, Opera Mobiles Turbo-läge, UC Browser Mini, Amazon Silk) inte stöds.

Desktop webbläsare

På samma sätt stöds de senaste versionerna av de flesta stationära webbläsare.

På Windows stöder vi Internet Explorer 8-11 .

För Firefox stöder vi, förutom den senaste normala stabila versionen, även den senaste versionen av Firefox (Extended Support Release) (ESR) .

Inofficiellt borde Bootstrap se ut och bete sig tillräckligt bra i Chromium och Chrome för Linux, Firefox för Linux och Internet Explorer 7, såväl som Microsoft Edge, även om de inte stöds officiellt.

För en lista över några av webbläsarbuggarna som Bootstrap måste brottas med, se vår Wall of browser bugs .

Internet Explorer 8 och 9

Internet Explorer 8 och 9 stöds också, men tänk på att vissa CSS3-egenskaper och HTML5-element inte stöds fullt ut av dessa webbläsare. Dessutom kräver Internet Explorer 8 användning av Respond.js för att möjliggöra stöd för mediefrågor.

Besök Kan jag använda... för information om webbläsarstöd för CSS3- och HTML5-funktioner.

Internet Explorer 8 och Respond.js

Se upp för följande varningar när du använder Respond.js i dina utvecklings- och produktionsmiljöer för Internet Explorer 8.

Respond.js och CSS över flera domäner

Att använda Respond.js med CSS på en annan (under)domän (till exempel på ett CDN) kräver ytterligare inställningar. Se Respond.js-dokumentationen för mer information.

Respond.js ochfile://

På grund av webbläsarens säkerhetsregler fungerar inte Respond.js med sidor som visas via file://protokollet (som när du öppnar en lokal HTML-fil). För att testa responsiva funktioner i IE8, visa dina sidor via HTTP(S). Se Respond.js-dokumentationen för mer information.

Respond.js och@import

Respond.js fungerar inte med CSS som refereras via @import. I synnerhet är det känt att vissa Drupal-konfigurationer använder @import. Se Respond.js-dokumentationen för mer information.

Internet Explorer 8 och boxstorlek

IE8 stöder inte fullt ut box-sizing: border-box;när det kombineras med min-width, max-width, min-height, eller max-height. Av den anledningen, från och med v3.0.1, använder vi inte längre max-widthpå .containers.

Internet Explorer 8 och @font-face

IE8 har vissa problem med @font-facenär den kombineras med :before. Bootstrap använder den kombinationen med sina Glyphicons. Om en sida är cachad och laddas utan musen över fönstret (dvs. tryck på uppdateringsknappen eller ladda något i en iframe) så renderas sidan innan typsnittet laddas. Håller du muspekaren över sidan (brödtexten) visas några av ikonerna och om du håller muspekaren över de återstående ikonerna visas dessa också. Se nummer #13863 för detaljer.

IE-kompatibilitetslägen

Bootstrap stöds inte i de gamla Internet Explorer-kompatibilitetslägena. För att vara säker på att du använder det senaste renderingsläget för IE, överväg att inkludera lämplig <meta>tagg på dina sidor:

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

Bekräfta dokumentläget genom att öppna felsökningsverktygen: tryck F12och kontrollera "Dokumentläge".

Denna tagg ingår i all Bootstraps dokumentation och exempel för att säkerställa bästa möjliga rendering i varje version av Internet Explorer som stöds.

Se den här StackOverflow-frågan för mer information.

Internet Explorer 10 i Windows 8 och Windows Phone 8

Internet Explorer 10 skiljer inte enhetens bredd från visningsportens bredd och tillämpar därför inte mediefrågorna i Bootstraps CSS korrekt. Normalt lägger du bara till ett snabbt utdrag av CSS för att fixa detta:

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

Detta fungerar dock inte för enheter som kör Windows Phone 8-versioner äldre än Update 3 (alias GDR3) , eftersom det får sådana enheter att visa en mestadels skrivbordsvy istället för en smal "telefonvy". För att lösa detta måste du inkludera följande CSS och JavaScript för att komma runt buggen .

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

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

För mer information och användningsriktlinjer, läs Windows Phone 8 och Device-Width .

Som en heads up inkluderar vi detta i all Bootstraps dokumentation och exempel som en demonstration.

Safari procentuell avrundning

Återgivningsmotorn för versioner av Safari före v7.1 för OS X och Safari för iOS v8.0 hade vissa problem med antalet decimaler som användes i våra .col-*-1rutnätsklasser. Så om du hade 12 individuella rutkolumner, skulle du märka att de blev korta jämfört med andra rader med kolumner. Förutom att uppgradera Safari/iOS, har du några alternativ för lösningar:

• Lägg .pull-righttill i din sista rutnätskolumn för att få hård-högerjusteringen
• Justera dina procentsatser manuellt för att få den perfekta avrundningen för Safari (svårare än det första alternativet)

Modaler, navigeringsfält och virtuella tangentbord

Översvämning och rullning

Stödet för overflow: hiddenelementet <body>är ganska begränsat i iOS och Android. För detta ändamål, när du rullar förbi toppen eller botten av en modal i någon av dessa enheters webbläsare, <body>kommer innehållet att börja rulla. Se Chrome bugg #175502 (fixad i Chrome v40) och WebKit bugg #153852 .

iOS-textfält och rullning

Från och med iOS 9.3, medan en modal är öppen, om den första beröringen av en rullningsgest är inom gränsen för en text <input>eller en <textarea>, kommer <body>innehållet under modalen att rullas istället för själva modalen. Se WebKit-fel #153856 .

Virtuella tangentbord

Observera också att om du använder en fast navbar eller använder ingångar inom en modal, har iOS en renderingsbugg som inte uppdaterar positionen för fasta element när det virtuella tangentbordet utlöses. Några lösningar för detta inkluderar att omvandla dina element till position: absoluteeller anropa en timer på fokus för att försöka korrigera positioneringen manuellt. Detta hanteras inte av Bootstrap, så det är upp till dig att bestämma vilken lösning som är bäst för din applikation.

Navbar rullgardinsmeny

Elementet .dropdown-backdropanvänds inte på iOS i nav på grund av komplexiteten i z-indexering. För att stänga rullgardinsmenyn i navigeringsfält måste du alltså direkt klicka på rullgardinselementet (eller något annat element som kommer att utlösa en klickhändelse i iOS ).

Webbläsarzoomning

Sidzoomning presenterar oundvikligen renderingsartefakter i vissa komponenter, både i Bootstrap och resten av webben. Beroende på problemet kan vi kanske åtgärda det (sök först och öppna sedan ett problem om det behövs). Vi tenderar dock att ignorera dessa eftersom de ofta inte har någon direkt lösning förutom hackiga lösningar.

Sticky :hover/ :focuspå mobil

Även om riktig svävning inte är möjlig på de flesta pekskärmar, emulerar de flesta mobila webbläsare stöd för svävning och gör :hover"klibbig". Med andra ord, :hoverstilar börjar tillämpas efter att ha tryckt på ett element och slutar tillämpas först efter att användaren tryckt på något annat element. Detta kan göra att Bootstraps :hovertillstånd oönskat "fastnar" på sådana webbläsare. Vissa mobila webbläsare gör också :focusliknande klibbiga. Det finns för närvarande ingen enkel lösning för dessa problem förutom att ta bort sådana stilar helt och hållet.

Utskrift

Även i vissa moderna webbläsare kan utskrift vara knäppt.

I synnerhet, från och med Chrome v32 och oavsett marginalinställningar, använder Chrome en visningsportbredd som är betydligt smalare än den fysiska pappersstorleken när man löser mediefrågor när man skriver ut en webbsida. Detta kan resultera i att Bootstraps extra lilla rutnät oväntat aktiveras vid utskrift. Se nummer #12078 och Chrome-fel #273306 för mer information. Föreslagna lösningar:

• Omfamna det extra lilla rutnätet och se till att din sida ser acceptabel ut under den.
• Anpassa värdena för @screen-*Less-variablerna så att ditt skrivarpapper anses vara större än extra litet.
• Lägg till anpassade mediafrågor för att ändra brytpunkterna för rutnätsstorleken endast för utskriftsmedia.

Från och med Safari v8.0 kan .containers med fast bredd göra att Safari använder en ovanligt liten teckenstorlek vid utskrift. Se #14868 och WebKit bugg #138192 för mer information. En möjlig lösning för detta är att lägga till följande CSS:

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

Android lager webbläsare

Utanför förpackningen levereras Android 4.1 (och till och med några nyare versioner tydligen) med webbläsarappen som standardwebbläsare (i motsats till Chrome). Tyvärr har webbläsarappen massor av buggar och inkonsekvenser med CSS i allmänhet.

Välj menyer

På <select>element visar Android aktiewebbläsaren inte sidokontrollerna om det finns en border-radiusoch/eller bordertillämpas. (Se den här StackOverflow-frågan för mer information.) Använd kodavsnittet nedan för att ta bort den stötande CSS-en och rendera den <select>som ett oformaterat element i Androids aktiewebbläsare. Användaragenten som sniffar undviker störningar i webbläsarna Chrome, Safari och Mozilla.

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

Vill du se ett exempel? Kolla in den här JS Bin-demon.

Validatorer

För att ge bästa möjliga upplevelse till gamla och buggiga webbläsare använder Bootstrap CSS-webbläsarhack på flera ställen för att rikta speciell CSS till vissa webbläsarversioner för att komma runt buggar i själva webbläsarna. Dessa hack får förståeligt nog CSS-validerare att klaga på att de är ogiltiga. På ett par ställen använder vi också avancerade CSS-funktioner som ännu inte är helt standardiserade, men dessa används enbart för progressiv förbättring.

Dessa valideringsvarningar spelar ingen roll i praktiken eftersom den icke-hackiga delen av vår CSS valideras fullt ut och de hackiga delarna inte stör den korrekta funktionen av den icke-hackiga delen, varför vi medvetet ignorerar dessa varningar.

Våra HTML-dokument har också några triviala och oviktiga HTML-valideringsvarningar på grund av att vi inkluderade en lösning för en viss Firefox-bugg .

Stöd från tredje part

Även om vi inte officiellt stöder några plugins eller tillägg från tredje part, erbjuder vi några användbara råd för att undvika potentiella problem i dina projekt.

Lådastorlek

Viss programvara från tredje part, inklusive Google Maps och Google Custom Search Engine, kommer i konflikt med Bootstrap på grund av * { box-sizing: border-box; }, en regel som gör att det paddinginte påverkar den slutgiltiga beräknade bredden på ett element. Lär dig mer om lådmodell och storlek på CSS Tricks .

Beroende på sammanhanget kan du åsidosätta vid behov (alternativ 1) eller återställa boxstorleken för hela regioner (alternativ 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();
}

Tillgänglighet

Bootstrap följer vanliga webbstandarder och kan – med minimal extra ansträngning – användas för att skapa webbplatser som är tillgängliga för dem som använder AT .

Hoppa över navigering

Om din navigering innehåller många länkar och kommer före huvudinnehållet i DOM, lägg till en Skip to main contentlänk före navigeringen (för en enkel förklaring, se denna A11Y-projektartikel om hoppa över navigeringslänkar ). Genom att använda .sr-onlyklassen döljs överhoppningslänken visuellt, och .sr-only-focusableklassen ser till att länken blir synlig när den är fokuserad (för seende tangentbordsanvändare).

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

Kapslade rubriker

När du kapslar rubriker ( <h1>- <h6>) ska din primära dokumentrubrik vara en <h1>. Efterföljande rubriker bör göra logisk användning av <h2>- <h6>så att skärmläsare kan konstruera en innehållsförteckning för dina sidor.

Läs mer på HTML CodeSniffer och Penn State's AccessAbility .

Färgkontrast

För närvarande är några av standardfärgkombinationerna tillgängliga i Bootstrap (såsom de olika formaterade knappklasserna , några av kodmarkeringsfärgerna som används för grundläggande kodblock , den .bg-primary kontextuella bakgrundshjälparklassen och standardlänkfärgen när den används på en vit bakgrund) har ett lågt kontrastförhållande (under det rekommenderade förhållandet 4,5:1 ). Detta kan orsaka problem för användare med nedsatt syn eller som är färgblinda. Dessa standardfärger kan behöva ändras för att öka deras kontrast och läsbarhet.

Ytterligare resurser

• "HTML Codesniffer" bokmärke för att identifiera tillgänglighetsproblem
• Chromes tillägg för utvecklarverktyg för tillgänglighet
• Färgkontrastanalysator
• A11Y-projektet
• MDN tillgänglighetsdokumentation

Vanliga frågor om licenser

Bootstrap släpps under MIT-licensen och är copyright 2016 Twitter. Kokt ner till mindre bitar kan det beskrivas med följande förutsättningar.

Det kräver att du:

• Behåll licensen och upphovsrättsmeddelandet i Bootstraps CSS- och JavaScript-filer när du använder dem i dina verk

Det tillåter dig att:

• Ladda ner och använd Bootstrap fritt, helt eller delvis, för personliga, privata, företagsinterna eller kommersiella ändamål
• Använd Bootstrap i paket eller distributioner som du skapar
• Ändra källkoden
• Ge en underlicens för att modifiera och distribuera Bootstrap till tredje part som inte ingår i licensen

Det förbjuder dig att:

• Håll författarna och licensägarna ansvariga för skador eftersom Bootstrap tillhandahålls utan garanti
• Håll skaparna eller upphovsrättsinnehavarna av Bootstrap ansvariga
• Omfördela någon del av Bootstrap utan korrekt tillskrivning
• Använd alla märken som ägs av Twitter på något sätt som kan ange eller antyda att Twitter stöder din distribution
• Använd alla märken som ägs av Twitter på något sätt som kan ange eller antyda att du skapat Twitter-programvaran i fråga

Det kräver inte att du:

• Inkludera källan till själva Bootstrap, eller till eventuella ändringar du kan ha gjort i den, i all omdistribution du kan montera som inkluderar den
• Skicka ändringar som du gör i Bootstrap tillbaka till Bootstrap-projektet (även om sådan feedback uppmuntras)

Den fullständiga Bootstrap-licensen finns i projektförrådet för mer information.

Översättningar

Community-medlemmar har översatt Bootstraps dokumentation till olika språk. Ingen stöds officiellt och de kanske inte alltid är uppdaterade.

• Bootstrap 中文文档 (kinesiska)
• Bootstrap 3 中文手冊 (kinesiska (traditionell))
• Bootstrap på Dansk (danska)
• Bootstrap en Français (franska)
• Bootstrap auf Deutsch (tyska)
• Bootstrap på italienska (italienska)
• Bootstrap 한국어 (koreanska)
• Bootstrap em Português do Brasil (brasiliansk portugisiska)
• Bootstrap по-русски (ryska)
• Bootstrap en Español (spanska)
• Türkçe Bootstrap (turkiska)
• Bootstrap українською (ukrainska)
• Bootstrap bằng tiếng Việt (vietnamesiska)

Vi hjälper inte till att organisera eller vara värd för översättningar, vi länkar bara till dem.

Har du slutfört en ny eller bättre översättning? Öppna en pull-begäran för att lägga till den i vår lista.