4.3 bootstrap 3
0 likes243 views
HTML Module 4 Les 4.3 Bootstrap t.b.v. studenten MBO Rijnland Leiden Applicatie en Mediaontwikkeling
4.3 bootstrap 3
- 1. Bootstrap 3 HTML module 44.3 Bootstrap 3
- 2. HTML module 44.3 Bootstrap 3 Terugblik
- 3. HTML module 44.3 Bootstrap 3 The making of vindennn
- 4. HTML module 44.3 Bootstrap 3 Tijdens deze en volgende lessen creëren we d.m.v. bootstrap de fictieve site ”Vindennn” Zo doorlopen we de mogelijkheden van bootstrap. Deze les starten met de frontpage zoals hierboven afgebeeld.
- 5. HTML module 44.3 Bootstrap 3 Stap 1 “de mappenstructuur” We gebruiken als start een index.html en style.css
- 6. HTML module 44.3 Bootstrap 3 Stap 2 “ De basispagina ‘index.html’ ”
- 7. HTML module 44.3 Bootstrap 3 Stap 3 “Container t.b.v. boostrap” Class Container is de start t.b.v. bootstrap. mt-3 is bootstrap de m staat voor margin en de t voor top. Meer informatie klik op link op de site voor bootstrap Spacing
- 8. HTML module 44.3 Bootstrap 3 Stap 4 “De header” De header krijgt de class row zoals noodzakelijk voor bootstrap. Binnen de row vind je een article t.b.v. het logo die geplaatst is in een col-md-2. Naast een article is het 2e gedeelte van deze row een nav van col-md-10 dit maakt 12 bij elkaar. pt-3 = padding top zie link op website naar spaces D-flex en justify content heeft met flex-box te maken hier staat ook een link op html website.
- 9. HTML module 44.3 Bootstrap 3 Stap 4 “De header” In het nav gedeelte wordt gebruik gemaakt van de class nav-link t.b.v. bootstrap. Op de html site staat een link naar alles over nav in bootstrap.
- 10. HTML module 44.3 Bootstrap 3 Stap 5 “Het middengedeelte”
- 11. HTML module 44.3 Bootstrap 3 Stap 5 “Het middengedeelte” We starten weer met een class row en verdelen deze in 2 kolommen van 6. d.m.v. col-md-6. Daarnaast gebruiken we voor de img de class img-fluid vanuit bootstrap die er voor zorgt dat het plaatje precies de ruimte van de kolom gebruikt. Daarnaast maken we gebruik van een button vanuit bootstrap.
- 12. HTML module 44.3 Bootstrap 3 Stap 5 “Het middengedeelte” Op de html site staan de verwijzingen naar de bootstrap m.b.t. buttons etc. Ik heb wel wat extra style aangebracht zoals shadow een border-radius dit is dus geen bootstrap. Op de html-site plaats ik instructiefilmpjes hoe ik dit gemaakt hebt met uitleg.
- 13. HTML module 44.3 Bootstrap 3 Nieuwe Stof
- 14. HTML module 44.3 Bootstrap 3 Het vervolg een banner d.m.v. een bootstrap jumbotron
- 15. HTML module 44.3 Bootstrap 3 Bootstrap ’Jumbotron’
- 16. HTML module 44.3 Bootstrap 3 Bootstrap ’Jumbotron’
- 17. HTML module 44.3 Bootstrap 3 Bootstrap ’Jumbotron’
- 18. HTML module 44.3 Bootstrap 3 Bootstrap ‘modal’
- 19. HTML module 44.3 Bootstrap 3 Bootstrap ‘form’
- 20. HTML module 44.3 Bootstrap 3 Bootstrap ‘Modal en form in vindennn.nl’
- 21. HTML module 44.3 Bootstrap 3 Het vervolg overzicht categorieën d.m.v. bootstrap cards
- 22. HTML module 44.3 Bootstrap 3 Bootstrap ’Cards’
- 23. HTML module 4 Opdracht! Volgende les gaan we verder met de ‘vindennn’ site. De opdracht is breidt de website uit met jumbotron, modal, form en cards. Zorg dat het eruit ziet als het voorbeeld. Gebruik de code die ik in deze les hebt gebruikt. Zorg dat het af is voor het begin van de volgende les zodat je weet waar we het over hebben. Upload het geheel in teams in html_module_4 opdracht 4.3. 4.3 Bootstrap 3