Un buon developer deve sempre saper qualcosina anche di CSS. Sì, ebbene è così, anche da qui non si scappa! Andiamo a dare un’occhiata al framework CSS per eccellenza, ovvero Bootstrap. Stiamo parlando di uno strumento essenziale per rendere responsive i vostri siti web e per velocizzare la produzione dello stile nei template.
Cerchi un’alternativa a Bootstrap? Dai un’occhiata a Tailwind, ti potrebbe interessare!
Cos’è Bootstrap
- Bootstrap è un framework front-end gratuito per uno sviluppo web più rapido e semplice
- Bootstrap include modelli di progettazione basati su HTML e CSS per tipografia, moduli, pulsanti, tabelle, caroselli di immagini e molto altro, oltre che plug-in JavaScript facoltativi.
- Bootstrap dà la possibilità al developer di creare facilmente strutture front end di tipo responsive, pertanto adatte ad ogni dispositivo, mobile e tablet.
Esistono due modi per iniziare a utilizzare Bootstrap 4 in una pagina web.
- includere Bootstrap 4 da un CDN
- scaricare Bootstrap 4 da getbootstrap.com
Bootstrap 4 è progettato per essere sensibile ai dispositivi mobili.
Per garantire il corretto rendering e il tocco dello zoom, bisogna aggiungere il tag <meta name=”viewport” content=”width=device-width, initial-scale=1″> all’interno dell’elemento <head>. La parte width=device-width imposta la larghezza della pagina in modo che segua la larghezza dello schermo del dispositivo.
La parte initial-scale=1 imposta il livello di zoom iniziale quando la pagina viene caricata per la prima volta dal browser.
Bootstrap 4 richiede un elemento contenitore che avvolge il contenuto della pagina (container) che può essere:
- .container: contenitore a larghezza fissa
- .container-fluid: contenitore a larghezza intera che copre l’intera larghezza del viewport
Il sistema a griglia di Bootstrap è realizzato in flexbox e consente di inserire fino a 12 colonne nella pagina.
Se non si desidera utilizzare tutte e 12 le colonne singolarmente, è possibile raggruppare le colonne per creare colonne più ampie.
Il sistema a griglia di Bootstrap 4 ha cinque classi:
- .col- (Piccoli dispositivi – larghezza dello schermo inferiore a 576 px)
- .col-sm- (piccoli dispositivi – larghezza dello schermo uguale o superiore a 576 px)
- .col-md- (dispositivi medi: larghezza dello schermo uguale o superiore a 768 px)
- .col-lg- (dispositivi di grandi dimensioni – larghezza dello schermo uguale o superiore a 992 px)
- .col-xl- (dispositivi xlarge – larghezza dello schermo uguale o superiore a 1200px)
Sei interessato ai nostri Corsi LaraMind di Laravel, OOP, JavaScript o framework affini? Dai un’occhiata al magico catalogo LaraMind e inizia a dare una svolta alla tua carriera di developer!
