Menu

Naar inhoud

Websites

Inloggen NL - EN

5. Responsive grid

UGent volgt het grid systeem van Bootstrap, meer informatie is hier te vinden:

http://getbootstrap.com/css/#grid

5.1 Responsive grid

Hieronder een voorbeeld van de kolomstructuur op mobiel, tablet (staand en liggend) en desktop.

Grid op mobiel
4 kolommen
Grid op tablet portrait
6 kolommen
Grid op tablet landscape
12 kolommen
Grid op desktop apparaat
12 kolommen

5.2 Responsive gedrag contentblokken

Hieronder het responsive gedrag van de contentblokken op mobiel, tablet (staand en liggend) en desktop.

Zie voorbeeld 7.1 Basis layout

Blokken op mobiel
4 kolommen
Blokken op tablet portrait
6 kolommen
Blokken op tablet landscape
12 kolommen
Blokken op desktop apparaat
12 kolommen

5.3 Alternatief responsive gedrag contentblokken

Bij het 12 koloms grid komt het ook voor dat contentblokken uitgelijnd worden in de verhouding 1/3 - 2/3 (licht blauwe vlakken) of op 1/4 van de breedte van de pagina (groene blokken).

Zie voorbeelden 7.2 Keuzepagina7.3 Detailpagina7.4 Detailpagina met paginanavigatie

Blokken op tablet landscape
12 kolommen
Blokken op desktop apparaat
12 kolommen

Naar boven