Bootstrap 4 rastersysteem

Bootstrap 4 rastersysteem

Het rastersysteem van Bootstrap maakt maximaal 12 kolommen over de pagina mogelijk.

Als u niet alle 12 kolommen afzonderlijk wilt gebruiken, kunt u de kolommen groeperen om bredere kolommen te maken:

Het rastersysteem van Bootstrap is responsief en de kolommen worden opnieuw gerangschikt afhankelijk van de schermgrootte: op een groot scherm ziet het er misschien beter uit als de inhoud in drie kolommen is georganiseerd, maar op een klein scherm zou het beter zijn als de inhoudsitems waren gestapeld boven op elkaar.

Rasterklassen

Het Bootstrap 4-rastersysteem heeft vijf klassen:

• .col-(extra kleine apparaten - schermbreedte kleiner dan 576px)
• .col-sm-(kleine apparaten - schermbreedte gelijk aan of groter dan 576px)
• .col-md-(gemiddelde apparaten - schermbreedte gelijk aan of groter dan 768px)
• .col-lg-(grote apparaten - schermbreedte gelijk aan of groter dan 992px)
• .col-xl-(xgrote apparaten - schermbreedte gelijk aan of groter dan 1200px)

De bovenstaande klassen kunnen worden gecombineerd om meer dynamische en flexibele lay-outs te creëren.

Tip: Elke klasse wordt opgeschaald, dus als u dezelfde breedtes voor smen wilt instellen md, hoeft u alleen op te geven sm.

Regels voor rastersysteem

Enkele regels voor het Bootstrap 4-rastersysteem:

• Rijen moeten binnen een .container(vaste breedte) of .container-fluid(volledige breedte) worden geplaatst voor een juiste uitlijning en opvulling
• Rijen gebruiken om horizontale groepen kolommen te maken
• Inhoud moet in kolommen worden geplaatst en alleen kolommen mogen directe onderliggende rijen zijn
• Vooraf gedefinieerde klassen zoals .row en .col-sm-4zijn beschikbaar voor het snel maken van rasterlay-outs
• Kolommen creëren goten (gaten tussen kolominhoud) via opvulling. Die opvulling wordt in rijen gecompenseerd voor de eerste en laatste kolom via negatieve marge aan.rows
• Rasterkolommen worden gemaakt door het aantal van 12 beschikbare kolommen op te geven dat u wilt overspannen. Drie gelijke kolommen zouden bijvoorbeeld drie . gebruiken.col-sm-4
• Kolombreedtes zijn in procenten, dus ze zijn altijd vloeiend en hebben een grootte ten opzichte van hun bovenliggende element
• Het grootste verschil tussen Bootstrap 3 en Bootstrap 4 is dat Bootstrap 4 nu flexbox gebruikt in plaats van floats. Een groot voordeel van flexbox is dat rasterkolommen zonder een opgegeven breedte automatisch worden opgemaakt als "kolommen met gelijke breedte" (en gelijke hoogte). Voorbeeld: Drie elementen met .col-smzullen elk automatisch 33,33% breed zijn vanaf het kleine breekpunt en hoger. Tip: Wil je meer weten over Flexbox, lees dan onze CSS Flexbox Tutorial .

Basisstructuur van een Bootstrap 4-raster

Het volgende is een basisstructuur van een Bootstrap 4-raster:

Eerste voorbeeld: maak een rij ( <div class="row">). Voeg vervolgens het gewenste aantal kolommen toe (tags met de juiste .col-*-*klassen). De eerste ster (*) staat voor het reactievermogen: sm, md, lg of xl, terwijl de tweede ster een getal vertegenwoordigt, dat voor elke rij altijd 12 moet zijn.

Tweede voorbeeld: in plaats van een nummer aan elk toe te voegen col, laat Bootstrap de lay-out af om kolommen met gelijke breedte te maken: twee "col"elementen = 50% breedte voor elke kolom. drie cols = 33,33% breedte voor elke col. vier cols = 25% breedte, enz. U kunt ook gebruiken .col-sm|md|lg|xlom de kolommen responsief te maken.

Rasteropties

De volgende tabel vat samen hoe het Bootstrap 4-rastersysteem werkt op verschillende schermformaten:

Voorbeelden

De volgende hoofdstukken tonen voorbeelden van rastersystemen voor verschillende apparaten en schermbreedtes:

• Gestapeld-naar-horizontaal
• Extra kleine indeling
• Kleine apparaten
• Middelgrote apparaten
• Grote apparaten
• Extra grote apparaten
• Meer rastervoorbeelden