Bootstrap nasce nel 2010 come progetto interno al social Twitter. Data la sua forte efficacia ed il suo utilizzo semplice ed intuitivo è stato poi reso indipendente e fruibile per tutti. Esso è infatti ad oggi il framework più utilizzato al mondo per la creazione di interfacce web responsive, ovvero in grado di adattarsi automaticamente a tutti gli schermi e presenti ad oggi.

La sua definizione è “HTML, CSS, and JS toolkit from Twitter”, ovvero un insieme di strumenti grafici, di impaginazione e stilistici che aiutano gli sviluppatori (e non) a raggiungere le loro esigenze mediante l’utilizzo delle funzionalità e stili forniti da Bootstrap stesso.

Bootstrap è compatibile con tutti i moderni browser e viene utilizzato principalmente per la sua funzione di spicco: il Responsive Web Design. Per Responsive Web Design si intende la capacità di adattare il design di un sito web in modo dinamico a seconda della grandezza e delle caratteristiche del dispositivo utilizzato.

Grazie a queste caratteristiche esso viene considerato il miglior framework multi dispositivo e multi-piattaforma.

 

Responsive Web Design, ecco le componenti principali di Bootstrap

• Grid System: ovvero un insieme di fogli che considerano il contenitore generale disposto su una griglia con una larghezza base di 960px, nella quale distribuire i contenuti in varie righe e colonne, che definiranno il layout, ovvero la struttura base del sito.
• CSS Base: contiene una serie di stili predefiniti riguardanti tutta la parte tipografica, ovvero la parte riguardante i titoli (H1, H2, …) e la gestione di tabelle, paragrafi, form e anche pulsanti per richiamare stili e icone pronti all’uso.
• Componenti e javascript: ovvero elementi come menù dropdown, interfacce a tab, tooltip, alert, menu ad accordion, slider, banner di navigazione, PopOver che ci aiutano nell’implementazione degli elementi dinamici della pagina senza la necessità di scrivere codice Javascript grazie alla presenza dei data attributes, che Bootstrap interpreta e gestisce senza nessun intervento da parte dello sviluppatore.

 

Le principali versioni di Bootstrap

L’ultima versione stabile è stata rilasciata nel luglio 2016 con Bootstrap v3.3.7, mentre solo nell’agosto 2017 viene rilasciata la versione beta di Bootstrap 4.0.0. Queste tempistiche giustificano una forte attenzione da parte del team di sviluppo di Bootstrap nel fornire un sistema sicuro ed affidabile. Tuttavia ancora oggi, quasi un anno dopo la release beta di Bootstrap 4, rimane ancora forte il dubbio relativo al passaggio dalla versione 3, ormai consolidata, alla versione 4.

 

 

Bootstap 4, cosa offre rispetto a Bootstrap 3? Tutto in 11 punti

L’ultima versione beta di Bootstrap 4 è stata rilasciata dopo 2 anni, il 10 agosto 2017. Alcuni hanno definito questa versione una semplice riscrittura della precedente, ma in seguito vengono elencate le reali differenze tra la versione 3 e la versione 4:

#1 Navigazione

In Bootstrap 4, il componente di navigazione è stato semplificato in larga misura. È necessario creare un nuovo elenco di elementi che impiegano la classe di base nav.  Ci sono anche alcune aggiunte recenti come la classe nav-link, la classe nav-item e gli stili della barra di navigazione.

#2 Aspetto

Sebbene non ci siano cambiamenti drastici nell’aspetto, ci sono alcuni cambiamenti da tenere in considerazione, come la dimensione dei font alterata, il colore di contesto primario e il colore di sfondo principale.

Inoltre, il framework Bootstrap 4 non viene più fornito assieme a Glyphicons, ovvero un sistema di icone preimpostato, il quale semplifica l’utilizzo e le tempistiche di creazione di icone. Questa decisione rende il framework più leggero, ma obbliga chi lo utilizza ad adottare soluzioni alternative.

#3 Il sistema Reboot

Bootstrap 3 utilizza Normalize.css per rendere l’aspetto di tutti gli elementi HTML coerente tra i vari devices e browser. Bootstrap 4 ha adottato una versione migliorata di Normalize.css, denominata Reboot, la quale apporta notevoli migliorie al sistema precedente.

#4 Grid system

Bootstrap 4 pone molta enfasi sulla personalizzazione, infatti il nuovo sistema grid  permette la creazione di griglie con al massimo 5 file, creando cosi un sistema grid migliorato rispetto alla versione precedente.

Inoltre esso utilizza il nuovissimo sistema css grid.

#5 Flexbox

