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

Geneste rijen moeten een set kolommen bevatten die optellen tot het aantal kolommen van de bovenliggende rij. Twee geneste .span3kolommen moeten bijvoorbeeld binnen een .span6.

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

Procenten, geen pixels

Het vloeiende rastersysteem gebruikt procenten voor kolombreedtes in plaats van vaste pixels. Het heeft ook dezelfde responsieve variaties als ons vaste rastersysteem, waardoor de juiste verhoudingen voor belangrijke schermresoluties en apparaten worden gegarandeerd.

Vloeiende rijen

Maak elke rij vloeiend door simpelweg te veranderen .rownaar .row-fluid. De kolommen blijven exact hetzelfde, waardoor het supereenvoudig is om te schakelen tussen vaste en vloeiende lay-outs.

Markup

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

Nesten met vloeiende rasters is een beetje anders: het aantal geneste kolommen hoeft niet overeen te komen met de bovenliggende. In plaats daarvan worden uw kolommen op elk niveau opnieuw ingesteld omdat elke rij 100% van de bovenliggende kolom in beslag neemt.

<div class = "rij-vloeistof" > 
  <div class = "span12" > 
    Niveau 1 van kolom
    <div class = "rij-vloeistof" > 
      <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 in één bestand om uw projecten geschikter te maken voor verschillende apparaten en schermresoluties. Dit is wat er is inbegrepen:

Vereist metatag

Om ervoor te zorgen dat apparaten responsieve pagina's correct weergeven, voegt u de viewport-metatag toe.

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

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

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 : 980 px ) { ... }        
 
  // Groot bureaublad
  @media ( min - breedte : 1200px ) { .. }