Bootstrap 4 vs Bootstrap 5
Bootstrap è in continua evoluzione e pertanto è necessario, per un Web Designer, attenzionare gli aggiornamenti del framework. Dalla versione 4 di Bootstrap alla versione 5 sono stati apportati significativi cambiamenti. Ecco un elenco delle maggiori novità:
Rimozione di JQuery e passaggio a Vanilla JS
La novità più importante riguarda l’abbandono definitivo di JQuery, una libreria JavaScript ricca di funzionalità che semplifica molte delle comuni funzioni che gli sviluppatori utilizzano sui loro siti web; il team di sviluppo di Bootstrap si è reso conto che negli ultimi anni JQuery ha perso molta popolarità vista la tendenza di scrivere App Single Page con altri framework come: React, Angular e Vue.
Bootstrap 5 ha definitivamente eliminato la dipendenza di jQuery interrompendone il supporto a favore di VanillaJS che permette di scrivere codici efficienti senza preoccuparsi delle dimensioni o di funzioni non essenziali, con il conseguente alleggerimento dei file e quindi da tempi di caricamento anche nettamente inferiori rispetto alle precedenti versioni di Bootstrap .
Addio Internet Explorex
Il team di Bootstrap ha deciso di sospendere il supporto per le versioni Internet Explorer precedenti alla IE11 poiché non supporta i moderni standard Javascript a differenza di altri Browser come Chrome, Firefox ed Edge.
Miglioramento della griglia di Bootstrap
Il tratto distintivo di Bootstrap è sempre stato la griglia a 12 colonne pertanto il team di sviluppo ha deciso di migliorare le sue caratteristiche responsive. Già nella versione 4 del framework front end era possibile creare i layout utilizzando le griglie CSS. In Bootstrap 5 la funzione rimane invariata, ma vi sono state aggiunte delle estensioni e più precisamente il breackpoint xxl. Inoltre, sono state aggiunte nuove classi per il vertical spacing.
In Bootstrap 5 la larghezza della griglia sarà definita in rem e non in px. rem sta per “root em” che significa uguale al valore calcolato di font-size sull’elemento root.
Ad esempio, 1 rem è uguale alla dimensione del carattere dichiarato nell’elemento HTML e se non dichiarato corrisponde alla dimensione del font di default e cioè 16px.
Inoltre sono state aggiunte 3 nuove classi che potranno essere aggiunte a .row :
.gx-* controlla la larghezza orizzontale, gy-* controlla la larghezza verticale e g-* controlla la larghezza orizzontale e verticale
Nuovi breackpoint per la classe container
I container sono l’elemento di layout più semplice in Bootstrap e sono necessari quando si utilizza il sistema di griglia predefinito . Vengono utilizzati per contenere, riempire e (a volte) centrare il contenuto al loro interno e sebbene i possano essere nidificati, la maggior parte dei layout non richiede un contenitore nidificato. Bootstrap viene fornito con tre diversi contenitori:
.container, che imposta a max-width ad ogni punto di interruzione reattivo,.container-fluid, che ha la proprietà width 100% a tutti i punti di interruzione e .container-{breakpoint}, che ha width: 100% fino al punto di interruzione specificato (è proprio questa classe la novità).
RFS -Responsive Font Size
Bootstrap 5 permette di impostare le dimensioni responsive, cioè che si adatta automaticamente a qualsiasi finestra su qualsiasi dispositivo, dei caratteri in modo predefinito grazie al meccanismo RFS che calcolerà in automatico la dimensione dei caratteri in base alle dimensioni della finestra del browser del dispositivo utilizzato.
Ottimizzazione della Navbar
Navbar, uno dei componenti principali di Bootstrap, in questa versione 5 è stato migliorato e reso ancora più semplice da utilizzare grazie alle seguenti modifiche:
- Rimozione della ridondanza del parametro display: inline-block dagli elementi flex children
- Rimozione del valore line-height: inerit
- Usi delle proprietà abbreviate “shorthand”
- Rimozione dei margini della classe .brand
- Aggiunta di un dropdown scuro mediante la classe .dropdown-menu-dark
Nuova libreria di icone
Per la prima volta in assoluto Bootstrap 5 ha una nuovissima libreria di icone SVG realizzata con cura. Le icone sono già disponibile e pronte per essere utilizzate nei progetti e per conoscere il nuovo set di icone e le modalità di inserimento nel tuo progetto, visita la sezione icone di bootstrap.
