Hoe werkt Bootstrap?

Zoals in de vorige pagina is verteld kan je Bootstrap gebruiken om makkelijk jouw HTML op te maken zonder al te veel te CSS'en.

Bootstrap maakt gebruik van de attribuut class="". Deze attribuut gebruik je ook weleens om opmaak te doen in CSS door een eigen class naam te geven. In het geval van Bootstrap hebben ze hun eigen class namen bedacht. Zo kan je bijvoorbeeld text-success gebruiken om een groene tekst te maken.

Opdracht .1

Open een view (een .blade.php file) en stop dit stukje code in:

Maak deze woord ROOD!

Plaats in de class attribuut de classname van Bootstrap die de text rood maakt. Weet je die niet? Zie Colors · Bootstrap v5.2 (getbootstrap.com)

Jouw text is nu rood!

Je kan ook meerdere classnamen van Bootstrap tegelijk gebruiken. Zo kan je bijvoorbeeld ook een achtergrondkleur toevoegen met bg-bootstrapkleur. Om te weten welke bootstrapkleuren er zijn kan je terug kijken naar de documentatie.

Opdracht .2

Open de file van de vorige opdracht.

Voeg een Bootstrap lichtgrijze achtergrondkleur (kleur light) toe aan de .

Jouw span heeft nu een rode text met een grijze achtergrondkleur.

Buttons

Bootstrap heeft ook voorgekauwde opmaak voor Buttons. Zie Buttons · Bootstrap v5.2 (getbootstrap.com)

Zoals je ziet valt het op dat ze dezelfde classnamen gebruiken om kleuren van een element aan te geven. Deze kleuren worden standaard door bootstrap ingesteld en kan dus ook voor andere compententen gebruikt worden.

Opdracht .3

Open de file van de vorige opdracht

Maak een button element aan met een tekst "Klik hier"

Voeg een dark button class toe aan de button. Zorg ervoor dat je checkt welke classnamen je allemaal moet toevoegen om het te laten werken! Buttons · Bootstrap v5.2 (getbootstrap.com)

Je hebt nu een button met een opmaak van Bootstrap gebruikt!

Wat lever je in?

Een screenshot van jouw blade.php file waarin je hebt gewerkt met Bootstrap

Andere componenten

Zo zijn er veel meer andere elementen die je kan opmaken. Een button met een Bootstrap opmaak is er een van. Als je meer wil zien wat Bootstrap kan aanbieden, dan raden we je ten zeerste aan om de documentatie van Bootstrap te gaan kijken:

Get started with Bootstrap · Bootstrap v5.2 (getbootstrap.com)

Wat heb je geleerd?

Je hebt geleerd hoe Bootstrap in elkaar zit

Je hebt geleerd hoe je tekst- en achtergrondkleuren gebruikt.

Je hebt geleerd welke standaardkleuren Bootstrap heeft

Je hebt geleerd hoe je een button maakt met een Bootstrap thema.