Front End
Boostrap 5 alpha 2

Bootstrap 5 alpha 2

Frank Vessia
08 ott 2020
Tempo di lettura: 2 minuti, 10 secondi

Un altro importante aggiornamento di Bootstrap che lo avvicina sempre di più alla sua final release


Bootstrap 5 è stato rilasciato oramai da qualche mese e in milioni si sono fiondati a scaricarlo per iniziare ad implementarlo nei propri progetti o nei vari temi premium (anche questo blog è realizzato con questa ultima versione rilasciata). Come saprai con la versione 5 la caratteristica più importante è stata l'abbandono del jQuery e di Internet Explorer (era ora direi) cosa che ha fatto discutere parecchio la comunità con le solite schiere dei pro e dei contro ma a aprte questo tutto il framework ha subito grandi cambiamenti e in questa nuova alpha 2 sono state introdotto alcune caratteristiche, vediamo quali

Aggiornamento della navbar della documentazione

Boostrap 5 alpha 2 navbarSebbene questa non sia un update del framework in se, rappresenta sicuramente un bel bonus per gli sviluppatori, infatti come dice Bootstrap stesso, è un restyle della barra di navigazione delle pagine della documentazione, utile per chi vuole una buona base di partenza. Tutta la navbar è stata ripulita e ottimizzata per device piccoli e alcuni link sono stati rimossi da mobile perchè poco pratici; anche la subnav è stata ridisegnata per espandersi a pieno sul mobile e sonos tate aggiunte icone diverse per glis tati expanded e collapsed.

Dark caroulsel

Nuova class .carousel-dark da poter aggiungere ad ogni .carousel per ottenere testi e indicatori in nero. Inoltre per ottimizzare il tutto e non aggiungere peso è stato usato il CSS filter per invertire l'SVG dei controlli.

Dark dropdowns

Boostrap alpha 2 dark dropdownsDopo quasi 9 anni dalla prima versione di Bootstrap hanno finalmente introdotto i dropdowns in versione dark, basterà quindi aggiungere la class .dropdown-menu-dark a qualsiasi dropdown. Questo rappresenta l'inizio di quello che sarà lo sviluppo futuro di questa classe che per ora non è stata approfondita nel dettaglio ma che promettono sarà ampiamente trattata nelle prossime release minori.

Bottone di chiusura ridisegnato

Il bottone per la chiusura X è stato completamente ridisegnato, nel nome nella forma nello stato focus e nel colore. Hanno abbandonato × a favore di un SVG direttamente nel css via background-image e la classe ora è .btn-close con anche il support per la versione bianca sempre tramite css filter.

Utilities di posizionamento

Bootstrap 5 alpha 2 posizionamentiSimpatica aggiunta di alcune classi utili al posizionamento di elementi come puoi vedere in figura, top, right, bottom e left con la possibilità di definire in partenza 0, 50% o 100% il tutto combinabile con la nuove fuznionia translate che permettono di centrare elementi agli angoli o ai bordi.

la lista di altre piccole modifiche e inserimenti è molto più lunga e in costante aggiornamento, l'alpha 3 è già in programma e prevede interessanti aggiornamenti come la riscrittura degli input group o l'aggiunta di utilities per il font-size.