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
Usare ASP.NET Core dev tunnels per testare le applicazioni su internet
Sfruttare lo streaming di una chiamata Http da Blazor
Creare un'applicazione React e configurare Tailwind CSS
Usare un KeyedService di default in ASP.NET Core 8
Utilizzare i primary constructor in C#
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Aggiungere interattività lato server in Blazor 8
Gestione degli environment per il deploy con un workflow di GitHub
Gestire liste di tipi semplici con Entity Framework Core
Effettuare il pull di git LFS in un workflow di GitHub
Implementare il throttling in ASP.NET Core
Verificare la provenienza di un commit tramite le GitHub Actions