Jakob Lierman Webapplicaties I
Hoofdstuk 10
Bootstrap is een open source mobile-first front-end framework voor het bouwen van websites.
Redenen om voor bootstrap te kiezen:
- Responsive, mobile first
- Grid systeem
- Compatible met alle moderne browsers
- Goede look & feel
- Snel en schaalbaar
- Consistente interface
- Gemakkelijk aanpasbaar
- Tal van voordelen
- Integreerbaar met content management systemen
Bootstrap downloaden en uitpakken in root folder.
Starter tamplate
Mobile first
Om correct weer te geven bij zoomen, viewport media tag toevoegen:
Bootstrap is responsive en definieert vier breakpoints:
Typography en links
Default font-size is 14px.
Default line-height is 1.428.
1
, Jakob Lierman Webapplicaties I
h1-h6:
Links worden blauw weergegeven on onderlijnd bij hover.
Grid systeem
Bootstrap vereist een containing element om de inhoud van de website en het grid systeem te
kunnen bevatten. Container kunnen niet genest worden.
Maak gebruik van .container voor een responsive container met een vaste breedte.
Maak gebruik van .container-fluid voor een container die de volledige breedte van de viewport in
beslag neemt.
Grid systemen worden gebruikt voor het vastleggen van de pagina layout in rijen en kolommen.
Bootstrap gebruikt een grid bestaande uit 12 units die je gebruikt om je web pagina in te delen.
Gridsysteem is responsive, wordt als volgt weergegeven:
Aan de hand van voorgedefinieerde klassen .col-xx-n bepaal
je hoeveel uniets een element op een bepaald device
inneemt.
- xx is het devicetype (xs, sm, md, lg: zie hierboven)
- n is het nummer van 1 tot 12
2
Hoofdstuk 10
Bootstrap is een open source mobile-first front-end framework voor het bouwen van websites.
Redenen om voor bootstrap te kiezen:
- Responsive, mobile first
- Grid systeem
- Compatible met alle moderne browsers
- Goede look & feel
- Snel en schaalbaar
- Consistente interface
- Gemakkelijk aanpasbaar
- Tal van voordelen
- Integreerbaar met content management systemen
Bootstrap downloaden en uitpakken in root folder.
Starter tamplate
Mobile first
Om correct weer te geven bij zoomen, viewport media tag toevoegen:
Bootstrap is responsive en definieert vier breakpoints:
Typography en links
Default font-size is 14px.
Default line-height is 1.428.
1
, Jakob Lierman Webapplicaties I
h1-h6:
Links worden blauw weergegeven on onderlijnd bij hover.
Grid systeem
Bootstrap vereist een containing element om de inhoud van de website en het grid systeem te
kunnen bevatten. Container kunnen niet genest worden.
Maak gebruik van .container voor een responsive container met een vaste breedte.
Maak gebruik van .container-fluid voor een container die de volledige breedte van de viewport in
beslag neemt.
Grid systemen worden gebruikt voor het vastleggen van de pagina layout in rijen en kolommen.
Bootstrap gebruikt een grid bestaande uit 12 units die je gebruikt om je web pagina in te delen.
Gridsysteem is responsive, wordt als volgt weergegeven:
Aan de hand van voorgedefinieerde klassen .col-xx-n bepaal
je hoeveel uniets een element op een bepaald device
inneemt.
- xx is het devicetype (xs, sm, md, lg: zie hierboven)
- n is het nummer van 1 tot 12
2
