Ställningar

Kräver HTML5 doctype

Bootstrap använder vissa HTML-element och CSS-egenskaper som kräver användning av HTML5 doctype. Inkludera det i början av alla dina projekt.

<!DOCTYPE html>
<html lang = "sv" > 
  ...
</html>

Typografi och länkar

Bootstrap ställer in grundläggande globala visnings-, typografi- och länkstilar. Närmare bestämt, vi:

Ta bort marginpå kroppen
Ställ background-color: white;in påbody
Använd @baseFontFamily, @baseFontSize, och @baseLineHeightattributen som vår typografiska bas
Ställ in den globala länkfärgen via @linkColoroch använd endast länkunderstrykningar på:hover

Dessa stilar kan hittas inom scaffolding.less .

Återställ via Normalize

Med Bootstrap 2 har det gamla återställningsblocket tagits bort till förmån för Normalize.css , ett projekt av Nicolas Gallagher som också driver HTML5 Boilerplate . Även om vi använder mycket av Normalize i vår reset.less , har vi tagit bort några element specifikt för Bootstrap.

Exempel på levande rutnät

Standardsystemet Bootstrap-rutnät använder 12 kolumner , vilket ger en 940px bred behållare utan responsiva funktioner aktiverade. Med den responsiva CSS-filen tillagd anpassar sig rutnätet till att vara 724px och 1170px brett beroende på din visningsport. Under 767px viewports blir kolumnerna flytande och staplas vertikalt.

Grundläggande HTML-rutnät

För en enkel layout med två kolumner, skapa en .rowoch lägg till lämpligt antal .span*kolumner. Eftersom detta är ett rutnät med 12 kolumner, .span*spänner varje kolumn över ett antal av dessa 12 kolumner och bör alltid läggas till 12 för varje rad (eller antalet kolumner i den överordnade).

<div class = "rad" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Med det här exemplet har vi .span4och .span8, vilket ger totalt 12 kolumner och en komplett rad.

Förskjutning av kolumner

Flytta kolumner till höger med .offset*klasser. Varje klass ökar den vänstra marginalen i en kolumn med en hel kolumn. .offset4Flyttar till exempel .span4över fyra kolumner.

3 offset 2

3 offset 1

3 offset 2

6 offset 3

<div class = "rad" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Häckande kolumner

För att kapsla ditt innehåll med standardrutnätet, lägg till en ny .rowoch uppsättning .span*kolumner i en befintlig .span*kolumn. Kapslade rader bör innehålla en uppsättning kolumner som summerar antalet kolumner för dess överordnade.

Nivå 1 i kolumn

Nivå 2

<div class = "rad" > 
  <div class = "span9" > 
    Nivå 1 kolumn
    <div class = "rad" > 
      <div class = "span6" > Nivå 2 </div> 
      <div class = "span3" > Nivå 2 </div> 
    </div>
  </div>
</div>

Exempel på levande vätskenät

Vätskenätsystemet använder procent i stället för pixlar för kolumnbredder. Den har samma responsfunktioner som vårt fasta rutsystem, vilket säkerställer rätt proportioner för viktiga skärmupplösningar och enheter.

Grundläggande flytande rutnät HTML

Gör valfri rad "flytande" genom att ändra .rowtill .row-fluid. Kolumnklasserna förblir exakt desamma, vilket gör det enkelt att växla mellan fasta och flytande rutnät.

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Vätskekompensation

Fungerar på samma sätt som den fasta rutnätsförskjutningen: lägg .offset*till i valfri kolumn för att kompensera med så många kolumner.

4 offset 4

3 offset 3

6 offset 6

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Vätska häckande

Att kapsla med vätskenät är lite annorlunda: antalet kapslade kolumner bör inte matcha förälderns antal kolumner. Istället återställs varje nivå av kapslade kolumner eftersom varje rad tar upp 100 % av den överordnade kolumnen.

Vätska 12

Vätska 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    Nivå 1 i kolumn
    <div class = "row-fluid" > 
      <div class = "span6" > Nivå 2 </div> 
      <div class = "span6" > Nivå 2 </div> 
    </div>
  </div>
</div>

