Diversen

Testpagina responsive kolommen

Dit is een testpagina responsive kolommen op basis van Bootstrap framework dat in deze versie van Typo3 wordt gebruikt.

Er is gebruik gemaakt van de classen col-xs-*, col-sm-* en col-lg-*. De asterix* kan vervangen worden voor het aantal kolommen bij de drie schermbreedtes mobiel(xs), tablets(sm) en desktops(lg), waarbij het totaal binnen een row(rij) altijd 12 moet zijn. Per scherm breedte kunnen verschillende verhoudingen toegekend worden, waardoor de layout per schermtype bepaald kan worden.

Rij 1: kolom 1: col-xs-12 col-sm-12 col-lg-4; kolom 2 (afb): col-xs-12 col-sm-8 col-lg-8

Rij 2 : kolom 1: col-xs-12 col-sm-12 col-lg-4; kolom 2: col-xs-12 col-sm-8 col-lg-8

Voor het formaat van de afbeeldingen is in de eerste rij gebruik gemaakt van de Bootstrap classen col-xs-12 col-sm-8 col-lg-8. In de tweede rij is de standaard Bootstrap class img-responsive gebruikt,  die er voor zorgt dat de afbeelding lineair verkleind binnen de breedte van de kolom.

Ter verduidelijking heeft de row(rij) een rood kader en de kolommen een blauw kader. Wanneer je je browser in de breedte versmalt, zie je de beweging van kolommen, die bij mobiel onder elkaar verschijnen.

In de cascading style sheet moet wel de positie van de row gecorrigeerd worden met -5px/-15px, en van de kolom de margin-top op 0px gesteld worden voor het content gedeelte.

Voor redacteuren zou je een paar elementen kunnen voor-definieren zoals Rij-2 met verschillende kolombreedtes. Met een stuk of drie kun je 90% van de pagina indelingen voorzien.

 

 

 

RIJ 1

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

RIJ 2

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

 

 

meer
25
Jul
weer terug
24
Jul
jong geluk