Vandaag de dag draait alles rond het maken van responsieve websites die voor iedereen en elk toestel toegankelijk zijn. Met mobiel surfen, tablets en computers met grote en kleine schermen is de vraag groot om een website te hebben dat er voor al deze apparaten goed uit ziet. Dat noemen we “responsive webdesign”! Voordien werd er vaak gebruik gemaakt van aparte urls zoals m.mijnwebsite.be die allemaal een andere design hadden, apart CSS bestand, een eigen PSD en zo voort. Met een responsieve website is het gedaan met die verschillen: een enkele url en layout voor elk aparaat.
Bootstrap van Twitter
Bootstrap van Twitter is een framework waarmee je gemakkelijk responsiviteit in je website kan integreren. Dit framework is onstaan nadat 2 medewerkers van Twitter besloten om hun werk te vergemakkelijken omdat ze steeds dezelfde code moesten schrijven bij het maken van een website of pagina. Iedereen die nu een responsieve website wilt maken hoeft enkel het framework in te laden en de helft van je werk is al klaar.
Bootstrap is gebasseerd op het gebruik van CSS media queries waarbij er word gekeken naar de pixelgrootte van de browser en past bepaalde css regels toe op basis van die pixelgrootte. Zo vind je in de css van bootstrap veel regels die beginnen met @media (max-width: xxx) waarbij xxx verwijst naar de pixelgrootte van de browser. Enkel bij browsers waarbij de pixelgrootte kleiner is dan xxx wordt de volgende regel toegepast. Het tegenovergestelde kan ook met @media (min-width: xxx).
Met gebruik van deze media queries kan je dus een groot aantal css-regels toepassen op alle browsers en ook een deel specifiek voor een bepaalde pixelgrootte. In het geval van bootstrap is er een onderscheid gemaakt tussen:
- @media (max-width: 480px) : voor apparaten met maximale breedte van 480px. Dit zijn vooral smartphones.
- @media (max-width: 767px) : voor apparaten met maximale breedte van 767px. Hier behoren de tablets toe.
- @media (min-width: 768px) and (max-width: 979px) : dit zijn tablets die in landschapmodus gedraaid zijn.
- @media (min-width: 979px) : computers met een klein scherm.
- @media (min-width: 1200px) : computers met een groter scherm.
Basis van Bootstrap
Bij bootstrap verdeel je de pagina in een 12 kolommenraster met twee opties:
- Fluid – De pagina wordt verdeeld over de gehele breedte van de browser. Naarmate de browser kleiner wordt wordt elke kolom kleiner in breedte.
- Fixed – Elke kolom in de pagina heeft een vaste breedte. De breedte wordt bepaald op basis van bepaalde stappen in de breedte van de browser.
Onderverdeling van layout
- Alle elementen zijn omringd door een container (fixed) of container-fluid (fluid) klasse element.
- Deze container wordt verdeeld in verschillende rijen met als klasse ‘row‘ of ‘row-fluid‘. Deze rijen zorgen voor de padding en margin van de kolommen. Zo heeft de eerste en de laatste kolom in de rij geen padding aan de respectievelijke linker en rechterkant.
- De kolommen worden ingedeeld door klasse met span* waarbij * een nummer voorstelt van 1 tot 12. Hoe groter het getal, hoe breder de kolom. Om alle kolommen in een rij naast elkaar te plaatsen is het belangrijk dat de som van deze klasse gelijk is aan 12.
Mobiele versie versnellen
Bootstrap voorziet enkele klasse die het ontwikkelen van mobiel-vriendelijke website versnelt. Zo kan men snel elementen voorzien om te tonen op een smartphone, tablet of desktop.
| Klasse | Smartphones | Tablets |
Desktops |
|---|---|---|---|
.visible-phone |
Visible | Hidden | Hidden |
.visible-tablet |
Hidden | Visible | Hidden |
.visible-desktop |
Hidden | Hidden | Visible |
.hidden-phone |
Hidden | Visible | Visible |
.hidden-tablet |
Visible | Hidden | Visible |
.hidden-desktop |
Visible | Visible | Hidden |
Bootstrap uitgebreid
Bootstrap is veel meer dan enkel alleen responsive design. Zo zit er in er een reset in van al uw elementen die standaard in html zit waardoor de elementen op de verschillende browsers hetzelfde uit ziet. Daarbovenop zorgt bootstrap voor een eigen stijl voor de standaard HTML elementen. Bootstrap bevat ook een kleine iconenset maar deze kan uitgebreid worden met Fontawesome.
Bootstrap heeft zijn eigen interface componenten zoals tabs, pills, navbar, alerts, headers en meer. Door de juiste klasse toe te voegen kunnen deze componenten worden gebruikt. De uitgebreide documenten pagina van bootstrap toont welke componenten er beschikbaar zijn en hoe u die kan gebruiken.
Bovenop de CSS biedt bootstrap ook enkele javascript plugins zoals tooltips, popovers, modals en meer. Deze javascript maakt gebruikt van jQuery en hoeft u niet te gebruiken om een responsieve website te maken.
Zelf op zoek naar een responsieve website?
Inbound helpt je graag bij het bouwen van een moderne, responsieve website. Neem contact op met ons team; en we komen graag snel op bezoek voor een eerste gesprek!
Geef een reactie