cursus Bootstrap

Deze cursus leert u via Bootstrap een responsive website bouwen. De websites die je ermee maakt zijn dus ook geschikt voor smartphone en tablet. Bootstrap is gratis en het bekendste CSS Framework.

We leren in deze handleiding aan de slag gaan met het container- en kolommenprincipe. We bestuderen hoe je bepaalde onderdelen kan verbergen en hoe ze automatisch herschalen. We leren responsive afbeeldingen, knoppen, modals (lightbox), collapse (accordion), carousel (slideshow), scrollspy, responsive tabellen, tooltip en responsive embeds in te voegen. Als extra leren we hoe je via jQuery een scrollfunctie inbouwt en animatie bij scroll leert maken.

Deze website kan je maken na afloop.

In deze cursus leer je een volledige website bouwen. Een voorkennis in HTML is aan te raden.

Inhoudsopgave

• Responsief webdesign en schermresoluties
  Wat is responsive webdesign? Hoe zit het tegenwoordig met de veelgebruikte schermresoluties. Een inzicht.
• De opties
  We bekijken 2 opties: een mobiele versie tonen via script en via mediaqueries.
• Wat is Bootstrap?
  We bekijken hoe bootstrap ontstond en wat het is. We bestuderen ook enkele voorbeelden.
• Bootstrap downloaden
  Waar kan je Bootstrap downloaden? Wat zijn de diverse opties (sass, ...)?
• Welke software?
  Hoe kan je het snelste en beste aan de slag? We bekijken enkele gratis editors.
• De verschillende onderdelen van Bootstrap
  We bekijken wat je terugvindt in de zip en wat de diverse mappen bevatten.
• Divs en kolommen
  In dit uitgebreide hoofdstuk leren we de syntax en het container & kolommenprincipe. We leren hoe je inkapselt en bepaalde zaken verbergt op smartphone.
• Glyphicons
  We leren glyphicons (iconen) gebruiken.
• Knoppen
  We ontdekken de diverse buttons.
• Modals
  We leren hoe je een modal (lightbox) gebruikt.
• Responsive embed
  We leren hoe je iframes responsive kan maken (YouTube, Google Maps, Vimeo, enz).
• Scrollspy
  We leren wat een scrollspy is en hoe je deze toepast.
• Collapse
  We leren een accordion in onze site invoegen.
• Tooltip
  We leren de tooltip op knoppen toepassen.
• De carousel
  Hoe maak je een slideshow?
• Extra: scrollen doorheen de pagina via jQuery
  We leren hoe je na een druk op een knop (bv glyphicon pijl) automatisch scrollt doorheen een pagina (via jQuery)
• Extra: animatie bij scrollen (via jQuery)
  We leren 2 dingen: animatie toevoegen aan knoppen, afbeeldingen, tekst, enz. Maar ook hoe je deze animatie pas laat starten wanneer deze in de viewport (browservenster) verschijnt.

Meer weten? Uw portie professioneel webdesign:

• Via Sass kan je veel sneller en effici?nter CSS-code genereren. [bekijk cursus]
• Leer werken met de professionele editor Sublime Text en leer via Emmet razendsnel HTML invoeren. [bekijk cursus]