Fast layout

Ger en gemensam layout med fast bredd (och valfritt lyhörd) med endast <div class="container">nödvändiga.

<kropp>
  <div class = "container" > 
    ...
  </div>
</body>

Flytande layout

Skapa en flytande sida med två kolumner med <div class="container-fluid">— perfekt för applikationer och dokument.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Innehåll i sidofältet-->
    </div>
    <div class = "span10" > 
      <!--Kroppsinnehåll-->
    </div>
  </div>
</div>

Aktiverar responsiva funktioner

Aktivera responsiv CSS i ditt projekt genom att inkludera rätt metatagg och ytterligare stilmall i <head>ditt dokument. Om du har kompilerat Bootstrap från sidan Anpassa behöver du bara inkludera metataggen.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Se upp! Bootstrap inkluderar inte responsiva funktioner som standard för närvarande eftersom allt inte behöver vara responsivt. Istället för att uppmuntra utvecklare att ta bort den här funktionen, anser vi att det är bäst att aktivera den efter behov.

Om responsiv Bootstrap

Mediefrågor tillåter anpassad CSS baserat på ett antal förhållanden – förhållanden, bredder, visningstyp, etc – men fokuserar vanligtvis på min-widthoch max-width.

Ändra bredden på kolumnen i vårt rutnät
Stapla element istället för att flyta där det behövs
Ändra storlek på rubriker och text för att vara mer lämpliga för enheter

Använd mediefrågor på ett ansvarsfullt sätt och bara som en start för din mobila publik. För större projekt, överväg dedikerade kodbaser och inte lager av mediefrågor.

Enheter som stöds

Bootstrap stöder en handfull mediefrågor i en enda fil för att göra dina projekt mer lämpliga på olika enheter och skärmupplösningar. Här är vad som ingår:

Märka	Layoutens bredd	Kolumnbredd	Rännans bredd
Stor display	1200px och uppåt	70 pixlar	30 pixlar
Standard	980px och uppåt	60px	20px
Porträtt tabletter	768px och högre	42px	20px
Telefoner till surfplattor	767px och lägre	Vätskepelare, inga fasta bredder
Telefoner	480px och lägre	Vätskepelare, inga fasta bredder

/* Stort skrivbord */
@media ( min - bredd : 1200px ) { ... }     
 
/* Stående surfplatta till liggande och skrivbord */
@media ( min - bredd : 768px ) och ( max - bredd : 979px ) { ... }        
 
/* Liggande telefon till stående surfplatta */
@media ( max - bredd : 767px ) { ... }     
 
/* Liggande telefoner och nedåt */
@media ( maxbredd : 480px ) { ... } _ _

Responsiva verktygsklasser

För snabbare mobilvänlig utveckling, använd dessa verktygsklasser för att visa och dölja innehåll per enhet. Nedan finns en tabell över tillgängliga klasser och deras effekt på en given mediefrågelayout (märkt av enhet). De finns i responsive.less.

Klass	Telefoner767px och lägre	Tabletter979px till 768px	Stationära datorerStandard
`.visible-phone`	Synlig	Dold	Dold
`.visible-tablet`	Dold	Synlig	Dold
`.visible-desktop`	Dold	Dold	Synlig
`.hidden-phone`	Dold	Synlig	Synlig
`.hidden-tablet`	Synlig	Dold	Synlig
`.hidden-desktop`	Synlig	Synlig	Dold

När ska användas

Använd i begränsad omfattning och undvik att skapa helt olika versioner av samma webbplats. Använd dem istället för att komplettera varje enhets presentation.

Testfall för responsiva verktyg

Ändra storlek på din webbläsare eller ladda på olika enheter för att testa ovanstående klasser.

Syns på...

Gröna bockar indikerar att klassen är synlig i din nuvarande visningsport.

Telefon✔ Telefon
Läsplatta✔ Surfplatta
Skrivbord✔ Skrivbord

Gömd på...

Här indikerar gröna bockar att klassen är gömd i din nuvarande visningsport.

Telefon✔ Telefon
Läsplatta✔ Surfplatta
Skrivbord✔ Skrivbord

Globala inställningar