Sterker nog, als je gebruikt houderen rij(de niet-vloeibare versies bestaan ​​nog steeds), dan komt u automatisch met al uw inhoud in de 1024-pixel centrale kolom en kunt u de volledige paginabreedte gebruiken als u dat niet doet. 

Het rastersysteem migreren 

De grootste verandering daarna is het rastersysteem zelf. 

In versie 2 hebt u normaal gesproken rasters gemaakt op de volgende manier: 

 
Inhoud hier
 
Inhoud hier
 

Deze code geeft je twee containers die netjes de twaalf rastervakken horizontaal vullen die alle lay-outs hadden (meestal een zijbalk). 

In versie 3 is het "medium level" -raster nu het equivalent van de v2 spanklassen, dus om de vorige code voor V3 te herschrijven, doe je eenvoudig het volgende: 

 
Inhoud hier
 
Inhoud hier
 

Hoewel versie 2 slechts één niveau van rastergrootte had, heeft versie 3 nu vier niveaus. Elk niveau is afgestemd op het verwachte hoofddoelapparaat dat u verwacht dat uw eindproduct zal gebruiken. 

Deze rastereenheden worden nu als volgt genoemd: 

• Extra kleine apparaten: col-XS- *
• Kleine apparaten: col-sm *
• Middelgrote apparaten: col-MD-*
• Grote apparaten: col-LG-*

Mediaqueries worden intern door BS3 gebruikt om te beslissen welke van de bovengenoemde netwerkklassen moet worden gebruikt en de verschillende groottes worden als volgt gedefinieerd: 

• Extra klein: weergavebreedte kleiner dan 768 pixels 
• Klein: weergavegrootte groter dan of gelijk aan 768 pixels of kleiner dan 992 pixels 
• Gemiddeld: weergavegrootte groter dan of gelijk aan 992 pixels of kleiner dan 1.200 pixels 
• Groot: weergavebreedte groter dan of gelijk aan 1200 pixels 

U kunt voor BS3 meerdere versies van uw raster coderen om te beslissen welk type moet worden gebruikt bij het targeten van meerdere beeldschermen. Bijvoorbeeld als u het volgende deed: 

 
Inhoud hier
 
Inhoud hier
 
Inhoud hier
 
Inhoud hier
 
Inhoud hier
 
Inhoud hier
 
Inhoud hier
 
Inhoud hier
 

BS3 zal de containers naar behoefte verbergen en zichtbaar maken, afhankelijk van de breedte van het display van het apparaat en de werking van de mediaquery's. 

Net als bij eerdere versies van het rastersysteem, zijn er 12 kolommen horizontaal over alle verschillende grootten, dus ongeacht welke raster wordt weergegeven, krijgt u altijd nog steeds 12 rasters op elk apparaat. 

De kolombreedte zelf verandert echter wel, dus u moet mogelijk de inhoud in die rasters plannen om te profiteren van de verschillende grootten. De maten voor elk van hen zijn als volgt: 

• col-XS- *= Auto sizing, geen vaste dimensies 
• col-sm *= 60 pixels 
• col-MD-*= 78 pixels 
• col-LG-*= 95 pixels 

De gootmarge blijft in alle gevallen op 15 pixels aan elke kant van de rastercontainer, wat een totale lengte van 30 pixels oplevert. Deze grootte is consistent, ongeacht het rastergrootte niveau dat u gebruikt. 

Nesten en verschuivingen werken zoals voorheen, maar net als bij de rasters zelf, door een kleine hernoeming van de gebruikte klassen. 

Gebruik gewoon een offset om een ​​offset toe te passen col-md-offset- *, herinneren aan het vervangen van de mdmet xs, sm, of lgzoals nodig, afhankelijk van uw rastergrootte. 

Nesten gebeurt eenvoudig door containers te nestelen onder controle van de col-XX *klassen in elkaar, waar ze het formaat wijzigen en zich gedragen zoals in voorgaande BS-versies. 

De volgende voorbeelden laten de juiste manier zien om beide technieken te bereiken: 

 Niveau 1: .col-md-9 
 
 Niveau 2: .col-md-6 
 
 Niveau 2: .col-md-6 
 

In dit voorbeeld krijgt u een raster dat er als volgt uitziet: 

 .col-md-4 
 
 .col-md-4 .col-md-offset-4 
 
 .col-md-3 .col-md-offset-3 
 
 .col-md-3 .col-md-offset-3 
 
 .col-md-6 .col-md-offset-3 

Dit voorbeeld geeft u een indeling als volgt: 

BS3 brengt ook iets nieuws aan de tafel als het gaat om compenseren en nesten, en dat is iets dat kolomorden wordt genoemd. 

Als u wilt dat uw kolommen in een andere volgorde worden gepresenteerd dan hoe u ze in uw HTML-document definieert, dan kunt u de nieuwe gebruiken col-XX-pull-*en col-XX-push *klassen om uw gridlay-outs in de door u gewenste volgorde te pushen of te trekken. Bijvoorbeeld: 

8 kolommen met inhoud
 
4 kolommen met inhoud

Als u de documenten in uw document als verwacht rendert, krijgt u het volgende: 

Als u echter de bovenstaande code wijzigt om push- en pull-modifiers als volgt toe te voegen: 

8 kolommen met inhoud
 
4 kolommen met inhoud

Wanneer u uw document rendert, zou uw lay-out als volgt moeten veranderen: 

Eindelijk, als u de Minder CSS-bronversies van Bootstrap, u hebt volledige controle over de rastergroottes door de volgende variabelen te wijzigen: 

• @ Roostervormige columns: regelt het aantal roosters horizontaal (standaard 12) 
• @ Roostervormige goot breedte: de totale marge rond elk raster (standaard 30 pixels) 
• @ Roostervormige float-breekpunt: de minimale grootte waaronder we "extra kleine" apparaten hebben (standaard 768 pixels) 

Dus nu we het nieuwe rastersysteem onder controle hebben, is er nog iets dat u moet weten? 

Hoe slimmer je misschien denkt, "Maar dat is gek - met al die verschillende sets van

 
Inhoud hier
 
Inhoud hier