Frameworks – Bootstrap

Workflow Bootstrap:

Oefening: maak een map aan die je bootstrap oef noemt en open de map in visual studio code.

Volg de link naar https://getbootstrap.com. Hier kan je de bestanden downloaden om lokaal te hosten of je kan op Get Started klikken en de Starter Template kopiëren.

Oefening: Maak een pagina aan in de map bootstrap oef via Visual Studio Code. Noem die index.html. En kopieer de starter template op de pagina.

Als je deze template in een html bestand plaatst dan zie je een webpagina met weinig inhoud. We kunnen hier de basis structuur in herkennen en zien dat er enkele extra bestanden worden ingeladen voor de CSS en JS code van bootstrap ter beschikking te hebben.

Plaatsen we nu een klasse “text-danger” op onze titel dan zien we onmiddellijk dat deze een andere tekst kleur krijgt hoewel we nog geen CSS hebben geschreven. Dat is omdat Bootstrap deze klasse definieert en we bootstrap ingeladen hebben. Hierdoor kunnen we dus sneller projecten maken aangezien we enkel de klassen moeten aanroepen (eens we deze gememoriseerd hebben natuurlijk).

Passen we de klasse aan naar “text-warning” dan hebben we weer een andere tekstkleur. We kunnen ook de achtergrond kleur aanpassen bijvoorbeeld met “bg-primary” of “bg-info” of “bg-success”. BG staat hierbij voor background, en de daaropvolgende woorden (primary, danger, …) zijn kleuren die in Bootstrap ingebouwd zijn.

Kijken we bij documentatie via een “search” op “color” dan zien we hier een overzicht.

Oefening: Maak een tweede pagina aan in de map bootstrap oef via Visual Studio Code. Noem die alerts.html

Naast klassen aanroepen kunnen we ook HTML stukjes (en Javascript) kopieren.

Kijk eens naar de Componenten en zoek in Alerts naar een leuke popup. Deze met een knop om de alert te sluiten kunnen we kopieren en in ons bestand plaatsen en BOOM. Eventueel passen we de “alert-danger” klasse aan voor een andere kleur of passen we de tekst aan.

Kopieer de code op de pagina.

Oefening: Maak een derde pagina aan in de map bootstrap oef via Visual Studio Code en noem die nav.html

Als we een navbar kopiëren dan hebben we ook onmiddellijk een responsieve navigatie. Wie weet wat responsief wil zeggen binnen webdevelopment?

Kopieer de code op de pagina.

Oefening: Maak een map img aan in de map bootstrap oef. Download de images uit deze map en sla ze op in jouw map img.

Maak een vierde pagina aan in de map bootstrap oef via Visual Studio Code en noem die carousel.html

Als laatste voorbeeld kunnen we een carrousel kopiëren. Wie weet wat een carrousel is?

Kopieer de code op de pagina.

Als we de code kopiëren zien we geen afbeelding doorkomen. Logisch want de SRC staat nog op … We moeten deze eerst aanpassen, en voilà.

Oefening: combineer hetgeen je nu gezien hebt op 1 pagina. Zoals in dit voorbeeld.

Oefening:

Beste IT-mens,

Onze webontwikkelaar is vorige week opgepakt met gesjoemel met zwart geld en heeft als laatste actie onze site verwijderd. We zitten dus in de put! Op je website hebben we gezien dat ook jij mooie dingen kan maken en dit hebben wij nodig en liefst zo goedkoop mogelijk!

Aangezien we onze budgetten slecht beheren, kunnen we je maar betalen voor 3,5 uur. Sorry hiervoor, maak er iets mooi van!

Onze vereisten:

1. Navigatie bar met minimum 3 pagina’s (home, foto’s en contactinformatie).

In de navigatie bar rechtsboven een icoon om in te loggen.

2. Een aangepaste lay-out.

3. Op de home: aantrekkelijke landingspagina, niet te flashy, mooie verhouding afbeeldingen/tekst.

4. Op de foto-pagina een leuke weergave van foto’s.

5. Op de contactinformatie: beschrijving adres, foto van de locatie, Google maps kaartje.

Veel succes!