Bootstrap in Laravel
Voordat we beginnen met designen en code te schrijven in jouw .css file, wil ik jullie eerst introduceren aan een front-end CSS framework: Bootstrap.
Wat is Bootstrap?
- Bootstrap is een CSS Framework voor het ontwikkelen van responsive en mobile-first websites.
- Betekenis responsiveness: het design past zich aan op basis van jouw resolutie van het scherm.
- Betekenis mobile-first: de applicatie is gedesigned voor mobiel. Vaak doen developers mobile-first, omdat het tegenwoordig de meest gebruikte device is.
- Met bootstrap kan je gemakkelijk een voorgekauwde opmaak toevoegen aan jouw element zonder zelf te gaan stylen in jouw .css file.
- Ook kan je met bootstrap jouw content makkelijk indelen. Zie het een beetje hetzelfde als het grid-systeem van CSS.
Wat zijn de voordelen van Bootstrap?
- Je kan snel en gestructureerd jouw pagina's designen zonder iets te schrijven in jouw CSS code.
- Bootstrap heeft de meeste belangrijke opmaak kant en klaar voor jouw voorgekauwd.
- Een zeer breed assortiment van verschillende CSS componenten. (zie hun documentatie!)
Wat zijn de nadelen van Bootstrap?
- Elke webdeveloper kent boostrap wel. Dus elke webdeveloper kan meteen zien of iets gemaakt is in Bootstrap en kan gezien worden als 'niet origineel'.
- Het kan soms conflicten met jouw zelfgemaakte opmaak (als je die hebt).
- Om een eigen smaakje van te maken moet je alsnog gaan opmaken met CSS. Dus flexibel is het niet helemaal. (daarvoor kan je dan Tailwind gebruiken)
Hoe gebruik je Bootstrap in Laravel?
Om Bootstrap te gebruiken in jouw Laravel project, moet je eerst Bootstrap toevoegen met Node.js (NPM):
- Open jouw terminal van jouw editor
- Voer deze commando uit:
composer require laravel/ui - Nu installeren we bootstrap met:
php artisan ui bootstrap - Vervolgens run je jouw CSS, en dus ook jouw bootstrap!:
npm install && npm run dev
Wat handige bronnen:
How to install Bootstrap 5 in Laravel 9? - MyWebtuts.com
What is Bootstrap (w3schools.com)
Cheatsheet ยท Bootstrap v5.0 (getbootstrap.com)
Gefeliciteerd! Je hebt nu bootstrap in jouw Laravel project!