Flexbox è un modello di layout che consente la formazione di layout complessi con facilità. Può essere utilizzato per ridimensionare elementi o applicare capacità responsive avanzate, sia orizzontali che verticali. Non sostituisce il layout di pagina già esistente. Questa è una delle migliorie principali apportate dall’ultima versione di Bootstrap, e forse il principale motivo per utilizzarlo.

#6 Form control

Bootstrap 4 offre un controllo migliore dei form utilizzati. Esso fornisce infatti una validazione migliorata dei campi utilizzati oltre ad una vasta gamma di nuovi moduli avanzati, sotto forma di caselle di controllo personalizzate e ingressi radio.

#7 Dropdown

Nella versione 4, la classe dropdown deve essere applicata a ogni input di tipo dropdown. Il simbolo caret viene aggiunto in modo automatico ai pulsanti a discesa che sono stati creati utilizzando la nuova classe dropdown.

#8 Paginazione

In Bootstrap 3 è stata creata una componente di impaginazione applicando la classe di impaginazione a qualsiasi elemento ul. Ora Bootstrap 4 ne richiede solamente uno per indicare correttamente l’impaginazione e collegare gli elementi utilizzando le classi page-item e page-link. Questa miglioria permette una maggiore versatilità nell’utilizzo di componenti HTML per la creazione di sistemi di paginazione.

#9 Plugins

Come in Bootstrap 3, le componenti erano divise in due categorie, ovvero una sezione dedicata agli stili (CSS) ed una agli script (Javascript). Non ci sono cambiamenti significativi su come le componenti sono compilate in Bootstrap 4. Nell’ultima versione, le regole di stile sono composte usando SASS. Mentre i plug-in sono disponibili sotto l’oggetto jQuery globale.

#10 Browser support

Bootstrap 4 offre supporto a tutti i principali e rinomati browser, come Safari, Chrome, Opera e Internet Explorer (i8 e superiori).

#11 Classi di utilità

In Bootstrap 4 sono state incluse nuove classi di utilità senza ostacolare alcuna funzionalità esistente. Le aggiunte più importanti riguardano le classi responsive e di allineamento del testo, float responsive e incorporamento responsive. Oltre a offrire molte scorciatoie, queste utilità consentono di modificare l’allineamento del testo, il galleggiamento degli elementi e il ridimensionamento delle proporzioni di qualsiasi media incorporata (e.g. form di terze parti o altre componenti).

Tabella comparativa: Bootstrap 3 vs Bootstrap 4

 

 

Parametro	Bootstrap 3	Bootstrap 4
CSS file sorgente	LESS	SASS
File per griglia	4 file grid system	5 file grid system
Struttura Dropdown	possono essere create con <ul> e <li>	possono essere create con <ul> o <div>
Paginazione di Default	la classe .pagination deve essere aggiunta all’elemento <ul>	la classe .page-item deve essere aggiunta all’elemento <li> e la classe .page-link all’elemento <a>
Immagini Responsive	classe .img-responsive	classe .img-fluid
Responsive Tables	classe .table-responsive da aggiungere sull’elemento <div> padre	classe .table-responsive da aggiungere sull’elemento <table> padre
Allineamento della Navbar	necessario utilizzare le classi .navbar-right, .navbar-left per allineare i componenti	necessario utilizzare le utilities come .mr-auto, o mediante l’utilizzo delle utilities di allineamento flexbox

 

Responsive Web Design, meglio Bootstrap 3 o Bootstrap 4?

Arrivati a questo punto non resta altro che decidere quale versione utilizzare. Personalmente ritengo che Bootstrap 4 sia la migliore, per il semplice fatto che utilizza il sistema Flexbox, il quale alleggerisce e rende molto più efficiente Boostrap stesso. Questa migrazione è da considerarsi come un grandissimo risultato per questo sistema. Ricapitolando rispetto alla versione precedente la versione 4 offre le seguenti migliorie:

• Griglie basate sul sistema Flexbox
• Griglie con auto-layout di ultima generazione
• Possibilità di customizzare le navbar
• Nuove utilities di spacing
• Assenza di sistemi font come Glyphicons
• Dimensionamento responsive
• Elementi galleggianti (e.g. Modali) responsive
• Auto Margini
• Centratura verticale

Se vuoi creare dei sistemi moderni ed efficaci, in linea con le ultime tecnologie, non ti resta che utilizzare Bootstrap 4, altrimenti se preferisci mantenere le vecchie abitudini o semplicemente non vuoi rischiare “comportamenti anomali”, Boostrap 3 è ciò che fa per te.

Guest post a cura di Nicola Castellani