<

Bootstrap 5.0 alpha è stato rilasciato!

Un occhio alle novità (e che cos'è).

Prima di iniziare...

In questo articolo andrò a spiegare esattamente cos'è Bootstrap e cosa cambia con la nuova versione 5.0.
Bootstrap è la più famosa raccolta di strumenti open source front-end al mondo, utilizzati per la creazione di siti web, nello specifico:

  • Realizzazione di design performanti e graficamente moderni
  • Ottimizzazione responsive per tutti i dispositivi
  • Sistema a griglia funzionale e responsive
  • Modelli di progettazione personalizzabili basati su HTML e CSS, sia per la tipografia, che per le varie componenti dell'interfaccia.
  • Inclusione opzionale di potenti plugin Javascript
  • Utilizzo di Sass, una estensione del linguaggio CSS, che permette di creare variabili e funzioni e gestire il foglio di stile in più file.

I componenti messi a disposizione da Bootstrap sono davvero tanti e troviamo: pulsanti, forms, menù di navigazione, slideshows, alerts, finestre modali e molto altro ancora! Per maggiori informazioni sui componenti cliccare QUI e consultare l'elenco che si trova sull'estrema sinistra.

Attualmente Bootstrap è alla versione 4.5 ma prima di procedere con le novità della versione 5.0 vediamo come si presenta un template base:


<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"<</script>
</body>
</html>

Cosa c'è di nuovo?

Prima di tutto Bootstrap non dipende più da jQuery ed è stato eliminato il supporto per Internet Explorer. Gli altri aggiornamenti prevedono la presenza di variabili CSS, JavaScript più veloce, meno dipendenze e l'aggiunta di una nuova API (un insieme di procedure con l'obbiettivo di risolvere un compito in particolare). Prima di passare ai dettagli, si ricorda che la versione 5 è ancora in modalità alfa, quindi continueranno a verificarsi modifiche fino alla versione beta.
Ora approfondiamo alcuni punti salienti!

Nuovo aspetto grafico

Per fare dei grandi cambiamenti bisogna prima partire dal basso, proprio per questo Bootstrap ha modificato l'aspetto di tutte le pagine del sito, inserito nuovi contenuti, aggiornato la barra laterale per una navigazione più rapida e cambiato il logo che potete vedere qui sotto:

jQuery e Javascript

jQuery è sempre stato un elemento incisivo per Bootstrap e infatti saranno sempre grati per il potenziamento e il supporto che ha dato per continuare a scrivere codice front-end, apprendere nuove cose e abbracciare i plugin della community. Forse ancora più importante, ha cambiato per sempre JavaScript stesso, e questo di per sé è un monumento al successo di jQuery. Grazie ai progressi compiuti negli strumenti di sviluppo front-end e nel supporto del browser, ora sono in grado di eliminare jQuery come dipendenza, senza stravolgere tutto quello che si conosce. Tutto questo segna una delle più grandi modifiche al framework di sempre e significa che i progetti realizzati su Bootstrap 5 saranno significativamente più leggeri sulla dimensione del file e sul caricamento della pagina. Oltre ad eliminare jQuery, sono state apportate alcune altre modifiche e miglioramenti al JavaScript che si concentrano sulla qualità del codice e colmano il divario tra v4 e v5.

Forms aggiornati

I componenti dei forms sono stati ridisegnati per essere maggiormenti personalizzabili. Si sta parlando di pulsanti checkbox, radio e toggle.

Componenti form

I colori

E' stata estesa la tavolozza dei colori (e migliorato il contrasto) per personalizzare in maniera più pratica ed elegante il proprio sito web.

Tavolozza

E molto altro ancora!

I cambiamenti che ci saranno con la versione 5.0 sono davvero tanti tra cui: nuove proprietà CSS personalizzabili, sistema a griglia migliorato, nuova utility API, implementazione di un menù offcanvas, risoluzione bugs, migliorie Sass, inclusione di SVGs nel codice HTML anzichè nel CSS e altro ancora! Non rimane che restare in attesa e vedere cosa è in grado di offrirci ulteriormente questo fantastico framework!

Per qualsiasi approfondimento consultare l'articolo ufficiale di Bootstrap (in inglese) cliccando QUI.


« Articolo successivo:
HTML6 » Articolo precedente:
Programmazione back-end


  • Su di me
  • Mi chiamo Giovanni Gaeta, sono un programmatore professionista di 29 anni che utilizza vari linguaggi di sviluppo quali HTML, CSS, JAVASCRIPT, PHP, JAVA e ho molto a cuore il Web Motion Design ovvero l'integrazione di librerie che permettono di rendere il sito web dinamico, moderno ed accattivante. Qualunque progetto tu voglia portare a termine, lo affronterò con massimo impegno, attenzione ed estrema cura nel dettaglio per non lasciare nulla al caso. Puoi contattarmi in qualsiasi momento per avere delucidazioni in merito scrivendo a gg-creator@outlook.it.

    • EnglishFrenchGermanItalianPortugueseRussianSpanish