Bootstrap 4: come funziona e principali novità

Come funziona Bootstrap 4

Bootstrap, un progetto open source, che nasce all’interno di Twitter, per realizzare interfacce grafiche per applicativi web-based deve il suo successo alla semplicità d’uso.
La semplicità è il cardine attorno al quale i linguaggi HTML, CSS e Javascript si fondono per dare vita a siti internet usabili e facili da implementare.
Attualmente la libreria di Bootstrap è diventata uno standard nello sviluppo di siti internet e applicazioni moderne, fondendosi anche con i CMS più diffusi come WordPress e Joomla.
Il vero cuore di Bootstrap risiede nella sua struttura a 12 colonne che lo ha reso famoso, permettendo di creare vere e proprie griglie d’impaginazione proprio come nella carta stampata.
La struttura a griglia permette di impaginare con eleganza e modularità realizzando un prodotto curato e professionale.
La griglia passa da 4 a 5 misure differenti, in particolare in Bootstrap 4 la griglia si modifica nelle sua dimensione minima, nella versione extra-small (xs), passa da 768px a 576px differenziando così smartphone e tablet.
Bootstrap 4

La Struttura di Boostrap 4

Tramite opportune classi CSS è possibile inserire all’interno di una pagina web elementi come una barra di navigazione (navbar), piè di pagina (footer), contenitori, slider per immagini, cards per graficare contenuti, elementi come moduli e pulsanti di interazione.
Molti di questi componenti vedono varianti di colore e forma, applicabili sempre con semplici classi, come .success .primary .danger .info per colorare gli elementi o come suffissi -lg -sm per rendere bottoni più grandi o pià piccoli, il tutto senza aver alcuna competenza tecnica nel linguaggio CSS.
Nella più recente versione, Bootstrap 4, viene affiancato all’uso delle 12 colonne, la nuova gestione degli spazi offerta da “flex” presente nell’ultima versione di CSS3.
Tutte le problematiche di centratura verticale degli elementi nella pagina, la divisione equa degli spazi, la possibilità di omogenizzare l’altezza degli elementi stessi sono solo alcune delle caratteristiche offerte da questa nuova modalità.
Oltre al semplice utilizzo della libreria, infatti è sufficiente inserire nella pagina il collegamento al foglio di stile e degli script recuperabili dalla CDN come descritto nel tutorial ufficiale, Bootstrap permette una completa modularità e personalizzazione degli elementi.

Bootstrap 4: facile personalizzazione

La modularità deriva dal fatto di poter escludere tutti i componenti non necessari per il nostro utilizzo alleggerendo così la libreria permettendo un caricamento più rapido della pagina.
Grazie all’uso del preprocessore CSS, passato da Less a Sass nella verisone 4, si può personalizzare facilmente colori, misure e molto altro degli elementi che compongono la libreria.
Nell’ultima versione si vede anche l’introduzione di media query per gestire il differente orientamento dei dispositivi, orizzontale e verticale sono ben distinti prevedendo ora differenti comportamenti.
Anche l’unità di misura passa da pixel a rem, una misura relativa che permette di adattare al meglio le grandezze in relazione al tipo di dispositivo che si utilizza.
Anche alcuni componenti, come la navbar e il carosello, sono stati riscritti per offrire leggerezza e fluidità tali da renderli ancora più snelli e reattivi.
Infine Bootstrap 4 decreta definitivamente l’abbandono al supporto di Internet Explorer 8 e 9, browser ormai troppo vecchi e poco inclini a supportare correttamente l’evoluzione di Internet.

Note Finali su Bootstrap 4

Ultima nota, forse il cambiamento più interessante per gli sviluppatori, riguarda la documentazione, tutta nuova, riscritta e ben organizzata per rendere l’apprendimento e il suo utilizzo più facile e intuitivo.
Ad oggi risulta una libreria indispensabile per ogni sviluppatore web, se non altro per capire come anche molte altre librerie basano la logica d’impaginazione.