Per ricapitolare questa serie di script che ci hanno fatto conoscere le novità riguardanti Bootstrap 5.0, facciamo un elenco di tutti i piccoli accorgimenti che dobbiamo tenere in considerazione per eseguire una corretta migrazione dalla versione precedente.
La prima grande novità la troviamo nel grid-system con l'introduzione di un nuovo breakpoint: xxl per le viewport maggiori di 1400px. La distanza tra le colonne è stata ridotta di circa un terzo passando da una dimensione di 30px a una più gestibile 1.5rem, adeguando il cambiamento a tutte le classe di utility, e aggiungendo anche .g-*, .gx-* e .gy-* per il controllo separato dei gutters verticali e orizzontali. Come conseguenza anche la classe .no-gutters è stata rinominato .g-0.
Tutte le classi di posizionamento che includevano le parole right* e left* sono state rinominate in favore di start e end. Per precisione dovremmo aggiornare il codice ovunque abbiamo utilizzato le seguenti classi:
- .left- .right-
- .float-*
- .border-*
- .rounded-*
- .ml-*
- .pl-*
- .text-*
La tipografia subisce dei miglioramenti dietro le quinte con la riscrittura di molti mixin e maps. Per la nostra applicazione questo non comporta alcun cambiamento, ma è bene sapere che le classi .font-weight-* e .font-style-* sono state rinominate in .fw-* e .fst-* ed è stata invece completamente rimossa .text-hide. Inoltre le classi .text-* non applicheranno più effetti di hover o focus ai link, per i quali occorrerà invece utilizzare la classe .link-.
Con il rilascio della versione 5.0, i mixins, che nelle versioni precedenti erano stati segnati come deprecati, sono stati definitivamente rimossi. Tra questi troviamo:
- hover
- float()
- text-hide()
- visibility()
- Molti mixins riguardanti le palette di colori e l'applicazione di color schemes
In conclusione anche i mixin delle media query hanno subito un grande cambiamento, applicando lo stile direttamente sulle classi in ingresso e non sulle successive. Dunque media-breakpoint-down() e media-breakpoint-between() dovranno essere corrette in base al contesto in quanto, se fino alla versione 4.X scrivavamo media-breakpoint-down(md) per specificare tutte le viewports minori di lg, ora possiamo farlo scrivendo media-breakpoint-down(lg).
Come sempre per ulteriori modifiche o approfondimenti la documentazione https://getbootstrap.com/docs/5.0/migration/ riporta tutti i dettagli e le casistiche d'uso.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Miglioramenti nelle performance di Angular 16
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Gestire liste di tipi semplici con Entity Framework Core
Utilizzare politiche di resiliency con Azure Container App
.NET Conference Italia 2023
Utilizzare Azure AI Studio per testare i modelli AI
Reactive form tipizzati con modellazione del FormBuilder in Angular
Usare le navigation property in QuickGrid di Blazor
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Come EF 8 ha ottimizzato le query che usano il metodo Contains