Bootstrap 5

Contenuto1 Alcuni cambiamenti2 Rimozione di jQuery3 Proprietà personalizzate CSS4 Maggiore personalizzazione5 Miglioramenti al Sistema Griglie Il 16 Giugno 2020 è stato ufficialmente rilasciata la versione Alpha di Bootstrap 5. Le […]

Avatar di gbfactory
gbfactory 20 Giugno 2020

Il 16 Giugno 2020 è stato ufficialmente rilasciata la versione Alpha di Bootstrap 5. Le maggiori novità sono la rimozione di jQuery e la fine del supporto per Internet Explorer 10 e 11.

Con tutti gli importanti cambiamenti, il team di Bootstrap informa che la versione attuale è ancora in Alpha e continueranno ad esserci cambiamenti di rottura prima del rilascio della prima Beta.

Alcuni cambiamenti

  • Rimozione di jQuery
  • Passaggio a Vanilla JavaScript
  • Fine del supporto per Internet Explorer 10 e 11
  • Miglioramenti al sistema griglia
  • Miglioramenti alla documentazione
  • Grandezza caratteri responsiva
  • Nuove utilità e helpers
  • Maggiore semplicità di personalizzazione
  • Pacchetto più leggero
  • Nuova API disponibile.
  • Migliorati moduli (forms)

Rimozione di jQuery

I progressi degli strumenti per lo sviluppo front-end hanno permesso di abbandonare jQuery come dipendenza, senza la possibilità di notare alcuna differenza. Questo è uno dei maggiori cambiamenti che il framework ha subito e significa che Bootstrap 5 sarà più leggero e i tempi di caricamento delle pagine saranno migliori.

Oltre alla rimozione di jQuery sono stati fatti altri progressi riguardanti JavaScript: la qualità del codice è stata migliorata ed è stato rimosso il plugin che si occupava della gestione dei Bottoni, passando ad un sistema basato solo su CSS.

Proprietà personalizzate CSS

Grazie alla fine del supporto di Internet Explorer è stato possibile iniziare ad utilizzare le custom proprieties in Bootstrap 5.

Maggiore personalizzazione

Nella documentazione è stata aggiunta una nuova sezione completamente dedicata alla personalizzazione di Bootstrap.

Inoltre nella v5 è stata notevolmente ingrandita la palette di colori in modo da rendere più semplice la personalizzazione. Miglioramenti sono stati fatti anche al contrasto tra i colori.

Miglioramenti al Sistema Griglie

Il sistema griglie già precedentemente utilizzato nella versione 4, è stato migliorato in vari modi:

  • Aggiunto una nuova dimensione: xxl
  • La classe .gutter è stata sostituita da .g*
  • I layout dei moduli sono stati sostituiti dal nuovo sistema griglie
  • Aggiunte delle classi per la spaziatura verticale
  • Le colonne non sono più position: relative di default.

Ecco un piccolo esempio della classe gutter:

<div class="row g-5">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Fonte: Bootstrap Blog