Het standaardrastersysteem dat als onderdeel van Bootstrap wordt geleverd, is een raster van 940 pixels breed en 12 kolommen .

Het heeft ook vier responsieve variaties voor verschillende apparaten en resoluties: telefoon, tabletportret, tafellandschap en kleine desktops, en grote breedbeelddesktops.

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

Zoals hier wordt getoond, kan een basislay-out worden gemaakt met twee "kolommen", die elk een aantal van de 12 fundamentele kolommen beslaan die we hebben gedefinieerd als onderdeel van ons rastersysteem.

Met het statische (niet-vloeibare) rastersysteem in Bootstrap is nesten eenvoudig. Als u uw inhoud wilt nesten, voegt u gewoon een nieuwe .rowen een reeks .span*kolommen toe binnen een bestaande .span*kolom.

Voorbeeld

<div class = "rij" > 
  <div class = "span12" > 
    Niveau 1 van kolom
    <div class = "rij" > 
      <div class = "span6" > Niveau 2 </div> 
      <div class = "span6" > Niveau 2 </div> 
    </div>
  </div>
</div>

Variabelen in MINDER

In Bootstrap zijn een handvol variabelen ingebouwd voor het aanpassen van het standaard 940px-rastersysteem, hierboven beschreven. Alle variabelen voor het raster worden opgeslagen in variables.less.

Hoe aan te passen?

Het wijzigen van het raster betekent het wijzigen van de drie @grid*variabelen en het opnieuw compileren van Bootstrap. Wijzig de rastervariabelen in variables.less en gebruik een van de vier gedocumenteerde manieren om opnieuw te compileren . Als je meer kolommen toevoegt, zorg er dan voor dat je de CSS toevoegt voor die in grid.less.

Responsief blijven

Aanpassing van het raster werkt alleen op het standaardniveau, het 940px-raster. Om de responsieve aspecten van Bootstrap te behouden, moet u ook de rasters aanpassen in responsive.less.

Vaste lay-out

De standaard en eenvoudige 940px-brede, gecentreerde lay-out voor zowat elke website of pagina die door een enkele <div class="container">.

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

Vloeiende lay-out

<div class="container-fluid">geeft flexibele paginastructuur, min- en max-breedten en een linkerzijbalk. Het is geweldig voor apps en documenten.

<div class = "containervloeistof" > 
  <div class = "rij-vloeistof" > 
    <div class = "span2" > 
      <!--Zijbalk inhoud-->
    </div>
    <div class = "span10" > 
      <!--Lichaamsinhoud-->
    </div>
  </div>
</div>

Ondersteunde apparaten

Bootstrap ondersteunt een handvol mediaquery's om uw projecten geschikter te maken voor verschillende apparaten en schermresoluties. Dit is wat er is inbegrepen:

Wat ze doen

Mediaquery's maken aangepaste CSS mogelijk op basis van een aantal voorwaarden - verhoudingen, breedtes, weergavetype, enz. - maar richten zich meestal rond min-widthen max-width.

• Wijzig de breedte van de kolom in ons raster
• Stapel elementen in plaats van te zweven waar nodig
• Wijzig het formaat van koppen en tekst zodat ze geschikter zijn voor apparaten

Bootstrap neemt deze mediaquery's niet automatisch op, maar het begrijpen en toevoegen ervan is heel eenvoudig en vereist minimale instellingen. Je hebt een paar opties om de responsieve functies van Bootstrap op te nemen:

1. Gebruik de gecompileerde responsieve versie, bootstrap-responsive.css
2. Voeg @import "responsive.less" toe en hercompileer Bootstrap
3. Wijzig en hercompileer responsive.less als een aparte

Waarom niet gewoon opnemen? De waarheid is dat niet alles responsief hoeft te zijn. In plaats van ontwikkelaars aan te moedigen deze functie te verwijderen, denken we dat het het beste is om deze in te schakelen.

  // Liggende telefoons en omlaag
  @media ( max - breedte : 480px ) { ... }     
 
  // Van liggende telefoon naar staande tablet
  @media ( max - breedte : 768px ) { ... }     
 
  // Staand tablet naar liggend en desktop
  @media ( min - breedte : 768 px ) en ( max - breedte : 940 px ) { ... }        
 
  // Groot bureaublad
  @media ( min - breedte : 1200px ) { .. }