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
    tagWat is responsive webdesign? Hoe zit het tegenwoordig met de veelgebruikte schermresoluties. Een inzicht.
  • De opties
    tagWe bekijken 2 opties: een mobiele versie tonen via script en via mediaqueries.
  • Wat is Bootstrap?
    tagWe bekijken hoe bootstrap ontstond en wat het is. We bestuderen ook enkele voorbeelden.
  • Bootstrap downloaden
    tagWaar kan je Bootstrap downloaden? Wat zijn de diverse opties (sass, ...)?
  • Welke software?
    tagHoe kan je het snelste en beste aan de slag? We bekijken enkele gratis editors.
  • De verschillende onderdelen van Bootstrap
    tagWe bekijken wat je terugvindt in de zip en wat de diverse mappen bevatten.
  • Divs en kolommen
    tagIn dit uitgebreide hoofdstuk leren we de syntax en het container & kolommenprincipe. We leren hoe je inkapselt en bepaalde zaken verbergt op smartphone.
  • Glyphicons
    tagWe leren glyphicons (iconen) gebruiken.
  • Knoppen
    tagWe ontdekken de diverse buttons.
  • Modals
    tagWe leren hoe je een modal (lightbox) gebruikt.
  • Responsive embed
    tagWe leren hoe je iframes responsive kan maken (YouTube, Google Maps, Vimeo, enz).
  • Scrollspy
    tagWe leren wat een scrollspy is en hoe je deze toepast.
  • Collapse
    tagWe leren een accordion in onze site invoegen.
  • Tooltip
    tagWe leren de tooltip op knoppen toepassen.
  • De carousel
    tagHoe maak je een slideshow?
  • Extra: scrollen doorheen de pagina via jQuery
    tagWe 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)
    tagWe 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]

Registreer

€ 10
Uw winkelwagen bevat 0 cursussen

Auteur

Koen Timmers door Koen Timmers
Lees Bio.

Specifiek

aantal bladzijden48 A4-bladzijden

voorkennis Voorkennis: HTML en CSS valt aan te raden

mac Ook voor Mac-gebruikers

tijd Onbeperkte tijdsduur

conform het leerplan dat gehanteerd wordt in het Volwassenenonderwijs

Dit leer je

Oefeningen

Webhosting

Krijg als lid van zelfstudie.be 10% korting op webhosting bij zelfhosting.com!


Gerelateerde cursussen

Gebruik in schoolverband

© 2000 - 2016 Zelfstudie.be - Alle rechten voorbehouden

Website laten maken: kerfuffle.be - Website publiceren: zelfhosting.com