Bootstrap 5: come funziona
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. E in Bootstrap 5 la semplicità ha raggiunto vette mai viste prima!
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 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, in misure differenti.
Interessante era già la versione di Bootstrap 4, ma ora è ufficialmente arrivata una versione stabile di Bootstrap 5.
Scopriamo insieme quali sono stati gli aggiornamenti principali e come funziona Bootstrap 5.
Bootstrap 5: tutte le nuove componenti
I cambiamenti nella versione di Bootstrap 5 saltano all’occhio fin dal logo, che è stato ridisegnato con un design aggiornato più luminoso. Ma le vere novità sono ben altre!
La più importante è sicuramente l’introduzione della componente offcanvas. Prevede uno sfondo configurabile a piacimento con scorrimento del corpo e posizionamento. Il bello delle componenti offcanvas è che possono essere posizionate dove meglio si preferisce attraverso gli attributi o con API JavaScript.
Ma siamo solo all’inizio perché è stata aggiunta anche la componente .accordion che ha sostituito la vecchia componente .card. La scelta è stata fatta per risolvere diversi bug che si verificavano durante il processo. La nuova componente .accordion sfrutta ancora il plug-in Collapse JavaScript, però quest’ultimo è supportato da HTML e CSS personalizzati che lo rendono ancora più semplice da utilizzare. Inoltre, include le icone Bootstrap che indicano lo stato. Per rimuovere i bordi esterni è anche presente la componente .accordion-flush.
Bootstrap 5: i nuovi moduli
Gli stili di modulo sono stati revisionati e consolidati, inoltre sono state aggiunte delle nuove pagine di documenti. Il team ha introdotto una completa suite di controlli dei moduli personalizzati.
Stando a quello che viene citato anche dall’azienda stessa, è stato previsto un singolo set di controlli del modulo e un focus di riprogettazione degli elementi esistenti. E ricordiamo che ogni singolo controllo, dalla radio ai file, è personalizzabile per rendere lo stile più omogeneo.
Sono poi presenti delle etichette mobili con il supporto per aree di testo e molto altro ancora. Tali aree sono state limitate, quindi le righe aggiuntive possono essere oscurate all’interno dell’etichetta stessa. Per gli stili aggiuntivi è ancora presente il .form-file, ciò significa che il file del modulo è tutto CSS e non richiede più JavaScript.
La famosa griglia di cui parlavamo all’inizio è stata aggiornata per rendere i layout dei moduli più semplice. Per il sistema a griglia sono stati eliminati .form-group, .form-row e .form-inline.
L’avvento del supporto RTL
Continuiamo a scoprire come funziona Bootstrap 5 parlando del nuovo supporto RTL con versioni RTL del file dist CSS (che include griglia, riavvio e molto altro), una nuova documentazione, il cheatsheet predefinito e il cheatsheet RTL. È stato quindi studiato un nuovo approccio che si basa su RTLCSS, che rielabora il foglio in stile LTR in RTL.
Aggiunte più utilities a Bootstrap 5
Le utilities sono state uno degli aspetti più amati delle versioni precedenti, ecco perché nella versione Bootstrap 5 sono state estese le classi predefinite. Le utilities possono essere ora facilmente generate e personalizzate, con supporto per le classi con stato :hover.
Sono state implementate da quando sono diventate il metodo predefinito per la costruzione. Con un approccio su API è stato possibile creare un linguaggio in Saas per rendere molto più semplice creare e modificare le utilities.
Sono state aggiunte tantissime nuove utilities di posizionamento, per layout e griglia e molte altre ancora.
Infine, grazie a un approccio CSS, molte classi sono state rinominate. Sono stati aggiunti tanti nuovi frammenti destinati a crescere in futuro.
Boostrap 5: aggiornamenti alla griglia e personalizzazione
Il sistema a griglia e le opzioni di layout erano già molto amate nelle versioni precedenti e sono state modificate per renderle più semplici. Le classi di colonne possono essere attualmente utilizzate come width, è stato rimosso il position e la componente .media. È stata inoltre aggiornata la documentazione di layout per suddividere le pagine lunghe secondo degli argomenti più specifici.
Sono stati realizzati poi tanti altri aggiornamenti come la revisione JavaScript e il posizionamento dei menù a discesa (.dropdown-menu-dark), i caroselli hanno la nuova classe di modifica .carousel-dark, sono stati aggiunti esempi alla componente Alert, è stata eliminata la classe .btn-block, sono state aggiornate le barre di navigazione compressa e i gruppi di elenchi hanno la nuova estensione .list-group-numbered.
La sezione relativa alla personalizzazione è completamente nuova, ci sono più contenuti e frammenti di codice per costruire i file di origine Saas. È più facile iniziare un progetto e gestirlo attraverso tutti i miglioramenti che puoi scoprire attraverso l’utilizzo pratico.
Note finali su Bootstrap 5
Sono stati poi eliminati molti browser meno recenti e c’è stata una grande modifica al JavaScript con la rimozione di jQuery. Questi cambiamenti sono stati comune sopperiti con tantissimi miglioramenti. Tutte le novità sono state pensate per rendere molto più chiaro, semplice e immediato l’utilizzo dello strumento.
Sapere come funziona Bootstrap 5 è fondamentale per qualsiasi sviluppatore. E, se hai bisogno a tua volta di uno sviluppatore per un progetto, contattaci subito. Non esitare e affidati ai migliori esperti del settore.
