Standardrutnätssystemet som tillhandahålls som en del av Bootstrap är ett 940px-brett rutnät med 12 kolumner .

Den har också fyra responsiva varianter för olika enheter och upplösningar: telefon, surfplatta, liggande bord, små stationära datorer och stora bredbildsdatorer.

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

Som visas här kan en grundläggande layout skapas med två "kolumner", som var och en spänner över ett antal av de 12 grundkolumner som vi definierade som en del av vårt rutsystem.

Med det statiska (icke-flytande) rutsystemet i Bootstrap är kapslingen lätt. För att kapsla ditt innehåll, lägg bara till en ny .rowoch uppsättning .span*kolumner i en befintlig .span*kolumn.

Exempel

<div class = "rad" > 
  <div class = "span12" > 
    Nivå 1 i kolumn
    <div class = "rad" > 
      <div class = "span6" > Nivå 2 </div> 
      <div class = "span6" > Nivå 2 </div> 
    </div>
  </div>
</div>

Variabler i LESS

Inbyggda i Bootstrap är en handfull variabler för att anpassa standard 940px-rutnätssystemet, dokumenterat ovan. Alla variabler för rutnätet lagras i variables.less.

Hur man anpassar

Att ändra rutnätet innebär att ändra de tre @grid*variablerna och kompilera om Bootstrap. Ändra rutnätsvariablerna i variables.less och använd ett av de fyra dokumenterade sätten att kompilera om . Om du lägger till fler kolumner, se till att lägga till CSS för de i grid.less.

Förbli lyhörd

Anpassning av rutnätet fungerar bara på standardnivån, 940px rutnätet. För att behålla de responsiva aspekterna av Bootstrap måste du också anpassa rutnäten i responsive.less.

Fast layout

Standard och enkla 940px bred, centrerad layout för nästan vilken webbplats eller sida som helst som tillhandahålls av en enda <div class="container">.

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

Flytande layout

<div class="container-fluid">ger flexibel sidstruktur, min- och maxbredder och en vänstra sidofält. Det är bra för appar 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>

Enheter som stöds

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

Vad dem gör

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

Bootstrap inkluderar inte automatiskt dessa mediefrågor, men att förstå och lägga till dem är mycket enkelt och kräver minimal installation. Du har några alternativ för att inkludera de responsiva funktionerna i Bootstrap:

1. Använd den kompilerade responsiva versionen, bootstrap-responsive.css
2. Lägg till @import "responsive.less" och kompilera om Bootstrap
3. Ändra och kompilera responsive.less som en separat

Varför inte bara inkludera det? Sanningen att säga, allt behöver inte vara lyhört. Istället för att uppmuntra utvecklare att ta bort den här funktionen tycker vi att det är bäst att aktivera den.

  // Liggande telefoner och neråt
  @media (max-width: 480px) { ... }
 
  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }
 
  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 940px) { ... }
 
  // Large desktop
  @media (min-width: 1200px) { .. }