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

Kapslade rader bör innehålla en uppsättning kolumner som summeras till antalet kolumner för dess överordnade. Till exempel .span3bör två kapslade kolumner placeras i en .span6.

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

Procent, inte pixlar

Vätskenätsystemet använder procenttal för kolumnbredder istället för fasta pixlar. Den har också samma responsiva variationer som vårt fasta rutsystem, vilket säkerställer rätt proportioner för viktiga skärmupplösningar och enheter.

Vätske rader

Gör valfri rad flytande helt enkelt genom att ändra .rowtill .row-fluid. Kolumnerna förblir exakt desamma, vilket gör det superenkelt att växla mellan fasta och flytande layouter.

Pålägg

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

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

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

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

Kräver metatagg

Inkludera viewport-metataggen för att säkerställa att enheter visar responsiva sidor korrekt.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  

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 om responsive.less som en separat fil

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 ( maxbredd : 480px ) { ... } _ _     
 
  // Liggande telefon till porträttplatta
  @media ( maxbredd : 768px ) { ... } _ _     
 
  // Stående surfplatta till liggande och skrivbord
  @media ( min - bredd : 768px ) och ( max - bredd : 980px ) { ... }        
 
  // Stort skrivbord
  @media ( min - bredd : 1200px ) { .. }