04: Opdracht 3.4: (optioneel) Bootstrap

[frankkruidhofeducom]

Dit is een optionele opdracht als je binnen 3 weken na start trainee ship bij deze opdracht aankomt, overleg met de docent of je deze opdracht gaat maken

• Lees als je nog niet bekend bent met Bootstrap CSS op W3Schools Bootstrap 4 de secties [BS4 Home] t/m [BS4 Jumbotron] en [BS4 Cards] t/m [BS4 Inputs]
• Voor meer informatie kan je ook kijken op de de website van Bootstrap.
• Verwijder de <link> tag die verwijst naar de CSS en verwijder CSS/stylesheet.css.
• Voeg een verwijzing naar Bootstrap CDN toe.
  
  
• Voeg bootstrap classes toe om het volgende voor elkaar te krijgen:
  • Zorg dat de webpagina er op telefoons en op tablets goed uit ziet.
  • Zorg ervoor dat op geen enkel device er 'horizontaal' hoeft te worden gescrolld
  • Op een telefoon in portrait stand (col), is het menu een dropdown menu en staat de producten in de webshop onder elkaar.
  • Op een telefoon in landscape stand (col-sm), is het menu een dropdown menu en staan de producten twee aan twee in de webshop.
  • Op een tablet in portrait stand (col-md) is het menu normaal en staat de producten met 3 naast elkaar.
  • Op een tablet in landscape stand (col-lg) is het menu normaal en staan de producten met 4 naast elkaar.
  • De uitloggen knop heeft tot col-lg alleen de tekst en bij grotere schermen 'tekst + naam-van-de-ingelogde-gebruiker'
  • Voeg een winkelwagen icoon toe aan de winkelwagen knop bij schermen groter dan 'md'
  • Als er een dropdown menu is dat de pagina de header naast het dropdown menu toont in plaats van eronder.
    
    
• Verklein het window om te zien of het goed schaalt.
  • TIP: Firefox heeft onder Web-ontwikkelaars-tools een optie 'responsieve design modus' die erg handig werkt om te wisselen van groottes)
    
    
• Zoek je IP adres (iets van 192.168.x.x) van je eigen laptop op en ga op je telefoon naar http://{IP-adres}/webshop-educom-database
  • Windows: gebruik het commando ipconfig /all in een command-window
  • Linux: gebruik je het commando ifconfig /all in een terminal
  • Mac: gebruik het commando ipconfig getifaddr en0 in een terminal
    
    
• Commit alles naar je lokale repository en push het naar GitHub.